mirror/mCaptcha
1
0
Fork 1
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2026-02-11 10:05:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

widget noscript and styling

Browse Source
This commit is contained in:
realaravinth
2021-05-29 13:40:11 +05:30
parent fc34353e67
commit fd67a9fa42
7 changed files with 191 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/main.rs
View File

@@ -1,19 +1,19 @@
/* /*
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net> * Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as * it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the * published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version. * License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details. * GNU Affero General Public License for more details.
* *
* You should have received a copy of the GNU Affero General Public License * You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
use std::env; use std::env;
use actix_identity::{CookieIdentityPolicy, IdentityService}; use actix_identity::{CookieIdentityPolicy, IdentityService};
@@ -60,6 +60,10 @@ lazy_static! {
FILES.get("./static/cache/bundle/bundle.css").unwrap(); FILES.get("./static/cache/bundle/bundle.css").unwrap();
pub static ref MOBILE_CSS: &'static str = pub static ref MOBILE_CSS: &'static str =
FILES.get("./static/cache/bundle/mobile.css").unwrap(); FILES.get("./static/cache/bundle/mobile.css").unwrap();
pub static ref VERIFICATIN_WIDGET_JS: &'static str =
FILES.get("./static/cache/bundle/verificationWidget.js").unwrap();
pub static ref VERIFICATIN_WIDGET_CSS: &'static str =
FILES.get("./static/cache/bundle/verificationWidget.css").unwrap();
/// points to source files matching build commit /// points to source files matching build commit
pub static ref SOURCE_FILES_OF_INSTANCE: String = { pub static ref SOURCE_FILES_OF_INSTANCE: String = {

14
src/static_assets/static_files.rs
View File

@@ -102,6 +102,20 @@ mod tests {
.await; .await;
assert_eq!(resp.status(), StatusCode::OK); assert_eq!(resp.status(), StatusCode::OK);
let resp = test::call_service(
&mut app,
test::TestRequest::get().uri(&*crate::VERIFICATIN_WIDGET_JS).to_request(),
)
.await;
assert_eq!(resp.status(), StatusCode::OK);
let resp = test::call_service(
&mut app,
test::TestRequest::get().uri(&*crate::VERIFICATIN_WIDGET_CSS).to_request(),
)
.await;
assert_eq!(resp.status(), StatusCode::OK);
let resp = test::call_service( let resp = test::call_service(
&mut app, &mut app,
test::TestRequest::get().uri( test::TestRequest::get().uri(

9
templates/widget/footer.html Normal file
View File

@@ -0,0 +1,9 @@
<link
rel="stylesheet"
media="all"
type="text/css"
href="<.= &*crate::VERIFICATIN_WIDGET_CSS .>"
/>
<script src="<.= &*crate::VERIFICATIN_WIDGET_JS .>"></script>
</body>
</html>

97
templates/widget/index.html
View File

@@ -1,87 +1,44 @@
<. include!("../components/headers/raw-headers.html"); .> <. include!("../components/headers/raw-headers.html"); .>
<body> <body>
<form class="contaienr"> <form class="widget__contaienr">
<label class="checkbox-label" for="verification"> <noscript>
<input id="verification" class="checkbox" type="checkbox" /> <div class="widget__noscript-container">
<span class="widget__noscript-warning">
Please enable JavaScript to receive mCaptcha challenge
</span>
<a class="widget__source-code" href="https://github.com/mCaptcha">
Read our source code
</a>
</div>
</noscript>
<label class="widget__verification-container" for="widget__verification-checkbox">
<input
id="widget__verification-checkbox"
class="widget__verification-checkbox"
type="checkbox" />
I'm not a robot I'm not a robot
</label> </label>
<div class="details"> <div class="widget__mcaptcha-details">
<a href="<.= crate::PKG_HOMEPAGE .>" class="logo-container"> <a href="<.= crate::PKG_HOMEPAGE .>"
class="widget__mcaptcha-logo-container"
>
<img <img
class="logo" class="widget__mcaptcha-logo"
src="<.= crate::FILES.get("./static/cache/img/icon-trans.png").unwrap().>" src="<.= crate::FILES.get("./static/cache/img/icon-trans.png").unwrap().>"
alt="mCaptcha logo" alt="mCaptcha logo"
/> />
<p class="brand-name">mCaptcha</p> <p class="widget__mcaptcha-brand-name">mCaptcha</p>
</a> </a>
<div class="links-container"> <div class="widget__mcaptcha-info-container">
<a class="links" <a class="widget__mcaptcha-info-link"
href="<.= crate::PKG_HOMEPAGE .><.= crate::PAGES.privacy .>"> href="<.= crate::PKG_HOMEPAGE .><.= crate::PAGES.privacy .>">
Privacy Privacy
</a> </a>
<a class="links" <a class="widget__mcaptcha-info-link"
href="<.= crate::PKG_HOMEPAGE .><.= crate::PAGES.security .>">> href="<.= crate::PKG_HOMEPAGE .><.= crate::PAGES.security .>">
Terms Terms
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</body> <.include!("./footer.html"); .>
<style type="text/css" media="screen">
.contaienr {
max-width: 350px;
max-height: 90px;
display: flex;
box-sizing: border-box;
}
.checkbox-label {
display: flex;
align-items: center;
line-height: 30px;
flex: 2;
margin: auto;
font-size: 0.99rem;
}
.checkbox {
width: 30px;
height: 30px;
margin: 0 10px;
}
.details {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.logo-container {
flex: 2;
padding-top: 5px;
}
.brand-name {
font-size: 0.6rem;
margin: auto;
text-align: center;
}
.logo {
display: block;
width: 45px;
margin: auto;
}
.links-container {
display: flex;
margin: auto;
}
.links {
font-size: 0.5rem;
margin: 5px;
}
</style>
</html>

22
templates/widget/index.ts Normal file
View File

@@ -0,0 +1,22 @@
/*
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import './main.scss';
const verificationContainer = <HTMLElement>(
document.querySelector('.widget__verification-container')
);
verificationContainer.style.display = 'flex';

99
templates/widget/main.scss Normal file
View File

@@ -0,0 +1,99 @@
/*
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import '../reset';
.widget__contaienr {
max-width: 350px;
max-height: 90px;
display: flex;
box-sizing: border-box;
}
.widget__noscript-container {
display: flex;
font-size: 0.7rem;
line-height: 20px;
flex-direction: column;
padding: 5px;
box-sizing: border-box;
height: 100%;
margin: auto;
}
.widget__noscript-warning {
display: block;
margin: auto;
flex: 2;
width: 100%;
margin: auto;
}
.widget__source-code {
display: block;
flex: 1;
}
.widget__verification-container {
display: none;
/*display: flex; */
align-items: center;
line-height: 30px;
flex: 2;
margin: auto;
font-size: 0.99rem;
}
.widget__verification-checkbox {
width: 30px;
height: 30px;
margin: 0 10px;
}
.widget__mcaptcha-details {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.widget__mcaptcha-logo-container {
flex: 2;
padding-top: 5px;
}
.widget__mcaptcha-brand-name {
font-size: 0.6rem;
margin: auto;
text-align: center;
}
.widget__mcaptcha-logo {
display: block;
width: 45px;
margin: auto;
}
.widget__mcaptcha-info-container {
display: flex;
margin: auto;
}
.widget__mcaptcha-info-link {
font-size: 0.5rem;
margin: 5px;
}

4
webpack.config.js
View File

@@ -3,9 +3,6 @@ const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const mobileCss = (new MiniCssExtractPlugin().options.filename = 'mobile.css');
const mainCss = (new MiniCssExtractPlugin().options.filename = 'main.css');
module.exports = { module.exports = {
devtool: 'inline-source-map', devtool: 'inline-source-map',
mode: 'development', mode: 'development',
@@ -13,6 +10,7 @@ module.exports = {
entry: { entry: {
bundle: './templates/index.ts', bundle: './templates/index.ts',
mobile: './templates/mobile.ts', mobile: './templates/mobile.ts',
verificationWidget: './templates/widget/index.ts',
}, },
output: { output: {
filename: '[name].js', filename: '[name].js',