From d2e4cf5187d40e4a43d12ae1521f13e9a4d414b4 Mon Sep 17 00:00:00 2001 From: realaravinth Date: Thu, 6 May 2021 20:32:44 +0530 Subject: [PATCH] auth forms styling updated --- .github/workflows/linux.yml | 1 + templates/_vars.scss | 1 + templates/auth/css/forms.scss | 125 --------------------- templates/auth/css/main.scss | 62 ++++++++++ templates/auth/login/index.html | 63 ++++++----- templates/auth/register/index.html | 45 +++++--- templates/components/_inner-container.scss | 24 ++++ templates/components/_main.scss | 23 ++++ templates/index.ts | 2 +- templates/panel/css/main.scss | 15 +-- templates/panel/index.html | 2 +- templates/panel/sitekey/add/index.html | 2 +- templates/panel/sitekey/list/index.html | 2 +- templates/router.ts | 4 +- 14 files changed, 185 insertions(+), 186 deletions(-) delete mode 100644 templates/auth/css/forms.scss create mode 100644 templates/auth/css/main.scss create mode 100644 templates/components/_inner-container.scss create mode 100644 templates/components/_main.scss diff --git a/.github/workflows/linux.yml b/.github/workflows/linux.yml index 45298ab1..b8b9dc12 100644 --- a/.github/workflows/linux.yml +++ b/.github/workflows/linux.yml @@ -42,6 +42,7 @@ jobs: path: | ~/.cargo/registry ~/.cargo/git + node_modules target key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }} diff --git a/templates/_vars.scss b/templates/_vars.scss index 6359d39a..9a936680 100644 --- a/templates/_vars.scss +++ b/templates/_vars.scss @@ -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%; diff --git a/templates/auth/css/forms.scss b/templates/auth/css/forms.scss deleted file mode 100644 index f6e3e5f4..00000000 --- a/templates/auth/css/forms.scss +++ /dev/null @@ -1,125 +0,0 @@ -/* - * Copyright (C) 2021 Aravinth Manivannan - * - * 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 . - */ - -@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); -} diff --git a/templates/auth/css/main.scss b/templates/auth/css/main.scss new file mode 100644 index 00000000..97ffbd0f --- /dev/null +++ b/templates/auth/css/main.scss @@ -0,0 +1,62 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +@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); +} diff --git a/templates/auth/login/index.html b/templates/auth/login/index.html index d373257f..8acbb111 100644 --- a/templates/auth/login/index.html +++ b/templates/auth/login/index.html @@ -1,45 +1,54 @@ <. include!("../../components/headers.html"); .> -
- " class="form__logo" alt="" /> -

Sign in to mCaptcha

+
+
-
-
+ +
+ <. include!("../../components/footers.html"); .> diff --git a/templates/auth/register/index.html b/templates/auth/register/index.html index 1e5bc9f2..bc5922f1 100644 --- a/templates/auth/register/index.html +++ b/templates/auth/register/index.html @@ -1,13 +1,24 @@ <. include!("../../components/headers.html"); .> -
- " class="form__logo" alt="" /> -

Join mCaptcha

+
+
-
-
<. include!("../../components/footers.html"); .> diff --git a/templates/components/_inner-container.scss b/templates/components/_inner-container.scss new file mode 100644 index 00000000..8a87c1d7 --- /dev/null +++ b/templates/components/_inner-container.scss @@ -0,0 +1,24 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +@mixin inner-container { + display: flex; + box-sizing: border-box; + max-width: 50%; + margin: 50px auto; + border-radius: 5px; +} diff --git a/templates/components/_main.scss b/templates/components/_main.scss new file mode 100644 index 00000000..821b72ec --- /dev/null +++ b/templates/components/_main.scss @@ -0,0 +1,23 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ +@import '../vars'; + +@mixin main { + min-height: 100%; + background-color: $backdrop; + padding-bottom: 20px; +} diff --git a/templates/index.ts b/templates/index.ts index 9207966b..99e09ff9 100644 --- a/templates/index.ts +++ b/templates/index.ts @@ -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'; diff --git a/templates/panel/css/main.scss b/templates/panel/css/main.scss index cd1bc69a..1c41d23f 100644 --- a/templates/panel/css/main.scss +++ b/templates/panel/css/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; } diff --git a/templates/panel/index.html b/templates/panel/index.html index d1e90279..14eed840 100644 --- a/templates/panel/index.html +++ b/templates/panel/index.html @@ -1,6 +1,6 @@ <. include!("../components/headers.html"); .> <. include!("./header/index.html"); .> -
+
<. include!("./taskbar/index.html"); .> <. include!("./help-banner/index.html"); .>
diff --git a/templates/panel/sitekey/add/index.html b/templates/panel/sitekey/add/index.html index 7cfb8c29..29bf9171 100644 --- a/templates/panel/sitekey/add/index.html +++ b/templates/panel/sitekey/add/index.html @@ -1,7 +1,7 @@ <. include!("../../../components/headers.html"); .> <. include!("../../header/index.html"); .> -
+
<. include!("../../taskbar/index.html"); .> <. include!("../../help-banner/index.html"); .> diff --git a/templates/panel/sitekey/list/index.html b/templates/panel/sitekey/list/index.html index 1b05a6f5..6da2e11f 100644 --- a/templates/panel/sitekey/list/index.html +++ b/templates/panel/sitekey/list/index.html @@ -1,7 +1,7 @@ <. include!("../../../components/headers.html"); .> <. include!("../../header/index.html"); .> -
+
<. include!("../../taskbar/index.html"); .> <. include!("../../help-banner/index.html"); .> diff --git a/templates/router.ts b/templates/router.ts index e1d1602c..52a68327 100644 --- a/templates/router.ts +++ b/templates/router.ts @@ -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();