+ 
" class="form__logo" alt="" />
+
+<. include!("../../components/footers.html"); .>
diff --git a/templates/auth/login/index.js b/templates/auth/login/index.js
new file mode 100644
index 00000000..5d5b557e
--- /dev/null
+++ b/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);
+};
diff --git a/templates/auth/register/emailExists.js b/templates/auth/register/emailExists.js
new file mode 100644
index 00000000..f1b079c2
--- /dev/null
+++ b/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};
diff --git a/templates/auth/register/index.html b/templates/auth/register/index.html
new file mode 100644
index 00000000..142597d8
--- /dev/null
+++ b/templates/auth/register/index.html
@@ -0,0 +1,65 @@
+<. include!("../../components/headers.html"); .>
+Sign in to mCaptcha
+ + +
+
+
+
+ " class="form__logo" alt="" />
+
+<. include!("../../components/footers.html"); .>
diff --git a/templates/auth/register/index.js b/templates/auth/register/index.js
new file mode 100644
index 00000000..8358dbb7
--- /dev/null
+++ b/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);
+}
diff --git a/templates/auth/register/userExists.js b/templates/auth/register/userExists.js
new file mode 100644
index 00000000..ba2277dd
--- /dev/null
+++ b/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;
diff --git a/templates/components/footers.html b/templates/components/footers.html
new file mode 100644
index 00000000..4ca2a61d
--- /dev/null
+++ b/templates/components/footers.html
@@ -0,0 +1,4 @@
+Join mCaptcha
+ + +
+
+
+