Merge pull request #14 from sparrowapp-dev/development

Development

src/App.svelte

@@ -22,8 +22,8 @@
 	<Route path="/init" component={EntryPoint} />
 	<Route path="/register/:id" component={RegisterPage} />
 	<Route path="/register" component={RegisterPage} />
-	<Route path="/update/password" component={UpdatePassword} />
-	<Route path="/reset/password" component={ResetPassword} />
+	<Route path="/update/password/:id" component={UpdatePassword} />
+	<Route path="/reset/password/:id" component={ResetPassword} />
 	<Route path="/redirect" component={OauthRedirect} />
 	<!-- <Route path="/success" component={AuthSuccess} /> -->
 	<Route path="/*"><Navigate to="/init" /></Route>

src/lib/components/help/SupportHelp.svelte

@@ -2,9 +2,9 @@
 	import constants from "$lib/utils/constants";
 </script>
 <div class="w-100 d-flex align-items-center justify-content-center">
-    <a href={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`} class="px-2">Need Help?</a>
+    <a href={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`} class="px-2 sparrow-fs-12">Need Help?</a>
     <span class="px-2">|</span>
-    <a href={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`} class="px-2">Report Issue</a>
+    <a href={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`} class="px-2 sparrow-fs-12">Report Issue</a>
 </div>
 <style>
     a{

src/lib/utils/validation.ts

@@ -1,5 +1,7 @@
 import * as yup from 'yup';
 const emailRegex = /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]+)$/;
+const firstNameRegex = /^[A-Za-z\s]+$/;
+const lastNameRegex = /^[a-zA-Z]*$/;
 
 //----------------------------- Check Validation ---------------------//
 export const checkValidation = async (validationSchema, val) => {
@@ -21,19 +23,16 @@ export const registrationSchema = yup.object().shape({
 	email: yup
 		.string()
 		.email()
-		.matches(/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})$/, 'Must be a valid email address')
-		.required('Please enter an email'),
-	firstName: yup.string().required('Please enter your first name'),
+		.matches(emailRegex, 'Please enter a valid email ID.')
+		.required('Please enter an email Id.'),
+	firstName: yup.string().matches(firstNameRegex, "Your first name cannot have numbers or special characters.").required('Please enter your first name.'),
+	lastName: yup.string().matches(lastNameRegex, "Your last name cannot have numbers or special characters."),
 	password: yup
 		.string()
 		.required()
-		.min(8, 'Password must be at least 8 characters')
-		.matches(/(?=.*[0-9])/, 'Password must contain a number')
-		.matches(/(?=.*[!@#$%^&*])/, 'Password must contain a special character'),
-	tnsCheckbox: yup
-		.boolean()
-		.required('Please accept the terms and conditions')
-		.oneOf([true], 'Please accept the terms and conditions')
+		.min(8, 'Password must be at least 8 characters.')
+		.matches(/(?=.*[0-9])/, 'Password must contain a number.')
+		.matches(/(?=.*[!@#$%^&*])/, 'Password must contain a special character.'),
 });
 
 //------------------- login Schema ---------------------------//
@@ -42,12 +41,12 @@ export const loginSchema = yup.object().shape({
 		.string()
 		.email()
 		.matches(
-			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+			emailRegex,
 			'Please enter a valid email ID.'
 			)
-			.required('Please enter an email')
+			.required('Please enter an email Id.')
 		,
-	password: yup.string().required('Please enter a password')
+	password: yup.string().required('Please enter a password.')
 });
 
 //------------------- Entry Schema ---------------------------//
@@ -58,6 +57,7 @@ export const entrySchema = yup.object().shape({
 		.matches(
 			emailRegex,'Please enter a valid email ID.'
 			)
+			.required('Please enter an email Id.')
 		,
 });
 
@@ -67,9 +67,10 @@ export const forgotPasswordSchema = yup.object().shape({
 		.email()
 		.required('Please enter an email')
 		.matches(
-			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+			emailRegex,
 			'Please enter a valid email ID.'
 		)
+		.required('Please enter an email Id.')
 });
 
 export const resetPasswordSchema = yup.object().shape({

src/pages/Auth/entry-point/EntryPoint.svelte

@@ -39,7 +39,7 @@
 		buttonClick={redirectRules.buttonClick}
 		loadingMessage={redirectRules.loadingMessage}
 	/>
-	{:else}
+{:else}
 	<div class="parent d-flex align-items-center justify-content-center text-white rounded">
 		<div
 			class="entry-point rounded container d-flex flex-column align-items-center justify-content-center w-100"
@@ -48,8 +48,7 @@
 				<img src={sparrowicon} width="60px" alt="" class="" />
 			</div>
 			<p
-				class="container-header pt-4 pb-5 fs-28 text-whiteColor text-center ms-2 me-2 fw-bold"
-				style="font-size: 28px;"
+				class="container-header pt-4 pb-5 sparrow-fs-28 text-whiteColor text-center ms-2 me-2 fw-bold"
 			>
 				Welcome to Sparrow!
 			</p>
@@ -61,8 +60,8 @@
 					validationErrors = await handleEntryValidation(entryCredentials);
 					if (!validationErrors?.email) {
 						const response = await handleEntry(entryCredentials);
-						if(response.isSuccessful){
-							if (response?.data?.registeredWith === "google") {
+						if (response.isSuccessful) {
+							if (response?.data?.registeredWith === 'google') {
 								// Registered with google auth
 								isEntry = true;
 								redirectRules.title = `Redirecting you to sign in with google account...`;
@@ -71,10 +70,10 @@
 								setTimeout(() => {
 									navigate(constants.SPARROW_OAUTH);
 								}, 1000);
-							} else if (response?.data?.registeredWith === "email") {
+							} else if (response?.data?.registeredWith === 'email') {
 								// registered with email
 								isEntry = true;
-								redirectRules.title= `Redirecting to your account...`;
+								redirectRules.title = `Redirecting to your account...`;
 								redirectRules.description = `${entryCredentials?.email} has been previously used to login via email account.`;
 								redirectRules.loadingMessage = `Please wait while we are redirecting you to your email account....`;
 								setTimeout(() => {
@@ -83,8 +82,7 @@
 							} else {
 								navigate(`/register/${entryCredentials?.email}`);
 							}
-						}
-						else{
+						} else {
 							notifications.error(response?.message);
 						}
 					}
@@ -105,22 +103,27 @@
 						placeholder="Please enter your registered email id"
 						autocorrect="off"
 						autocapitalize="none"
+						autocomplete="off"
 						bind:value={entryCredentials.email}
+						on:blur={async () => {
+							isEmailTouched = true;
+							validationErrors = await handleEntryValidation(entryCredentials);
+						}}
 						on:input={async () => {
 							validationErrors = await handleEntryValidation(entryCredentials);
 						}}
 					/>
-	
+
 					{#if validationErrors?.email && isEmailTouched}
 						<small class="form-text text-dangerColor"> {validationErrors?.email}</small>
 					{/if}
 				</div>
-	
+
 				<div class="mb-1">
 					<button class="btn btn-primary w-100 text-whiteColor border-0">Continue</button>
 				</div>
 			</form>
-			<SupportHelp/>
+			<SupportHelp />
 		</div>
 	</div>
 {/if}

src/pages/Auth/forgot-password/ForgotPassword.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import angleLeft from '$lib/assets/angleLeft.svg';
 	import starIcon from '$lib/assets/starIcon.svg';
 
-	import { handleForgotPasswordValidation } from './forgot-password';
-	import { isLoading, username } from '$lib/store/auth.store';
-	// import PageLoader from "$lib/components/Transition/PageLoader.svelte";
-	import { Link } from 'svelte-navigator';
+	import { handleForgotPassword, handleForgotPasswordValidation } from './forgot-password';
+	import sparrowicon from '$lib/assets/sparrow-icon-bg.svg';
+
+	import {  navigate } from 'svelte-navigator';
+	import { notifications } from '$lib/components/toast-notification/ToastNotification';
 
 	let validationErrors: any = {};
 
@@ -14,89 +14,92 @@
 	};
 
 	let isEmailTouched = false;
-
-	let isEmailValid = false;
-	const validateEmail = () => {
-		username.set(forgotPasswordCredential.email);
-		isEmailTouched = true;
-		const emailRegex =
-			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-		isEmailValid = emailRegex.test(forgotPasswordCredential.email);
-
-		if (!isEmailValid) {
-			validationErrors.email = 'Please enter a valid email ID.';
-		} else if (isEmailTouched) {
-			validationErrors.email = '';
-		}
-
-		if (forgotPasswordCredential.email === '') {
-			validationErrors.email = 'Email cannot be empty. Please provide your registered email ID.';
-		}
-	};
-
-	let isLoadingPage: boolean;
-	isLoading.subscribe((value) => {
-		isLoadingPage = value;
-	});
 </script>
 
-<div
-	class="card-body d-flex flex-column bg-black text-white mx-auto rounded overflow-hidden"
-	style="height: 100vh;"
->
-	{#if isLoadingPage}
-		<!-- <PageLoader /> -->
-	{:else}
-		<div class="d-flex mb-5 flex-column align-items-center justify-content-center">
-			<p
-				class="text-whiteColor mt-5 ms-2 me-2 mb-5"
-				style="font-size: 40px; width:408px; height:48px;font-weight:500;"
-			>
-				Welcome to Sparrow!
-			</p>
-
+<div class="parent d-flex align-items-center justify-content-center text-white rounded">
+	<div
+		class="auth-content rounded container d-flex flex-column align-items-center justify-content-center w-100"
+	>
+		<div class="text-white d-flex justify-content-center align-items-center">
+			<img src={sparrowicon} width="60px" alt="" class="" />
+		</div>
+		<p
+			class="container-header pt-4 pb-5 sparrow-fs-28 text-whiteColor text-center ms-2 me-2 fw-bold"
+		>
+			Welcome to Sparrow!
+		</p>
 			<form
 				class="login-form text-whiteColor ps-1 pe-1 gap-16"
-				style="width:408px; height:214px"
 				on:submit|preventDefault={async () => {
+					isEmailTouched = true;
 					validationErrors = await handleForgotPasswordValidation(forgotPasswordCredential);
+					if(!validationErrors?.email){
+						const response  = await handleForgotPassword(forgotPasswordCredential);
+						if (response?.isSuccessful) {
+							navigate(`/update/password/${forgotPasswordCredential.email}`);
+						} else {
+							notifications.error(response?.message);
+						}
+					}
 				}}
 			>
 				<div class="d-flex flex-column align-items-left justify-content-center mb-2">
 					<div class="d-flex align-items-center justify-content-start mb-3 gap-3">
-						<Link to="/"><img src={angleLeft} alt="" class="mb-0" /></Link>
-						<p class="text-whiteColor fs-5 mb-0">Change Password</p>
+						<p class="text-whiteColor sparrow-fs-20  mb-0">Change Password</p>
 					</div>
 					<p class="text-lightGray">
 						Please enter your Email ID so that we can send you a verification code to process your
 						request.
 					</p>
 				</div>
 				<div class="mb-3">
-					<label for="exampleInputEmail1" class="form-label text-red">Email</label>
+					<label for="exampleInputEmail1" class="form-label text-red sparrow-fs-14">Email</label>
 					<img src={starIcon} alt="" class="mb-3" />
 					<input
 						type="email"
-						class="form-control bg-black border:{validationErrors.email
+						class="form-control sparrow-fs-16 border:{validationErrors?.email && isEmailTouched
 							? '3px'
-							: '1px'} solid {validationErrors.email ? 'border-error' : 'border-default'}"
+							: '1px'} solid {validationErrors?.email && isEmailTouched ? 'border-error' : 'border-default'}"
 						id="exampleInputEmail1"
 						aria-describedby="emailHelp"
-						required
 						placeholder="Please enter your registered email id"
 						autocorrect="off"
 						autocapitalize="none"
+						autocomplete="off"
 						bind:value={forgotPasswordCredential.email}
-						on:input={validateEmail}
+						on:blur={async()=>{
+							isEmailTouched = true;
+							validationErrors = await handleForgotPasswordValidation(forgotPasswordCredential);
+						}}
+						on:input={async()=>{
+							validationErrors = await handleForgotPasswordValidation(forgotPasswordCredential);
+						}}
 					/>
-					{#if validationErrors.email}
-						<small class="form-text text-dangerColor"> {validationErrors.email}</small>
+					{#if validationErrors?.email && isEmailTouched}
+						<small class="form-text text-dangerColor"> {validationErrors?.email}</small>
 					{/if}
 				</div>
 				<div class="sendButton">
-					<button class="btn btn-primaryColor text-whiteColor w-100">Send Request</button>
+					<button class="btn btn-primary text-whiteColor w-100">Send Request</button>
 				</div>
 			</form>
 		</div>
-	{/if}
 </div>
+<style>
+	.btn-primary {
+		background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);
+	}
+	.parent {
+		min-height: 100vh;
+		overflow: auto;
+	}
+	.auth-content {
+		margin: 30px !important;
+		background: linear-gradient(to bottom, rgba(51, 51, 51, 0.16), rgba(42, 42, 51, 1));
+		max-width: 504px;
+		padding: 48px 48px 64px 48px !important;
+	}
+	input {
+		background-color: transparent;
+	}
+</style>

src/pages/Auth/forgot-password/forgot-password.ts

@@ -1,11 +1,9 @@
 import { forgotPassword } from '$lib/services/auth.service';
 import type { EmailPostBody } from '$lib/utils/dto';
 import { checkValidation, forgotPasswordSchema } from '$lib/utils/validation';
-import { navigate } from 'svelte-navigator';
 
 export const handleForgotPassword = async (forgotPasswordCredential: EmailPostBody) => {
-	await forgotPassword(forgotPasswordCredential);
-	navigate('/update/password');
+	return await forgotPassword(forgotPasswordCredential);
 };
 
 //------------------------- Handle Login Validation -----------------//
@@ -17,6 +15,5 @@ export const handleForgotPasswordValidation = async (forgotPasswordCredential: E
 	if (isError) {
 		return errorObject;
 	}
-	handleForgotPassword(forgotPasswordCredential);
-	return {};
+	return;
 };