frontend integration

templates/auth/register/emailExists.js

@@ -0,0 +1,43 @@
+import ROUTES from '../../api/v1/routes';
+
+import genJsonPayload from '../../utils/genJsonPayload';
+
+const checkEmailExists = async () => {
+  let email = document.getElementById('email');
+  let val = email.value;
+  let payload = {
+    val,
+  };
+
+  //  return fetch(ROUTES.emailExists, genJsonPayload(payload)).then(res => {
+  //    if (res.ok) {
+  //      res.json().then(data => {
+  //        if (data.exists) {
+  //          console.log(email.className);
+  //          email.className += ' form__in-field--warn';
+  //          alert('Email taken');
+  //        }
+  //
+  //        return data.exists;
+  //      });
+  //    } else {
+  //      res.json().then(err => alert(`error: ${err.error}`));
+  //    }
+  //  });
+  //
+
+  let res = await fetch(ROUTES.emailExists, genJsonPayload(payload));
+  if (res.ok) {
+    let data = await res.json();
+    if (data.exists) {
+      email.className += ' form__in-field--warn';
+      alert('Email taken');
+    }
+    return data.exists;
+  } else {
+    let err = await res.json();
+    alert(`error: ${err.error}`);
+  }
+};
+
+export {checkEmailExists};

templates/auth/register/index.html

@@ -0,0 +1,65 @@
+<. 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">Join 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"
+        id="username"
+        required
+      />
+    </label>
+
+    <label class="form__in-group" for="username"
+      >Email
+      <input
+        class="form__in-field"
+        id="email"
+        type="email"
+        name="email"
+        id="email"
+        required
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password"
+        name="password"
+        id="password"
+        required
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Re-enter Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password-check"
+        name="password-check"
+        id="password-check"
+        required
+      />
+    </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="/" class="form__secondary-action__link">Create account</a>
+    </p>
+  </div>
+</div>
+<. include!("../../components/footers.html"); .>

templates/auth/register/index.js

@@ -0,0 +1,57 @@
+import ROUTES from '../../api/v1/routes';
+
+import isBlankString from '../../utils/genJsonPayload';
+import genJsonPayload from '../../utils/genJsonPayload';
+
+import userExists from './userExists';
+import {checkEmailExists} from './emailExists';
+
+import '../forms.scss';
+
+const registerUser = async e => {
+  e.preventDefault();
+
+  let username = document.getElementById('username').value;
+  isBlankString(e, username, 'username');
+
+  let password = document.getElementById('password').value;
+  let passwordCheck = document.getElementById('password-check').value;
+  if (password != passwordCheck) {
+    return alert("passwords don't match, check again!");
+  }
+
+  let email = document.getElementById('email').value;
+  isBlankString(e, email, 'email');
+
+  let exists = await checkUsernameExists();
+  if (exists) {
+    return;
+  }
+
+  exists = await checkEmailExists();
+  if (exists) {
+    return;
+  }
+
+  let payload = {
+    username,
+    password,
+    email,
+  };
+
+  let res = await fetch(ROUTES.registerUser, genJsonPayload(payload));
+  if (res.ok) {
+    alert('success');
+  } else {
+    let err = await res.json();
+    alert(`error: ${err.error}`);
+  }
+};
+
+export const index = () => {
+  let form = document.getElementById('form');
+  form.addEventListener('submit', registerUser, true);
+
+  let username = document.getElementById('username');
+  username.addEventListener('input', userExists, false);
+}

templates/auth/register/userExists.js

@@ -0,0 +1,44 @@
+import ROUTES from '../../api/v1/routes';
+
+import genJsonPayload from '../../utils/genJsonPayload';
+
+
+//export const checkUsernameExists = async () => {
+async function userExists()  {
+  let username = document.getElementById('username');
+  let val = username.value;
+  let payload = {
+    val,
+  };
+
+  //  return fetch(ROUTES.usernameExists, genJsonPayload(payload)).then(res => {
+  //    if (res.ok) {
+  //      res.json().then(data => {
+  //        if (data.exists) {
+  //          username.className += ' form__in-field--warn';
+  //          alert('Username taken');
+  //        }
+  //        return data.exists;
+  //      });
+  //    } else {
+  //      res.json().then(err => alert(`error: ${err.error}`));
+  //    }
+  //  });
+  //
+
+  let res = await fetch(ROUTES.usernameExists, genJsonPayload(payload));
+  if (res.ok) {
+    let data = await res.json();
+    if (data.exists) {
+      username.className += ' form__in-field--warn';
+      alert('Username taken');
+    }
+    return data.exists;
+  } else {
+    let err = await res.json();
+    alert(`error: ${err.error}`);
+  }
+  return false;
+};
+
+export default userExists;