error handling in auth

src/main.rs

@@ -104,6 +104,9 @@ async fn main() -> std::io::Result<()> {
 
     let data = Data::new().await;
     sqlx::migrate!("./migrations/").run(&data.db).await.unwrap();
+
+    println!("Starting server on: http://{}", SETTINGS.server.get_ip());
+
     HttpServer::new(move || {
         App::new()
             .wrap(actix_middleware::Logger::default())

src/pages/auth/login.rs

@@ -29,7 +29,8 @@ const PAGE: &str = "Login";
 
 impl Default for IndexPage {
     fn default() -> Self {
-        IndexPage     }
+        IndexPage
+    }
 }
 
 lazy_static! {

templates/auth/login/ts/index.ts

@@ -21,6 +21,7 @@ import isBlankString from '../../../utils/isBlankString';
 import genJsonPayload from '../../../utils/genJsonPayload';
 import getFormUrl from '../../../utils/getFormUrl';
 import registerShowPassword from '../../../components/showPassword';
+import createError from '../../../components/error/index';
 
 //import '../forms.scss';
 
@@ -52,11 +53,10 @@ const login = async (e: Event) => {
 
   const res = await fetch(formUrl, genJsonPayload(payload));
   if (res.ok) {
-    alert('success');
     window.location.assign(VIEWS.panelHome);
   } else {
     const err = await res.json();
-    alert(`error: ${err.error}`);
+    createError(err.error);
   }
 };
 

templates/auth/register/ts/emailExists.test.ts

@@ -21,6 +21,8 @@ import emailExists from './emailExists';
 
 import {mockAlert, getRegistrationFormHtml} from '../../../setUpTests';
 
+import setup from '../../../components/error/setUpTests';
+
 fetchMock.enableMocks();
 mockAlert();
 
@@ -32,6 +34,8 @@ it('finds exchange', async () => {
   fetchMock.mockResponseOnce(JSON.stringify({exists: true}));
 
   document.body.innerHTML = getRegistrationFormHtml();
+  document.querySelector('body').appendChild(setup());
+
   const emailField = <HTMLInputElement>document.getElementById('email');
   emailField.setAttribute('value', 'test@a.com');
 

templates/auth/register/ts/emailExists.ts

@@ -18,6 +18,7 @@
 import ROUTES from '../../../api/v1/routes';
 
 import genJsonPayload from '../../../utils/genJsonPayload';
+import createError from '../../../components/error/index';
 
 const emailExists = async () => {
   const email = <HTMLInputElement>document.getElementById('email');
@@ -31,13 +32,13 @@ const emailExists = async () => {
     const data = await res.json();
     if (data.exists) {
       email.className += ' form__in-field--warn';
-      alert('Email taken');
+      createError(`Email "${val}" is already used`);
       return data.exists;
     }
     return data.exists;
   } else {
     const err = await res.json();
-    alert(`error: ${err.error}`);
+    createError(err.error);
   }
 };
 

templates/auth/register/ts/index.ts

@@ -24,6 +24,7 @@ import userExists from './userExists';
 import emailExists from './emailExists';
 import getFormUrl from '../../../utils/getFormUrl';
 import registerShowPassword from '../../../components/showPassword';
+import createError from '../../../components/error/index';
 
 //import '../forms.scss';
 
@@ -72,11 +73,10 @@ const registerUser = async (e: Event) => {
 
   const res = await fetch(formUrl, genJsonPayload(payload));
   if (res.ok) {
-    alert('success');
     window.location.assign(VIEWS.loginUser);
   } else {
     const err = await res.json();
-    alert(`error: ${err.error}`);
+    createError(err.error);
   }
 };
 

templates/auth/register/ts/userExists.test.ts

@@ -21,6 +21,8 @@ import userExists from './userExists';
 
 import {mockAlert, getLoginFormHtml} from '../../../setUpTests';
 
+import setup from '../../../components/error/setUpTests';
+
 fetchMock.enableMocks();
 mockAlert();
 
@@ -32,6 +34,7 @@ it('finds exchange', async () => {
   fetchMock.mockResponseOnce(JSON.stringify({exists: true}));
 
   document.body.innerHTML = getLoginFormHtml();
+  document.querySelector('body').appendChild(setup());
   const usernameField = <HTMLInputElement>document.querySelector('#username');
   usernameField.value = 'test';
   expect(await userExists()).toBe(true);

templates/auth/register/ts/userExists.ts

@@ -18,6 +18,7 @@
 import ROUTES from '../../../api/v1/routes';
 
 import genJsonPayload from '../../../utils/genJsonPayload';
+import createError from '../../../components/error/index';
 
 const userExists = async () => {
   const username = <HTMLInputElement>document.getElementById('username');
@@ -31,12 +32,12 @@ const userExists = async () => {
     const data = await res.json();
     if (data.exists) {
       username.className += ' form__in-field--warn';
-      alert('Username taken');
+      createError(`Username "${val}" taken`);
     }
     return data.exists;
   } else {
     const err = await res.json();
-    alert(`error: ${err.error}`);
+    createError(err.error);
   }
   return false;
 };

templates/components/error/error.test.ts

@@ -18,16 +18,12 @@
 import createError from './index';
 import * as e from './index';
 
+import setup from './setUpTests';
+
 'use strict';
 
 jest.useFakeTimers();
 
-const setup = () => {
-  let x = document.createElement('div');
-  x.id = e.ERR_CONTAINER_ID;
-  return x;
-};
-
 it('checks if error boxes work', () => {
   document.body.append(setup());
 

templates/components/error/index.html

@@ -0,0 +1 @@
+<div id="err__container"></div>

templates/components/error/setUpTests.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 * as e from './index';
+
+const setup = () => {
+  let x = document.createElement('div');
+  x.id = e.ERR_CONTAINER_ID;
+  return x;
+};
+
+export default setup;

templates/components/footers.html

@@ -15,5 +15,6 @@
     href="<.= &*crate::MOBILE_CSS .>" 
   />
 <script src="<.= &*crate::JS .>"></script>
+<. include!("../components/error/index.html"); .>
 </body>
 </html>