Skip to content

Commit

Permalink
feat: added verification code functionality []
Browse files Browse the repository at this point in the history
  • Loading branch information
@Astitva877
Astitva877 committed Sep 8, 2024
1 parent fef35d2 commit 4f4566c
Show file tree
Hide file tree
Showing 7 changed files with 854 additions and 247 deletions.
2 changes: 2 additions & 0 deletions src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import bg from '$lib/assets/sparrowLogoBackground.svg';
import ExternalNavigation from './routing/ExternalNavigation.svelte';
import constants from '$lib/utils/constants';
import VerifyEmail from './pages/Auth/verify-email/VerifyEmail.svelte';
export let url = '/';
</script>

Expand All @@ -27,6 +28,7 @@
<Route path="/register" component={RegisterPage} />
<Route path="/update/password/:id" component={UpdatePassword} />
<Route path="/reset/password/:id/:code" component={ResetPassword} />
<Route path="/verify/email/:id" component={VerifyEmail} />
<Route path="/redirect" component={OauthRedirect} />
<Route path="/support">
<ExternalNavigation to={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`}/>
Expand Down
16 changes: 15 additions & 1 deletion src/lib/services/auth.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,18 @@ const resetPassword = async (changePasswordBody: resetPasswordPostBody) => {
return response;
};

export { registerUser, loginUser, forgotPassword, loginWithGoogle, verifyEmail, resetPassword, getUser };
const sendUserEmailVerification = async (emailInfo: EmailPostBody) => {
const response = await makeRequest('POST', `${apiUrl}/api/user/send-user-verification-email`, {
body: emailInfo
});
return response;
};

const verifyUserEmail = async (verifyInfo: verifyPostbody) => {
const response = await makeRequest('POST', `${apiUrl}/api/user/verify-user-email`, {
body: verifyInfo
});
return response;
};

export { registerUser, loginUser, forgotPassword, loginWithGoogle, verifyEmail, resetPassword, getUser, sendUserEmailVerification, verifyUserEmail };
178 changes: 93 additions & 85 deletions src/pages/Auth/entry-point/EntryPoint.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,103 +45,111 @@
loadingMessage={redirectRules.loadingMessage}
/>
{:else}
<BgContainer>
<div class="text-white d-flex justify-content-center align-items-center bg-sparrowPrimaryColor" style="height: 60px; width: 60px; border-radius: 6px;">
<img src={sparrowicon} alt="" class="" />
</div>
<p
class="container-header pt-4 pb-4 sparrow-fs-28 sparrow-fw-600 text-whiteColor text-center ms-2 me-2"
style="letter-spacing: 0.05rem;"
>
Welcome to Sparrow!
</p>
<form
class="login-form w-100 text-whiteColor ps-1 pe-1 mb-2"
novalidate
on:submit|preventDefault={async () => {
isEmailTouched = true;
validationErrors = await handleEntryValidation(entryCredentials);
if (!validationErrors?.email) {
entryLoader = true;
const response = await handleEntry(entryCredentials);
if (response.isSuccessful) {

if (response?.data?.registeredWith === 'email' || response?.data?.registeredWith === 'google') {
// registered with email
isEntry = true;
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(() => {
navigate(`/login/${entryCredentials?.email}`);
}, 1000)
<BgContainer>
<div
class="text-white d-flex justify-content-center align-items-center bg-sparrowPrimaryColor"
style="height: 60px; width: 60px; border-radius: 6px;"
>
<img src={sparrowicon} alt="" class="" />
</div>
<p
class="container-header pt-4 pb-4 sparrow-fs-28 sparrow-fw-600 text-whiteColor text-center ms-2 me-2"
style="letter-spacing: 0.05rem;"
>
Welcome to Sparrow!
</p>
<form
class="login-form w-100 text-whiteColor ps-1 pe-1 mb-2"
novalidate
on:submit|preventDefault={async () => {
isEmailTouched = true;
validationErrors = await handleEntryValidation(entryCredentials);
if (!validationErrors?.email) {
entryLoader = true;
const response = await handleEntry(entryCredentials);
if (response.isSuccessful) {
if (
response?.data?.registeredWith === 'email' ||
response?.data?.registeredWith === 'google'
) {
// registered with email
isEntry = true;
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(() => {
navigate(`/login/${entryCredentials?.email}`);
}, 1000);
} else {
navigate(`/register/${entryCredentials?.email}`);
}
} else {
navigate(`/register/${entryCredentials?.email}`);
notifications.error(response?.message);
}
} else {
notifications.error(response?.message);
entryLoader = false;
}
entryLoader = false;
}
}}
>
<p class="card-subtitle sparrow-fs-20 sparrow-fw-500 mb-3">Sign In or Create an Account</p>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label text-lightGray sparrow-fs-14 d-flex">Email<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></label>
<!-- <img src={starIcon} alt="" class="mb-3" style="width: 7px;" /> -->
<input
type="email"
class="form-control sparrow-fs-16 border:{validationErrors?.email && isEmailTouched
? '3px'
: '1px'} solid {validationErrors?.email && isEmailTouched
? 'border-error'
: 'border-default'}"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Please enter your 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);
}}
/>
}}
>
<p class="card-subtitle sparrow-fs-20 sparrow-fw-500 mb-3">Sign In or Create an Account</p>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label text-lightGray sparrow-fs-14 d-flex"
>Email
<p class="ms-1 mb-0 sparrow-fw-600 text-dangerColor">*</p></label
>
<!-- <img src={starIcon} alt="" class="mb-3" style="width: 7px;" /> -->
<input
type="email"
class="form-control sparrow-fs-16 border:{validationErrors?.email && isEmailTouched
? '3px'
: '1px'} solid {validationErrors?.email && isEmailTouched
? 'border-error'
: 'border-default'}"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Please enter your 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>
{#if validationErrors?.email && isEmailTouched}
<small class="form-text text-dangerColor"> {validationErrors?.email}</small>
{/if}
</div>

<div class="mb-1 ">
<Button
disable={entryLoader}
title={"Continue"}
buttonClassProp={"w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16"}
type={"primary-gradient"}
loader={entryLoader}
/>
</div>
</form>
<Oauth />
<SupportHelp />
</BgContainer>
<div class="mb-1">
<Button
disable={entryLoader}
title={'Continue'}
buttonClassProp={'w-100 py-2 align-items-center d-flex justify-content-center sparrow-fs-16'}
type={'primary-gradient'}
loader={entryLoader}
/>
</div>
</form>
<Oauth />
<SupportHelp />
</BgContainer>
{/if}

<style>
.btn-primary {
background: var(--primary-color);
}
.btn-primary:hover{
background: var( --primary-btn-color-hover)
.btn-primary:hover {
background: var(--primary-btn-color-hover);
}
.btn-primary:active {
background: var(--button-pressed);
}
.btn-primary:active{
background:var(--button-pressed)
}
input {
background-color: transparent !important;
}
Expand Down
Loading

0 comments on commit 4f4566c

Please sign in to comment.