Merge pull request #54 from chidimo/ch-improve-user-experience-166397037

Improve user experience
chidimo · Jun 2, 2019 · 66fde3c · 66fde3c
2 parents bcfc0a5 + 26e7d00
commit 66fde3c
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 20 deletions.
diff --git a/UI/authentication.html b/UI/authentication.html
@@ -25,6 +25,10 @@
                 </header>
 
                 <section class="authentication_section">
+
+                    <div id="loading_modal" class="modal">
+                        <div class="loader"></div>
+                    </div>
 
                     <div id="reg_form_toggle" class="container">
                         <div id="activate_signin" class="authentication_div selected">
@@ -41,6 +45,9 @@ <h4>Sign Up</h4>
                         <div id="signin_form" class="">
                             <h1 class="authentication_title">Sign in to your account</h1>
                             <hr>
+
+                            <div id="sign_in_err"></div>
+
                             <form method="POST" class="authentication sign_up" action="http://localhost:3000/auth/signin">
                                 <label for="email"><b>Email</b></label>
                                 <input id="signin_email" type="email" placeholder="Enter email" name="email" required>
@@ -60,6 +67,9 @@ <h1 class="authentication_title">Sign in to your account</h1>
                             <h1 class="authentication_title">Create your account</h1>
                             <p class="form_message">Please fill the form to create an account.</p>
                             <hr>
+
+                            <div id="sign_up_err"></div>
+
                             <form class="authentication sign_up" action="">
                                 <label for="email"><b>Email</b></label>
                                 <input id="signup_email" type="email" placeholder="Enter email" name="email" required>

diff --git a/UI/css/style.css b/UI/css/style.css
@@ -302,6 +302,30 @@ ul.base_ul {
 	opacity:1;
 }
 
+.loader {
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    margin: auto;
+    border-top: 16px solid #3498db;
+    width: 120px;
+    height: 120px;
+    -webkit-animation: spin 5s linear infinite; /* Safari */
+    animation: spin 2s linear infinite;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* END Globals */
+
 /* Showcase */
 
 #showcase {
@@ -493,6 +517,11 @@ footer {
 
 /* authentication */
 
+p.error-from-api{
+    text-align: center;
+    color: #FF0000;
+}
+
 .authentication_div {
     text-align: center;
     cursor: pointer;
@@ -652,7 +681,7 @@ hr.section_divider {
     height: 100%;
     overflow: auto;
     opacity: 0.97;
-    padding-top: 50px;
+    padding-top: 30vh;
     background-color: #474e5d;
 }
 

diff --git a/UI/js/authentication.js b/UI/js/authentication.js
@@ -4,6 +4,7 @@ import { BASE_URL, common_headers, token_name } from './common/constants.js';
 
 const signin_form = document.getElementById('signin_form');
 const signup_form = document.getElementById('signup_form');
+const loading_modal = document.getElementById('loading_modal');
 
 const activate_signup = document.getElementById('activate_signup');
 const activate_signin = document.getElementById('activate_signin');
@@ -37,6 +38,7 @@ const save_user = async (endpoint, body) => {
             'Content-Type': 'application/json',
         },
     };
+    loading_modal.style.display = 'block';
     try {
         const { data, status
         } = await axios.post(endpoint, body, config);
@@ -45,35 +47,53 @@ const save_user = async (endpoint, body) => {
             localStorage[token_name()] = user.token;
             localStorage.user = JSON.stringify(user);
         }
+        return { user };
     }
     catch (e) {
         const { response } = e;
-        const { data, status, statusText } = response;
-        console.log(`
-            ${JSON.stringify(data)}, \n ${status}, \n ${statusText}`);
+        const { data, status } = response;
+        if (status === 422) return data.errors[0].msg;
+        return data.error; // status 404 and 409
     }
 };
 
 signin_form.addEventListener('submit', async e => {
     e.preventDefault();
     const email = document.getElementById('signin_email').value;
     const password = document.getElementById('signin_password').value;
+    const sign_in_err = document.getElementById('sign_in_err');
+
     const body = JSON.stringify({ email, password });
-    await save_user(`${BASE_URL}/auth/signin`, body);
-    const { id } = JSON.parse(localStorage.user);
-    await get_user_loans(id);
-    window.location = './dashboard.html';
+    const data = await save_user(`${BASE_URL}/auth/signin`, body);
+    loading_modal.style.display = 'none';
+
+    if (data.user) {
+        const { id } = JSON.parse(localStorage.user);
+        await get_user_loans(id);
+        window.location = './dashboard.html';
+        return;
+    }
+    sign_in_err.innerHTML = `<p class='error-from-api'>${data}</p>`;
 });
 
 signup_form.addEventListener('submit', async e => {
     e.preventDefault();
     const email = document.getElementById('signup_email').value;
     const password = document.getElementById('signup_password').value;
     const confirm_password = document.getElementById('confirm_password').value;
+    const sign_up_err = document.getElementById('sign_up_err');
 
     const body = JSON.stringify({ email, password, confirm_password });
-    await save_user(`${BASE_URL}/auth/signup`, body);
-    window.location = './profile.edit.html';
+    const data = await save_user(`${BASE_URL}/auth/signup`, body);
+    loading_modal.style.display = 'none';
+
+    if (data.user) {
+        const { id } = JSON.parse(localStorage.user);
+        await get_user_loans(id);
+        window.location = './profile.edit.html';
+        return;
+    }
+    sign_up_err.innerHTML = `<p class='error-from-api'>${data}</p>`;
 });
 
 const get_user_loans = async id => {

diff --git a/UI/js/profile_edit.js b/UI/js/profile_edit.js
@@ -1,4 +1,4 @@
-import { BASE_URL, token_name } from './common/constants.js';
+import { BASE_URL, common_headers } from './common/constants.js';
 
 /* eslint-disable no-undef */
 const logout = document.getElementById('logout');
@@ -16,6 +16,8 @@ const lname = document.querySelector('input[name="last_name"]');
 const ph = document.querySelector('input[name="phone_number"]');
 const hm = document.querySelector('textarea[name="home_address"]');
 const off = document.querySelector('textarea[name="office_address"]');
+const profile_err = document.getElementById('profile_err');
+const loading_modal = document.getElementById('loading_modal');
 
 fname.value = firstname;
 lname.value = lastname;
@@ -33,29 +35,30 @@ logout.addEventListener('click', e => {
 
 const endpoint = `${BASE_URL}/users/${id}/update`;
 
-const update_profile = async (endpoint, body, redirect_to) => {
+const update_profile = async (endpoint, body) => {
     const config = {
         headers: {
+            ...common_headers,
             'Content-Type': 'application/json',
-            'Access-Control-Allow-Origin': '*',
-            'Access-Control-Allow-Methods': 'PATCH',
-            'x-access-token': localStorage[token_name()],
         },
     };
+    loading_modal.style.display = 'block';
     try {
         const {
             data, status
         } = await axios.patch(endpoint, body, config);
         const user = data.data;
         if (status === 200) {
             localStorage.user = JSON.stringify(user);
-            window.location = redirect_to;
         }
+        return { user };
     }
     catch (e) {
         const { response } = e;
         const { data, status } = response;
-        console.log(`${JSON.stringify(data)}, \n ${status}`);
+        // console.log(`${JSON.stringify(data)}, \n ${status}`);
+        if (status === 422) return data.errors[0].msg;
+        return data.error;
     }
 };
 
@@ -68,5 +71,12 @@ profile_edit_form.addEventListener('submit', async e => {
     const office = off.value;
 
     const body = JSON.stringify({ firstname, lastname, phone, home, office });
-    update_profile(endpoint, body, './dashboard.html');
+    const data = await update_profile(endpoint, body);
+    loading_modal.style.display = 'none';
+
+    if (data.user) {
+        window.location = './dashboard.html';
+        return;
+    }
+    profile_err.innerHTML = `<p class='error-from-api'>${data}</p>`;
 });
diff --git a/UI/password-reset.html b/UI/password-reset.html
@@ -33,9 +33,12 @@
                         <div id="reset_password_form" class="">
                             <h1 class="authentication_title">Reset your password</h1>
                             <hr>
-                            <p>If you don't remember your password, click submit and your password will be emailed to you.</p>
+                            <p>If you don't remember your password, enter your email and click submit to have your password emailed to you.</p>
                             <hr>
-                            <form class="authentication reset_password" >
+                            <form class="authentication reset_password">
+                                <label for="email"><b>Email</b></label>
+                                <input id="signin_email" type="email" placeholder="Enter email" name="email" required>
+
                                 <label for="password"><b>Old password</b></label>
                                 <input id="current_password" type="password" placeholder="Enter password" name="current_password">
 

diff --git a/UI/profile.edit.html b/UI/profile.edit.html
@@ -70,12 +70,17 @@
                         </nav>
                     </div>
                 </header>
+
+                <div id="loading_modal" class="modal">
+                    <div class="loader"></div>
+                </div>
 
                 <section class="profile_edit">
                     <div class="container form_wrapper">
                         <form id="profile_edit_form" action="" method="POST">
                             <h1>Edit your profile</h1>
                             <hr>
+                            <div id="profile_err"></div>
                             <label for="first_name"><b>First Name</b></label>
                             <input type="text" placeholder="First Name" name="first_name" required>