Merge pull request #134 from iceljc/features/refine-chat-window

refine user login

Author: Oceania2018

src/lib/services/auth-service.js

@@ -5,9 +5,10 @@ import axios from 'axios';
 /**
  * @param {string} email
  * @param {string} password
- * @param {function} onSucceed()
+ * @param {function} onSucceed
+ * @param {function} onError
  */
-export async function getToken(email, password, onSucceed) {
+export async function getToken(email, password, onSucceed, onError) {
     const credentials = btoa(`${email}:${password}`);
     const headers = {
         Authorization: `Basic ${credentials}`,
@@ -20,8 +21,9 @@ export async function getToken(email, password, onSucceed) {
         if (response.ok) {
             return response.json();
         } else {
-            alert(response.statusText);
-            return false
+            console.log(response.statusText);
+            onError();
+            return false;
         }
     }).then(result => {
         if (!result) {
@@ -33,7 +35,9 @@ export async function getToken(email, password, onSucceed) {
         userStore.set(user);
         onSucceed();
     })
-    .catch(error => alert(error.message));
+    .catch(() => {
+        onError();
+    });
 }
 
 /**

src/routes/(authentication)/login/+page.svelte

@@ -45,6 +45,7 @@
 	let status = '';
 	let isSubmitting = false;
 	let isRememberMe = false;
+
 	onMount(() => {
 		const userName = localStorage.getItem('user_name');
 		isRememberMe = userName !== null;
@@ -69,19 +70,31 @@
 			msg = 'Authentication success';
 			status = 'success';
 			const redirectUrl = $page.url.searchParams.get('redirect');
+			isSubmitting = false;
+			resetStorage();
 			if (redirectUrl) {
 				window.location.href = decodeURIComponent(redirectUrl);
 			} else {
 				goto('page/dashboard');
 			}
+		}, () => {
 			isSubmitting = false;
-			resetStorage();
+			isOpen = true;
+			status = 'danger';
+			msg = 'Incorrect user name or password.'
+			setTimeout(() => {
+				isOpen = false;
+				status = '';
+				msg = '';
+			}, 3000);
 		});
 		isSubmitting = false;
 	}
 
 	function onPasswordToggle() {
 		var x = document.getElementById('user-password');
+		if (!x) return;
+
 		if (x.type === 'password') {
 			x.type = 'text';
 			var icon = document.getElementById('password-eye-icon');
@@ -147,6 +160,7 @@
 										class="form-control"
 										id="username"
 										placeholder="Enter username"
+										disabled={isSubmitting}
 										bind:value={username}
 									/>
 								</div>
@@ -159,6 +173,7 @@
 											class="form-control"
 											id="user-password"
 											placeholder="Enter password"
+											disabled={isSubmitting}
 											aria-label="Password"
 											aria-describedby="password-addon"
 											bind:value={password}
@@ -167,6 +182,7 @@
 											color="light"
 											type="button"
 											id="password-addon"
+											disabled={isSubmitting}
 											on:click={() => onPasswordToggle()}
 										>
 											<i id="password-eye-icon" class="mdi mdi-eye-outline" />
@@ -179,6 +195,7 @@
 										class="form-check-input"
 										type="checkbox"
 										id="remember-check"
+										disabled={isSubmitting}
 										bind:checked={isRememberMe}
 									/>
 									<Label class="form-check-label" for="remember-check">Remember me</Label>
@@ -200,26 +217,38 @@
 
 									<ul class="list-inline">
 										<li class="list-inline-item">
-											<a href="{PUBLIC_SERVICE_URL}/sso/GitHub?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me" class="social-list-item bg-primary text-white border-primary">
+											<Link
+												class="social-list-item bg-primary text-white border-primary"
+												href="{PUBLIC_SERVICE_URL}/sso/GitHub?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me"
+												disabled={isSubmitting}
+											>
 												<i class="mdi mdi-github" />
-											</a>
+											</Link>
 										</li>		
 										<li class="list-inline-item">
-											<a href="{PUBLIC_SERVICE_URL}/sso/Keycloak?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me" class="social-list-item bg-primary text-white border-primary">
+											<Link
+												class="social-list-item bg-primary text-white border-primary"
+												href="{PUBLIC_SERVICE_URL}/sso/Keycloak?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me"
+												disabled={isSubmitting}
+											>
 												<i class="mdi mdi-cloud" />
-											</a>
+											</Link>
 										</li>									
 										<li class="list-inline-item">
-											<a href="{PUBLIC_SERVICE_URL}/sso/Google?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me" class="social-list-item bg-danger text-white border-danger">
+											<Link
+												class="social-list-item bg-danger text-white border-danger"
+												href="{PUBLIC_SERVICE_URL}/sso/Google?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me"
+												disabled={isSubmitting}
+											>
 												<i class="mdi mdi-google" />
-											</a>
+											</Link>
 										</li>
 									</ul>
 								</div>
 								{/if}
 								{#if PUBLIC_AUTH_ENABLE_FIND_PWD == 'true' }
 								<div class="mt-4 text-center">
-									<Link href="recoverpw" class="text-muted">
+									<Link href="recoverpw" class="text-muted" disabled={isSubmitting}>
 										<i class="mdi mdi-lock me-1" /> Forgot your password?
 									</Link>
 								</div>
@@ -231,7 +260,7 @@
 				<div class="mt-5 text-center">
 					<p hidden={!(PUBLIC_ALLOW_SIGNUP === 'true')}>
 						Don&apos;t have an account ?
-						<Link href="register" class="fw-medium text-primary">Signup now</Link>
+						<Link href="register" class="fw-medium text-primary" disabled={isSubmitting}>Signup now</Link>
 					</p>
 					<p>
 						© {new Date().getFullYear()}