frontend integration

templates/auth/login/index.html

@@ -0,0 +1,46 @@
+<. include!("../../components/headers.html"); .>
+<div class="form-container">
+    <img src="<.= crate::FILES.get("./static/img/icon-trans.png").unwrap().>" 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>
+
+    <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="/join" class="form__secondary-action__link"
+        >Create account</a
+      >
+    </p>
+  </div>
+</div>
+<. include!("../../components/footers.html"); .>

templates/auth/login/index.js

@@ -0,0 +1,31 @@
+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;
+  isBlankString(e, username, 'username');
+
+  let password = document.getElementById('password').value;
+  let payload = {
+    username,
+    password,
+  };
+
+  fetch(ROUTES.loginUser, genJsonPayload(payload)).then(res => {
+    if (res.ok) {
+      alert('success');
+    } else {
+      res.json().then(err => alert(`error: ${err.error}`));
+    }
+  });
+};
+
+export const index = () => {
+  let form = document.getElementById('form');
+  form.addEventListener('submit', login, true);
+};