typescript migration

templates/.gitignore

@@ -0,0 +1 @@
+/**/*.js

templates/auth/login/index.ts

@@ -18,17 +18,32 @@
 import ROUTES from '../../api/v1/routes';
 import VIEWS from '../../views/v1/routes';
 
-import isBlankString from '../../utils/genJsonPayload';
+import isBlankString from '../../utils/isBlankString';
 import genJsonPayload from '../../utils/genJsonPayload';
 
 //import '../forms.scss';
 
-const login = e => {
+const login = (e: Event) => {
   e.preventDefault();
-  let username = document.getElementById('username').value;
-  isBlankString(e, username, 'username');
+  InputEvent
+  const usernameElement: HTMLInputElement = <HTMLInputElement>document.getElementById('username');
+  if (usernameElement === null) {
+    console.debug("Username element is null");
+    return;
+  }
+
+  let username = usernameElement.value;
+  isBlankString(e, username, 'username');
+//  isBlankString(e);//, username, 'username');
+
+  const passwordElement: HTMLInputElement = <HTMLInputElement>document.getElementById('password');
+  if (passwordElement === null) {
+    console.debug("Password is null");
+    return;
+  }
+
+  let password = passwordElement.value;
 
-  let password = document.getElementById('password').value;
   let payload = {
     username,
     password,
@@ -45,6 +60,6 @@ const login = e => {
 };
 
 export const index = () => {
-  let form = document.getElementById('form');
+  let form = <HTMLFontElement>document.getElementById('form');
   form.addEventListener('submit', login, true);
 };

templates/auth/register/emailExists.ts

@@ -20,7 +20,7 @@ import ROUTES from '../../api/v1/routes';
 import genJsonPayload from '../../utils/genJsonPayload';
 
 const checkEmailExists = async () => {
-  let email = document.getElementById('email');
+  let email = <HTMLInputElement>document.getElementById('email');
   let val = email.value;
   let payload = {
     val,

templates/auth/register/index.js

@@ -1,78 +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 ROUTES from '../../api/v1/routes';
-import VIEWS from '../../views/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 exists = await userExists();
-  if (exists) {
-    return;
-  }
-
-  let email = document.getElementById('email').value;
-  if (!email.replace(/\s/g, '').length) {
-    email = null;
-  } else {
-    exists = await checkEmailExists();
-    if (exists) {
-      return;
-    }
-  }
-
-  let payload = {
-    username,
-    password,
-    email,
-  };
-
-  let res = await fetch(ROUTES.registerUser, genJsonPayload(payload));
-  if (res.ok) {
-    alert('success');
-    window.location.assign(VIEWS.loginUser);
-  } 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/index.ts

@@ -0,0 +1,84 @@
+/*
+ * 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 ROUTES from '../../api/v1/routes';
+import VIEWS from '../../views/v1/routes';
+
+import isBlankString from '../../utils/isBlankString';
+import genJsonPayload from '../../utils/genJsonPayload';
+
+import userExists from './userExists';
+import {checkEmailExists} from './emailExists';
+
+//import '../forms.scss';
+
+const usernameElement = <HTMLInputElement>document.getElementById('username');
+const emailElement = <HTMLInputElement>document.getElementById('email');
+const passwordElement = <HTMLInputElement>document.getElementById('password');
+
+const registerUser = async (e: Event) => {
+  e.preventDefault();
+
+  let username = usernameElement.value;
+  isBlankString(e, username, 'username');
+  //isBlankString(e);//, username, 'username');
+
+  let password = passwordElement.value;
+  const passwordCheckElement = <HTMLInputElement>(
+    document.getElementById('password-check')
+  );
+  let passwordCheck = passwordCheckElement.value;
+  if (password != passwordCheck) {
+    return alert("passwords don't match, check again!");
+  }
+
+  let exists = await userExists();
+  if (exists) {
+    return;
+  }
+
+  let email: string|null = emailElement.value;
+  if (!email.replace(/\s/g, '').length) {
+    email = null;
+  } else {
+    exists = await checkEmailExists();
+    if (exists) {
+      return;
+    }
+  }
+
+  let payload = {
+    username,
+    password,
+    email,
+  };
+
+  let res = await fetch(ROUTES.registerUser, genJsonPayload(payload));
+  if (res.ok) {
+    alert('success');
+    window.location.assign(VIEWS.loginUser);
+  } else {
+    let err = await res.json();
+    alert(`error: ${err.error}`);
+  }
+};
+
+export const index = () => {
+  let form = <HTMLFontElement>document.getElementById('form');
+  form.addEventListener('submit', registerUser, true);
+  usernameElement.addEventListener('input', userExists, false);
+};

templates/auth/register/userExists.ts

@@ -21,7 +21,7 @@ import genJsonPayload from '../../utils/genJsonPayload';
 
 //export const checkUsernameExists = async () => {
 async function userExists() {
-  let username = document.getElementById('username');
+  let username = <HTMLInputElement>document.getElementById('username');
   let val = username.value;
   let payload = {
     val,

templates/panel/add-site-key/add-level.html

@@ -6,9 +6,11 @@
   <input
     class="sitekey-form__input--add-level"
     type="number"
-    id="level2"
     id="level<.= level .>"
     name="level<.= level .>"
+	<. if level == 1 { .>
+	<.= "required" .>
+	<. } .>
     value=""
   />
   <button class="sitekey-form__add-level-button">Add Level</button>

templates/panel/add-site-key/addLevelButton.ts

@@ -14,21 +14,53 @@
  * 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 VALIDATE_LEVELS from './levels';
+import isBlankString from '../../utils/isBlankString';
 
 const LABEL_CONTAINER_CLASS = 'sitekey-form__add-level-flex-container';
-const ADD_LEVEL_BUTTON = 'sitekey-form__add-level-button';
 const LABEL_CLASS = 'sitekey-form__label';
-const INPUT_ID_WITHOUT_LEVEL = 'level';
-const LABEL_INNER_TEXT_WITHOUT_LEVEL = 'Level ';
+export const LABEL_INNER_TEXT_WITHOUT_LEVEL = 'Level ';
+
+export const INPUT_ID_WITHOUT_LEVEL = 'level';
 const INPUT_CLASS = 'sitekey-form__input--add-level';
+
 const ADD_LEVEL_BUTTON_INNER_TEXT = 'Add Level';
+const ADD_LEVEL_BUTTON = 'sitekey-form__add-level-button';
 
-const addLevelButtonEventHandler = e => {
-  const PREV_LEVEL_CONTAINER = e.target.parentElement;
-  e.target.remove();
-
+export const getNumLevels = () => {
   let numLevels = 0;
   document.querySelectorAll(`.${LABEL_CLASS}`).forEach(_ => numLevels++);
+  return numLevels;
+};
+
+const validateLevel = (numLevels: number) => {
+  numLevels = numLevels - 1;
+  let inputID = INPUT_ID_WITHOUT_LEVEL + numLevels.toString();
+  let filed = LABEL_INNER_TEXT_WITHOUT_LEVEL + numLevels;
+  let inputElement = <HTMLInputElement>document.getElementById(inputID);
+  let val = inputElement.value;
+  let e = null;
+  isBlankString(e, val, filed);
+  let isValid = VALIDATE_LEVELS.add(parseInt(val));
+  return isValid;
+};
+
+const addLevelButtonEventHandler = (e: Event) => {
+  let  eventTarget = <HTMLElement>e.target;
+//  if (!eventTarget) {
+//    return;
+//  }
+  const PREV_LEVEL_CONTAINER = <HTMLElement>eventTarget.parentElement;
+  let numLevels: string|number = getNumLevels();
+  let isValid = validateLevel(numLevels);
+  console.log(`[addLevelButton] isValid: ${isValid}`);
+
+  if (!isValid) {
+    return console.log('Aborting level addition');
+  }
+
+  eventTarget.remove();
+
   numLevels = numLevels.toString();
 
   let labelContainer = document.createElement('div');
@@ -63,12 +95,11 @@ const addLevelButtonEventHandler = e => {
 
   labelContainer.insertAdjacentElement('afterend', inputContainer);
 
-
   addLevelButtonAddEventListener();
 };
 
 export const addLevelButtonAddEventListener = () => {
-  let addLevelButton = document.querySelector(`.${ADD_LEVEL_BUTTON}`);
+  let addLevelButton = <HTMLElement>document.querySelector(`.${ADD_LEVEL_BUTTON}`);
   addLevelButton.addEventListener('click', addLevelButtonEventHandler);
 };
 

templates/panel/add-site-key/form.html

@@ -10,6 +10,7 @@
     type="text"
     name="description"
     id="description"
+	required
     value="<.= form_description .>"
   />
 

templates/panel/add-site-key/form.ts

@@ -0,0 +1,57 @@
+/*
+ * 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/>.
+ */
+
+const SITE_KEY_FORM_CLASS = 'sitekey-form';
+const FORM = <HTMLFormElement>document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
+
+import * as addLevelButton from './addLevelButton';
+import isBlankString from '../../utils/isBlankString';
+
+export const addSubmitEventListener = () => {
+  FORM.addEventListener('submit', submit, true);
+};
+
+const validateLevels = (e: Event) => {
+  let numLevels = addLevelButton.getNumLevels();
+  // check if levels are unique and are in increasing order;
+  // also if they are positive
+  // also if level input field is accompanied by a "Add Level" button,
+  // it shouldn't be used for validation
+  for (let levelNum = 1; levelNum < numLevels; levelNum++) {
+    let inputID = addLevelButton.INPUT_ID_WITHOUT_LEVEL + levelNum;
+    let inputElement = <HTMLInputElement>document.getElementById(inputID);
+    let val = inputElement.value;
+    let filed = addLevelButton.LABEL_INNER_TEXT_WITHOUT_LEVEL + levelNum;
+    isBlankString(e, val, filed);
+  }
+}
+
+const validateDescription = (e: Event) => {
+    let inputElement = <HTMLInputElement>document.getElementById("description");
+    let val = inputElement.value;
+    let filed = "Description";
+    isBlankString(e, val, filed);
+}
+
+const submit = async (e: Event) => {
+  validateDescription(e);
+  validateLevels(e);
+  // get values
+  // check validate levels
+  // submit
+  // handle erros
+};

templates/panel/add-site-key/levels.ts

@@ -0,0 +1,61 @@
+/*
+ * 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/>.
+ */
+
+const VALIDATE_LEVELS = (function() {
+  const levels: Array<number> = [];
+
+  const checkAscendingOrder = (newLevel: number) => {
+    if (levels.length == 0) {
+      return true;
+    }
+
+    let isValid = true;
+    levels.find(level => {
+      if (level > newLevel) {
+        alert(
+          `Level: ${newLevel} has to greater than previous levels ${level}`,
+        );
+        isValid = false;
+        return true;
+      }
+      return false;
+    });
+
+    return isValid;
+  };
+  return {
+    add: function(newLevel: number) {
+      console.log(`[levels.js]levels: ${levels} newLevel: ${newLevel}`);
+      if (levels.find(level => level == newLevel)) {
+        alert(`Level: ${newLevel} has to be unique`);
+        return false;
+      }
+
+      let isValid = checkAscendingOrder(newLevel);
+      if (isValid) {
+        levels.push(newLevel);
+        return true;
+      }
+
+      console.log(
+        `Ascending arder failure. Levels: ${levels}, levels length: ${levels.length}`,
+      );
+      return false;
+    },
+  }; })();
+
+export default VALIDATE_LEVELS;

templates/panel/index.ts

@@ -82,5 +82,5 @@ export const index = () => {
   //    }
   //  });
   //
-  let a;
+//  let a;
 };

templates/panel/output/index.html

@@ -1,53 +0,0 @@
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Login|mCaptcha</title>
-  </head>
-  <body>
-<div class="form-container">
-    <img src="./prod/img/icon-trans.7920418313D84DCDB2491E02E52E4BEF374970C216E85BD721274EE51241ECD4.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>
-
-    <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>
-</body>
-</html>

templates/panel/output/register/index.html

@@ -1,72 +0,0 @@
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Join|mCaptcha</title>
-  </head>
-  <body>
-<div class="form-container">
-    <img src="./prod/img/icon-trans.7920418313D84DCDB2491E02E52E4BEF374970C216E85BD721274EE51241ECD4.png" 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>
-</body>
-</html>

templates/panel/site-keys/index.js

@@ -1,21 +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/>.
-*/
-
-
-
-export const index = () => {
-};

templates/panel/site-keys/index.ts

@@ -15,17 +15,4 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-const SITE_KEY_FORM_CLASS = 'sitekey-form';
-const FORM = document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
-
-export const addSubmitEventListener = () => {
-  FORM.addEventListener('submit', submit, true);
-};
-
-const submit = async () => {
-  alert('submited');
-  // get values
-  // check validate levels
-  // submit
-  // handle erros
-}
+export const index = () => {};

templates/router.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-const normalizeUri = uri => {
+const normalizeUri = (uri: string) => {
   if (!uri) {
     throw new Error('uri is empty');
   }
@@ -31,20 +31,23 @@ const normalizeUri = uri => {
   return uri;
 };
 
+type routeTuple = {
+  uri: string;
+  fn: () => void;
+};
+
 export class Router {
+  routes: Array<routeTuple>;
   constructor() {
     this.routes = [];
   }
 
-  register(uri, fn) {
+  register(uri: string, fn: () => void) {
     // typechecks
     if (!uri) {
       throw new Error('uri is empty');
     }
 
-    if (!fn) {
-      throw new Error('fn is empty');
-    }
     if (typeof uri !== 'string') {
       throw new TypeError('URI must be a string');
     }
@@ -63,7 +66,7 @@ export class Router {
 
     uri = normalizeUri(uri);
 
-    const route = {
+    const route: routeTuple = {
       uri,
       fn,
     };
@@ -77,7 +80,8 @@ export class Router {
       let path = window.location.pathname;
       path = normalizeUri(path);
       if (path.match(pattern)) {
-        return route.fn.call();
+        //return route.fn.call();
+        return route.fn();
       }
     });
   }

templates/utils/genJsonPayload.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-const genJsonPayload = payload => {
+const genJsonPayload = (payload: any) => {
   let value = {
     method: 'POST',
     headers: {

templates/utils/isBlankString.ts

@@ -15,9 +15,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-const isBlankString = (event, value, field) => {
+const isBlankString = (event: Event|null, value: string|number, field: string) => {
+  value = value.toString();
   if (!value.replace(/\s/g, '').length) {
-    event.preventDefault();
+    if (event) {
+      event.preventDefault();
+    }
     alert(`${field} can't be empty`);
   }
 };