mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2025-03-14 13:08:27 +03:00
auth forms styling updated
This commit is contained in:
parent
ab3147e11d
commit
d2e4cf5187
14 changed files with 185 additions and 186 deletions
1
.github/workflows/linux.yml
vendored
1
.github/workflows/linux.yml
vendored
|
@ -42,6 +42,7 @@ jobs:
|
|||
path: |
|
||||
~/.cargo/registry
|
||||
~/.cargo/git
|
||||
node_modules
|
||||
target
|
||||
key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
|
||||
|
||||
|
|
|
@ -25,3 +25,4 @@ $light-grey: rgba(0, 0, 0, 0.125);
|
|||
$white: #fff;
|
||||
$form-content-width: 90%;
|
||||
$black-text: #000;
|
||||
$auth-content-width: 30%;
|
||||
|
|
|
@ -1,125 +0,0 @@
|
|||
/*
|
||||
* 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';
|
||||
@import '../../vars';
|
||||
|
||||
body {
|
||||
background-color: $backdrop;
|
||||
}
|
||||
|
||||
.form__logo {
|
||||
width: 110px;
|
||||
padding-top: 50px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
top: 20%;
|
||||
transform: translate(0%, -40.9%);
|
||||
}
|
||||
|
||||
.form__brand {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 20%;
|
||||
transform: translate(0%, -90.9%);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
max-width: 40%;
|
||||
min-width: 20%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -49.9%);
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.form__box {
|
||||
border: 1px solid #eaecef;
|
||||
border: 1px solid black;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 5px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.form__in-group {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
max-width: 80%;
|
||||
padding: 10px 0px;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.form__in-field {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form__in-field--warn {
|
||||
border: solid 1px red;
|
||||
}
|
||||
|
||||
.form__in-field--success {
|
||||
border: solid 1px #2ea44f;
|
||||
}
|
||||
|
||||
.form__pw-recovery {
|
||||
text-decoration: none;
|
||||
color: rgb(3, 102, 214);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.form__submit-button {
|
||||
display: block;
|
||||
border: 1px solid skyblue;
|
||||
|
||||
background: $violet;
|
||||
color: $light-text;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.form__secondary-action {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form__secondary-action__banner {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form__secondary-action__link {
|
||||
text-decoration: none;
|
||||
color: rgb(3, 102, 214);
|
||||
}
|
62
templates/auth/css/main.scss
Normal file
62
templates/auth/css/main.scss
Normal file
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
* 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';
|
||||
@import '../../vars';
|
||||
@import '../../components/inner-container';
|
||||
@import '../../components/main';
|
||||
|
||||
body {
|
||||
background-color: $backdrop;
|
||||
}
|
||||
|
||||
.auth-inner-container {
|
||||
@include inner-container;
|
||||
flex-direction: column;
|
||||
margin: 0px, auto;
|
||||
width: $auth-content-width;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.auth-main {
|
||||
@include main;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.auth__logo {
|
||||
width: 190px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
transform: translate(0%, -40.9%);
|
||||
}
|
||||
|
||||
.auth__secondary-action__banner {
|
||||
display: block;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin: 20px auto auto auto;
|
||||
}
|
||||
|
||||
.auth__secondary-action__link {
|
||||
text-decoration: none;
|
||||
color: rgb(3, 102, 214);
|
||||
}
|
|
@ -1,45 +1,54 @@
|
|||
<. include!("../../components/headers.html"); .>
|
||||
<div class="form-container">
|
||||
<img src="<.= crate::FILES.get("./static-assets/img/icon-trans.png").unwrap().>" class="form__logo" alt="" />
|
||||
<h2 class="form__brand">Sign in to mCaptcha</h2>
|
||||
<main class="auth-main">
|
||||
<div class="auth-inner-container">
|
||||
|
||||
<form method="POST" action="<.= crate::V1_API_ROUTES.auth.login .>" class="form__box" id="form">
|
||||
<label class="form__in-group" for="username"
|
||||
>Username
|
||||
<img src="<.=
|
||||
crate::FILES.get("./static-assets/img/icon-trans.png").unwrap().>"
|
||||
class="auth__logo" alt="mcaptcha logo" />
|
||||
|
||||
<form
|
||||
class="sitekey-form"
|
||||
method="POST"
|
||||
action="<.= crate::V1_API_ROUTES.auth.login .>"
|
||||
id="form"
|
||||
>
|
||||
<h1 class="form__title">
|
||||
Signin to mCaptcha
|
||||
</h1>
|
||||
<label class="sitekey-form__label" for="username">
|
||||
Username
|
||||
<input
|
||||
class="form__in-field"
|
||||
id="username"
|
||||
class="sitekey-form__input"
|
||||
type="text"
|
||||
name="username"
|
||||
required=""
|
||||
autofocus="true"
|
||||
id="username"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label for="password" class="form__in-group"
|
||||
>Password
|
||||
<label class="sitekey-form__label" for="duration">
|
||||
Password
|
||||
<input
|
||||
class="form__in-field"
|
||||
class="sitekey-form__input"
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
required=""
|
||||
id="password"
|
||||
required
|
||||
/>
|
||||
<!--
|
||||
<a class="form__pw-recovery" -href="/recovert/password"
|
||||
>Forgot password?</a
|
||||
>
|
||||
-->
|
||||
</label>
|
||||
<input type="submit" class="form__submit-button" value="Sign in" />
|
||||
|
||||
<input type="submit" class="sitekey-form__submit" value="Sign in" />
|
||||
</form>
|
||||
<div class="form__secondary-action">
|
||||
<p class="form__secondary-action__banner">
|
||||
<p class="auth__secondary-action__banner">
|
||||
New to mCaptcha?
|
||||
<a href="<.= crate::PAGES.auth.join .>" class="form__secondary-action__link"
|
||||
>Create account</a
|
||||
>
|
||||
<a
|
||||
href="<.= crate::PAGES.auth.join .>"
|
||||
class="auth__secondary-action__link">
|
||||
Create an account
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<. include!("../../components/footers.html"); .>
|
||||
|
|
|
@ -1,13 +1,24 @@
|
|||
<. include!("../../components/headers.html"); .>
|
||||
<div class="form-container">
|
||||
<img src="<.= crate::FILES.get("./static-assets/img/icon-trans.png").unwrap().>" class="form__logo" alt="" />
|
||||
<h2 class="form__brand">Join mCaptcha</h2>
|
||||
<main class="auth-main">
|
||||
<div class="auth-inner-container">
|
||||
|
||||
<form method="POST" action="<.= crate::V1_API_ROUTES.auth.register .>" class="form__box" id="form">
|
||||
<label class="form__in-group" for="username"
|
||||
<img src="<.=
|
||||
crate::FILES.get("./static-assets/img/icon-trans.png").unwrap().>"
|
||||
class="auth__logo" alt="mcaptcha logo" />
|
||||
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="<.= crate::V1_API_ROUTES.auth.register .>"
|
||||
class="sitekey-form" id="form">
|
||||
<h1 class="form__title">
|
||||
Join mCaptcah
|
||||
</h1>
|
||||
|
||||
<label class="sitekey-form__label" for="username"
|
||||
>Username
|
||||
<input
|
||||
class="form__in-field"
|
||||
class="sitekey-form__input"
|
||||
id="username"
|
||||
type="text"
|
||||
name="username"
|
||||
|
@ -17,10 +28,10 @@
|
|||
/>
|
||||
</label>
|
||||
|
||||
<label class="form__in-group" for="username"
|
||||
<label class="sitekey-form__label" for="username"
|
||||
>Email(optional)
|
||||
<input
|
||||
class="form__in-field"
|
||||
class="sitekey-form__input"
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
|
@ -28,10 +39,10 @@
|
|||
/>
|
||||
</label>
|
||||
|
||||
<label for="password" class="form__in-group"
|
||||
>Password
|
||||
<label class="sitekey-form__label" for="password"
|
||||
>Password
|
||||
<input
|
||||
class="form__in-field"
|
||||
class="sitekey-form__input"
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
|
@ -40,10 +51,10 @@
|
|||
/>
|
||||
</label>
|
||||
|
||||
<label for="password" class="form__in-group"
|
||||
<label for="password" class="sitekey-form__label"
|
||||
>Re-enter Password
|
||||
<input
|
||||
class="form__in-field"
|
||||
class="sitekey-form__input"
|
||||
type="password"
|
||||
id="password-check"
|
||||
name="password-check"
|
||||
|
@ -51,13 +62,11 @@
|
|||
required
|
||||
/>
|
||||
</label>
|
||||
<input type="submit" class="form__submit-button" value="Sign up" />
|
||||
<input type="submit" class="sitekey-form__submit" value="Sign up" />
|
||||
</form>
|
||||
<div class="form__secondary-action">
|
||||
<p class="form__secondary-action__banner">
|
||||
<p class="auth__secondary-action__banner">
|
||||
Already have an account?
|
||||
<a href="<.= crate::PAGES.auth.login .>" class="form__secondary-action__link">Log in</a>
|
||||
<a href="<.= crate::PAGES.auth.login .>" class="auth__secondary-action__link">Log in</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<. include!("../../components/footers.html"); .>
|
||||
|
|
24
templates/components/_inner-container.scss
Normal file
24
templates/components/_inner-container.scss
Normal file
|
@ -0,0 +1,24 @@
|
|||
/*
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
@mixin inner-container {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
max-width: 50%;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
23
templates/components/_main.scss
Normal file
23
templates/components/_main.scss
Normal file
|
@ -0,0 +1,23 @@
|
|||
/*
|
||||
* 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 '../vars';
|
||||
|
||||
@mixin main {
|
||||
min-height: 100%;
|
||||
background-color: $backdrop;
|
||||
padding-bottom: 20px;
|
||||
}
|
|
@ -24,7 +24,7 @@ import * as addSiteKey from './panel/sitekey/add/ts';
|
|||
|
||||
import VIEWS from './views/v1/routes';
|
||||
|
||||
import './auth/css/forms.scss';
|
||||
import './auth/css/main.scss';
|
||||
import './panel/css/main.scss';
|
||||
import './panel/header/sidebar/main.scss';
|
||||
import './panel/taskbar/main.scss';
|
||||
|
|
|
@ -18,19 +18,14 @@
|
|||
@import '../../reset';
|
||||
@import '../../vars';
|
||||
@import '../../components/button';
|
||||
@import '../../components/inner-container';
|
||||
@import '../../components/main';
|
||||
|
||||
main {
|
||||
.panel-main {
|
||||
@include main;
|
||||
margin-left: 14%;
|
||||
min-height: 100%;
|
||||
background-color: $backdrop;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.inner-container {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
max-width: 50%;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
@include inner-container;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<. include!("../components/headers.html"); .>
|
||||
<. include!("./header/index.html"); .>
|
||||
<main>
|
||||
<main class="panel-main">
|
||||
<. include!("./taskbar/index.html"); .>
|
||||
<. include!("./help-banner/index.html"); .>
|
||||
<div class="inner-container">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<. include!("../../../components/headers.html"); .> <. include!("../../header/index.html");
|
||||
.>
|
||||
|
||||
<main>
|
||||
<main class="panel-main">
|
||||
<. include!("../../taskbar/index.html"); .> <.
|
||||
include!("../../help-banner/index.html"); .>
|
||||
<!-- Main content container -->
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<. include!("../../../components/headers.html"); .> <.
|
||||
include!("../../header/index.html"); .>
|
||||
|
||||
<main>
|
||||
<main class="panel-main">
|
||||
<. include!("../../taskbar/index.html"); .> <.
|
||||
include!("../../help-banner/index.html"); .>
|
||||
<!-- Main content container -->
|
||||
|
|
|
@ -83,12 +83,12 @@ export class Router {
|
|||
this.routes.forEach(route => {
|
||||
const pattern = new RegExp(`^${route.uri}$`);
|
||||
if (path.match(pattern)) {
|
||||
fn = route.fn;
|
||||
fn = route.fn;
|
||||
}
|
||||
});
|
||||
|
||||
if (fn === undefined) {
|
||||
throw new Error("Route isn't registered");
|
||||
throw new Error("Route isn't registered");
|
||||
}
|
||||
|
||||
return fn();
|
||||
|
|
Loading…
Add table
Reference in a new issue