Merge pull request #15 from visagang/main

Add profile page and enhance existing UX
SciSharp · Jan 23, 2024 · 2d24627 · 2d24627
2 parents b67dc9a + 04f5929
commit 2d24627
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 6 deletions.
diff --git a/src/lib/common/ProfileDropdown.svelte b/src/lib/common/ProfileDropdown.svelte
@@ -27,7 +27,7 @@
 	</DropdownToggle>
 	<DropdownMenu end>
 		<!-- item-->
-		<DropdownItem href="#"
+		<DropdownItem href="/page/myProfile"
 			><i class="bx bx-user font-size-16 align-middle me-1" />
 			<span>Profile</span>
 		</DropdownItem>

diff --git a/src/routes/(authentication)/login/+page.svelte b/src/routes/(authentication)/login/+page.svelte
@@ -15,6 +15,7 @@
 	import Headtitle from '$lib/common/HeadTitle.svelte';
 	import { getToken } from '$lib/services/auth-service.js';
 	import { goto } from '$app/navigation';
+	import Loader from '$lib/common/Loader.svelte';
 	import {
 		PUBLIC_LOGO_URL,
 		PUBLIC_LOGIN_IMAGE,
@@ -60,6 +61,9 @@
 <div class="account-pages my-5 pt-sm-5">
 	<Container>
 		<Row class="justify-content-center">
+			{#if isSubmitting}
+				<Loader />
+			{/if}
 			<Col md={8} lg={6} xl={5}>
 				<Card class="overflow-hidden">
 					<div class="bg-primary-subtle">
@@ -118,7 +122,11 @@
 											aria-describedby="password-addon"
 											bind:value={password}
 										/>
-										<Button color="light" type="button" id="password-addon" on:click={() => onPasswordToggle()}
+										<Button
+											color="light"
+											type="button"
+											id="password-addon"
+											on:click={() => onPasswordToggle()}
 											><i id="password-eye-icon" class="mdi mdi-eye-outline" /></Button
 										>
 									</div>
@@ -130,8 +138,11 @@
 								</div>
 
 								<div class="mt-3 d-grid">
-									<Button color="primary" disabled={isSubmitting} class="waves-effect waves-light" type="submit"
-										>{!isSubmitting ? 'Log In' : 'Logging In'}</Button
+									<Button
+										color="primary"
+										disabled={isSubmitting}
+										class="waves-effect waves-light"
+										type="submit">{!isSubmitting ? 'Log In' : 'Log In...'}</Button
 									>
 								</div>
 

diff --git a/src/routes/page/dashboard/+page.svelte b/src/routes/page/dashboard/+page.svelte
@@ -25,7 +25,7 @@
 		PUBLIC_BRAND_NAME
 	} from '$env/static/public';
 	import { onMount } from 'svelte';
-	import { getUserStore } from '$lib/helpers/store';
+	import { getUserStore, userStore } from '$lib/helpers/store';
 	
 	let subscribemodal = false;
 	let user = {full_name: ""};
@@ -34,6 +34,9 @@
 	})
 
 	onMount(() => {
+		const userModelSubscribe = userStore.subscribe((/** @type {{ full_name: string; }} */ value) => {
+			user = value;
+		})
 		user = getUserStore();
 		setTimeout(() => {
 			subscribemodal = true;
@@ -83,7 +86,7 @@
 								</Col>
 							</Row>
 							<div class="mt-4">
-								<Link class="btn btn-primary waves-effect waves-light btn-sm">
+								<Link href="/page/myProfile" class="btn btn-primary waves-effect waves-light btn-sm">
 									View Profile <i class="mdi mdi-arrow-right ms-1" />
 								</Link>
 							</div>

diff --git a/src/routes/page/myProfile/+page.svelte b/src/routes/page/myProfile/+page.svelte
@@ -0,0 +1,87 @@
+<script>
+	import { PUBLIC_BRAND_NAME, PUBLIC_LOGIN_IMAGE } from '$env/static/public';
+	import { Row, Col, Card, CardBody, CardTitle, Table } from '@sveltestrap/sveltestrap';
+	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/HeadTitle.svelte';
+	import { onMount } from 'svelte';
+	import { myInfo } from '$lib/services/auth-service';
+    import Loader from '$lib/common/Loader.svelte';
+
+	/**
+	 * @type {{ full_name: any; id?: string; user_name?: string | undefined; first_name?: string | undefined; last_name?: string | undefined; email?: string | undefined; role?: string | undefined; avatar?: string | undefined; color?: string | undefined; token?: string | undefined; }}
+	 */
+	let currentUser;
+	let isLoading = false;
+	onMount(async () => {
+        isLoading = true;
+		await myInfo().then(data => {
+            currentUser = data;
+        }).finally(() => {
+            isLoading = false;
+        });
+	});
+</script>
+
+<HeadTitle title="My Profile" />
+<Breadcrumb title="Home" pagetitle="My Profile" />
+{#if isLoading}
+	<Loader />
+{/if}
+{#if !isLoading}
+	<Row>
+		<Col xl={4}>
+			<Card class="overflow-hidden">
+				<div class="bg-primary-subtle">
+					<Row class="row">
+						<Col xs={7}>
+							<div class="text-primary p-3">
+								<h5 class="text-primary">Welcome Back !</h5>
+								<p>{PUBLIC_BRAND_NAME}</p>
+							</div>
+						</Col>
+					</Row>
+				</div>
+				<CardBody class="pt-0">
+					<Row>
+						<Col sm={4}>
+							<div class="avatar-md profile-user-wid mb-4">
+								<img src="/images/users/user-dummy.jpg" alt="avatar" class="img-thumbnail rounded-circle" />
+							</div>
+							<h5 class="font-size-15 text-truncate">{currentUser?.full_name}</h5>
+							<p class="text-muted mb-0 text-truncate">{currentUser?.role ?? "Role: N/A"}</p>
+						</Col>
+					</Row>
+				</CardBody>
+			</Card>
+			<Card>
+				<CardBody>
+					<CardTitle class="mb-4">Personal Information</CardTitle>
+					<div class="table-responsive">
+						<Table>
+							<tbody>
+								<tr>
+									<th>First Name:</th>
+									<td>
+										{currentUser?.first_name ?? "N/A"}
+									</td>
+								</tr>
+								<tr>
+									<th>Last Name:</th>
+									<td>
+										{currentUser?.last_name ?? "N/A"}
+									</td>
+								</tr>
+								<tr>
+									<th>Email:</th>
+									<td>
+										{currentUser?.email ?? "N/A"}
+									</td>
+								</tr>
+							</tbody>
+						</Table>
+					</div>
+				</CardBody>
+			</Card>
+		</Col>
+	</Row>
+{/if}