panel layout

frontend/templates/auth/login/index.html

@@ -1,30 +1,46 @@
 <. include!("../../components/headers.html"); .>
-    <div class="form-container">
-      <img src="../static/img/icon-trans.png" class="form__logo" alt="">
-      <h2 class="form__brand">Sign in to mCaptcha</h2>
+<div class="form-container">
+  <img src="../static/img/icon-trans.png" class="form__logo" alt="" />
+  <h2 class="form__brand">Sign in to mCaptcha</h2>
 
-      <form class="form__box" id="form">
-        <label class="form__in-group" for="username">Username
-          <input class="form__in-field" id="username" type="text" name="username" required="">
-        </label>
+  <form class="form__box" id="form">
+    <label class="form__in-group" for="username"
+      >Username
+      <input
+        class="form__in-field"
+        id="username"
+        type="text"
+        name="username"
+        required=""
+      />
+    </label>
 
-        <label for="password" class="form__in-group">Password
-          <input class="form__in-field" type="password" id="password" name="password" required="">
-          <!--
+    <label for="password" class="form__in-group"
+      >Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password"
+        name="password"
+        required=""
+      />
+      <!--
           <a class="form__pw-recovery" -href="/recovert/password"
             >Forgot password?</a
           >
           -->
-        </label>
-        <button class="form__submit-button" type="submit">
-        Submit
-        </button>
-      </form>
-      <div class="form__secondary-action">
-        <p class="form__secondary-action__banner">
-          New to mCaptcha?
-          <a href="/register" class="form__secondary-action__link">Create account</a>
-        </p>
-      </div>
-    </div>
+    </label>
+    <button class="form__submit-button" type="submit">
+      Submit
+    </button>
+  </form>
+  <div class="form__secondary-action">
+    <p class="form__secondary-action__banner">
+      New to mCaptcha?
+      <a href="/register" class="form__secondary-action__link"
+        >Create account</a
+      >
+    </p>
+  </div>
+</div>
 <. include!("../../components/footers.html"); .>

frontend/templates/auth/login/index.js

@@ -3,6 +3,8 @@ import ROUTES from '../../api/v1/routes';
 import isBlankString from '../../utils/genJsonPayload';
 import genJsonPayload from '../../utils/genJsonPayload';
 
+import '../forms.scss';
+
 const login = e => {
   e.preventDefault();
   let username = document.getElementById('username').value;
@@ -23,4 +25,7 @@ const login = e => {
   });
 };
 
-export default login;
+export const index = () => {
+  let form = document.getElementById('form');
+  form.addEventListener('submit', login, true);
+};

frontend/templates/auth/register/index.js

@@ -3,9 +3,11 @@ import ROUTES from '../../api/v1/routes';
 import isBlankString from '../../utils/genJsonPayload';
 import genJsonPayload from '../../utils/genJsonPayload';
 
-import {checkUsernameExists} from './userExists';
+import userExists from './userExists';
 import {checkEmailExists} from './emailExists';
 
+import '../forms.scss';
+
 const registerUser = async e => {
   e.preventDefault();
 
@@ -46,10 +48,12 @@ const registerUser = async e => {
   }
 };
 
-let form = document.getElementById('form');
-form.addEventListener('submit', registerUser, true);
+const index = () => {
+  let form = document.getElementById('form');
+  form.addEventListener('submit', registerUser, true);
 
-let username = document.getElementById('username');
-username.addEventListener('input', checkUsernameEventHandler, false);
+  let username = document.getElementById('username');
+  username.addEventListener('input', userExists, false);
+}
 
-export default registerUser;
+export default index;

frontend/templates/auth/register/userExists.js

@@ -3,12 +3,8 @@ import ROUTES from '../../api/v1/routes';
 import genJsonPayload from '../../utils/genJsonPayload';
 
 
-const checkUsernameEventHandler = _e => {
-  checkUsernameExists();
-};
-
 //export const checkUsernameExists = async () => {
-async function checkUsernameExists()  {
+async function userExists()  {
   let username = document.getElementById('username');
   let val = username.value;
   let payload = {
@@ -45,4 +41,4 @@ async function checkUsernameExists()  {
   return false;
 };
 
-export {checkUsernameExists, checkUsernameEventHandler};
+export default userExists;