mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2025-02-28 22:38:56 +03:00
widget noscript and styling
This commit is contained in:
parent
fc34353e67
commit
fd67a9fa42
7 changed files with 191 additions and 88 deletions
34
src/main.rs
34
src/main.rs
|
@ -1,19 +1,19 @@
|
|||
/*
|
||||
* 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/>.
|
||||
*/
|
||||
* 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/>.
|
||||
*/
|
||||
use std::env;
|
||||
|
||||
use actix_identity::{CookieIdentityPolicy, IdentityService};
|
||||
|
@ -60,6 +60,10 @@ lazy_static! {
|
|||
FILES.get("./static/cache/bundle/bundle.css").unwrap();
|
||||
pub static ref MOBILE_CSS: &'static str =
|
||||
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
|
||||
pub static ref SOURCE_FILES_OF_INSTANCE: String = {
|
||||
|
|
|
@ -102,6 +102,20 @@ mod tests {
|
|||
.await;
|
||||
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(
|
||||
&mut app,
|
||||
test::TestRequest::get().uri(
|
||||
|
|
9
templates/widget/footer.html
Normal file
9
templates/widget/footer.html
Normal 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>
|
|
@ -1,87 +1,44 @@
|
|||
<. include!("../components/headers/raw-headers.html"); .>
|
||||
<body>
|
||||
<form class="contaienr">
|
||||
<label class="checkbox-label" for="verification">
|
||||
<input id="verification" class="checkbox" type="checkbox" />
|
||||
<form class="widget__contaienr">
|
||||
<noscript>
|
||||
<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
|
||||
</label>
|
||||
<div class="details">
|
||||
<a href="<.= crate::PKG_HOMEPAGE .>" class="logo-container">
|
||||
<div class="widget__mcaptcha-details">
|
||||
<a href="<.= crate::PKG_HOMEPAGE .>"
|
||||
class="widget__mcaptcha-logo-container"
|
||||
>
|
||||
<img
|
||||
class="logo"
|
||||
class="widget__mcaptcha-logo"
|
||||
src="<.= crate::FILES.get("./static/cache/img/icon-trans.png").unwrap().>"
|
||||
alt="mCaptcha logo"
|
||||
/>
|
||||
<p class="brand-name">mCaptcha</p>
|
||||
<p class="widget__mcaptcha-brand-name">mCaptcha</p>
|
||||
</a>
|
||||
<div class="links-container">
|
||||
<a class="links"
|
||||
<div class="widget__mcaptcha-info-container">
|
||||
<a class="widget__mcaptcha-info-link"
|
||||
href="<.= crate::PKG_HOMEPAGE .><.= crate::PAGES.privacy .>">
|
||||
Privacy
|
||||
</a>
|
||||
<a class="links"
|
||||
href="<.= crate::PKG_HOMEPAGE .><.= crate::PAGES.security .>">>
|
||||
<a class="widget__mcaptcha-info-link"
|
||||
href="<.= crate::PKG_HOMEPAGE .><.= crate::PAGES.security .>">
|
||||
Terms
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<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>
|
||||
<.include!("./footer.html"); .>
|
||||
|
|
22
templates/widget/index.ts
Normal file
22
templates/widget/index.ts
Normal 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
99
templates/widget/main.scss
Normal 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;
|
||||
}
|
|
@ -3,9 +3,6 @@ const path = require('path');
|
|||
const MiniCssExtractPlugin = require('mini-css-extract-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 = {
|
||||
devtool: 'inline-source-map',
|
||||
mode: 'development',
|
||||
|
@ -13,6 +10,7 @@ module.exports = {
|
|||
entry: {
|
||||
bundle: './templates/index.ts',
|
||||
mobile: './templates/mobile.ts',
|
||||
verificationWidget: './templates/widget/index.ts',
|
||||
},
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
|
|
Loading…
Add table
Reference in a new issue