auth forms styling updated

.github/workflows/linux.yml

@@ -42,6 +42,7 @@ jobs:
           path: |
             ~/.cargo/registry
             ~/.cargo/git
+            node_modules
             target
           key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
 

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%;

templates/auth/css/forms.scss

@@ -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);
-}

templates/auth/css/main.scss

@@ -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);
+}

templates/auth/login/index.html

@@ -1,45 +1,54 @@
 <. include!("../../components/headers.html"); .>
-<div class="form-container">
+<main class="auth-main">
-    <img src="<.= crate::FILES.get("./static-assets/img/icon-trans.png").unwrap().>" class="form__logo" alt="" />
+  <div class="auth-inner-container">
-  <h2 class="form__brand">Sign in to mCaptcha</h2>
 
-  <form method="POST" action="<.= crate::V1_API_ROUTES.auth.login .>" class="form__box" id="form">
+    <img src="<.=
-    <label class="form__in-group" for="username"
+    crate::FILES.get("./static-assets/img/icon-trans.png").unwrap().>"
-      >Username
+    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"
+        class="sitekey-form__input"
-        id="username"
         type="text"
         name="username"
-        required=""
+        id="username"
-        autofocus="true"
+        required
       />
     </label>
 
-    <label for="password" class="form__in-group"
+    <label class="sitekey-form__label" for="duration">
-      >Password
+      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="auth__secondary-action__banner">
-    <p class="form__secondary-action__banner">
       New to mCaptcha?
-      <a href="<.= crate::PAGES.auth.join .>" class="form__secondary-action__link"
+      <a 
-        >Create account</a
+		  href="<.= crate::PAGES.auth.join .>"
-      >
+		  class="auth__secondary-action__link">
+		  Create an account
+	  </a>
     </p>
   </div>
-</div>
+
+</main>
+
 <. include!("../../components/footers.html"); .>

templates/auth/register/index.html

@@ -1,13 +1,24 @@
 <. include!("../../components/headers.html"); .>
-<div class="form-container">
+<main class="auth-main">
-    <img src="<.= crate::FILES.get("./static-assets/img/icon-trans.png").unwrap().>" class="form__logo" alt="" />
+  <div class="auth-inner-container">
-  <h2 class="form__brand">Join mCaptcha</h2>
 
-  <form method="POST" action="<.= crate::V1_API_ROUTES.auth.register .>"  class="form__box" id="form">
+    <img src="<.=
-    <label class="form__in-group" for="username"
+    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"
+    <label   class="sitekey-form__label"  for="password" 
-      >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="auth__secondary-action__banner">
-    <p class="form__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"); .>

templates/components/_inner-container.scss

@@ -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;
+}

templates/components/_main.scss

@@ -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;
+}

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';

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;
+  @include inner-container;
-  box-sizing: border-box;
-  max-width: 50%;
-  margin: 50px auto;
-  border-radius: 5px;
-  display: flex;
 }

templates/panel/index.html

@@ -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">

templates/panel/sitekey/add/index.html

@@ -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 -->

templates/panel/sitekey/list/index.html

@@ -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 -->

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();