From fafca2db11ca283aa4676121b39ae6db6f908e4b Mon Sep 17 00:00:00 2001 From: Abhishek Yadav Date: Tue, 10 Dec 2024 19:24:19 +0530 Subject: [PATCH 01/41] feat: Revamp the first page and Signup page [#2157] --- src/App.svelte | 3 +- src/lib/assets/AiSparkle.svelte | 151 ++++++ src/lib/assets/CircleTick.svelte | 9 + src/lib/assets/EmptyCheckBox.svg | 3 + src/lib/assets/FilledCheckBox.svg | 4 + src/lib/assets/SparrowBackgroundV2.svg | 39 ++ src/lib/components/o-auth/Oauth.svelte | 51 +- src/pages/Auth/entry-point/EntryPoint.svelte | 239 +++++++-- .../Auth/register-page/RegisterPage.svelte | 471 +++++++++--------- 9 files changed, 677 insertions(+), 293 deletions(-) create mode 100644 src/lib/assets/AiSparkle.svelte create mode 100644 src/lib/assets/CircleTick.svelte create mode 100644 src/lib/assets/EmptyCheckBox.svg create mode 100644 src/lib/assets/FilledCheckBox.svg create mode 100644 src/lib/assets/SparrowBackgroundV2.svg diff --git a/src/App.svelte b/src/App.svelte index 376f34a..ad137d0 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -13,6 +13,7 @@ import EntryPoint from './pages/Auth/entry-point/EntryPoint.svelte'; import BgContainer from '$lib/components/bgContainer/BgContainer.svelte'; import bg from '$lib/assets/sparrowLogoBackground.svg'; + import SparrowBackgroundV2 from '$lib/assets/SparrowBackgroundV2.svg'; import ExternalNavigation from './routing/ExternalNavigation.svelte'; import constants from '$lib/utils/constants'; import VerifyEmail from './pages/Auth/verify-email/VerifyEmail.svelte'; @@ -43,5 +44,5 @@
- +
diff --git a/src/lib/assets/AiSparkle.svelte b/src/lib/assets/AiSparkle.svelte new file mode 100644 index 0000000..0c3c75e --- /dev/null +++ b/src/lib/assets/AiSparkle.svelte @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/assets/CircleTick.svelte b/src/lib/assets/CircleTick.svelte new file mode 100644 index 0000000..3779fba --- /dev/null +++ b/src/lib/assets/CircleTick.svelte @@ -0,0 +1,9 @@ + + + + + + diff --git a/src/lib/assets/EmptyCheckBox.svg b/src/lib/assets/EmptyCheckBox.svg new file mode 100644 index 0000000..3a2638b --- /dev/null +++ b/src/lib/assets/EmptyCheckBox.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/lib/assets/FilledCheckBox.svg b/src/lib/assets/FilledCheckBox.svg new file mode 100644 index 0000000..31e7255 --- /dev/null +++ b/src/lib/assets/FilledCheckBox.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/lib/assets/SparrowBackgroundV2.svg b/src/lib/assets/SparrowBackgroundV2.svg new file mode 100644 index 0000000..c5abf82 --- /dev/null +++ b/src/lib/assets/SparrowBackgroundV2.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/components/o-auth/Oauth.svelte b/src/lib/components/o-auth/Oauth.svelte index 243bb0a..6cc5942 100644 --- a/src/lib/components/o-auth/Oauth.svelte +++ b/src/lib/components/o-auth/Oauth.svelte @@ -6,23 +6,50 @@ navigate(constants.SPARROW_OAUTH); }; -
-

or continue with

-
+
+ +
+ + class="custom-btn d-flex align-items-center justify-content-center gap-2 btn w-100 text-whiteColor" + style="height:44px;" + on:click={handleSignInWithGoogle} + > + Google Logo + +

Continue with Google

+
diff --git a/src/pages/Auth/register-page/RegisterPage.svelte b/src/pages/Auth/register-page/RegisterPage.svelte index 3b256aa..ace9fb4 100644 --- a/src/pages/Auth/register-page/RegisterPage.svelte +++ b/src/pages/Auth/register-page/RegisterPage.svelte @@ -1,7 +1,10 @@ + + + + diff --git a/src/lib/assets/CopyIcon.svelte b/src/lib/assets/CopyIcon.svelte new file mode 100644 index 0000000..e5946db --- /dev/null +++ b/src/lib/assets/CopyIcon.svelte @@ -0,0 +1,12 @@ + + + + + + diff --git a/src/lib/assets/line.svg b/src/lib/assets/line.svg index 9669db1..1f7fe4e 100644 --- a/src/lib/assets/line.svg +++ b/src/lib/assets/line.svg @@ -1,3 +1,3 @@ - + diff --git a/src/lib/components/bgContainer/BgContainer.svelte b/src/lib/components/bgContainer/BgContainer.svelte index eadf799..403d09c 100644 --- a/src/lib/components/bgContainer/BgContainer.svelte +++ b/src/lib/components/bgContainer/BgContainer.svelte @@ -4,8 +4,8 @@
{#if entryLoader} - {:else if emailExists} - - - + {/if}
@@ -212,8 +208,8 @@
- + --> + +
-
+
-

+

We will email you a magic code for password free Sign in or you can continue with passwordcontinue with password

@@ -247,9 +251,7 @@ transform: translateY(-50%); background-color: transparent; } - .outline-none { - outline: none; - } + .btn-primary { font-weight: 400; border-radius: 10px; @@ -295,7 +297,7 @@ } .divider .text { - margin: 0 10px; + margin: 0 3px; color: #bfc0d2; font-size: 14px; } diff --git a/src/pages/Auth/redirect/Redirect.svelte b/src/pages/Auth/redirect/Redirect.svelte index c06fa44..cdb4c8f 100644 --- a/src/pages/Auth/redirect/Redirect.svelte +++ b/src/pages/Auth/redirect/Redirect.svelte @@ -1,127 +1,105 @@ -
-
-
- + + +
+
+
+

Sparrow

+
+ +

{title} +
+ To your Sparrow Space

- {#if isSpinner} -
-
-

{description}

-
- -
-

- {message} -

-
-
- {:else} -
-
-

{description}

-
- -
-

- {message} -

-
-
- {/if} - - {#if isSpinner} -
- -
- {:else} +
-
- {/if} +
- {#if loadingMessage} - -
- - diff --git a/src/pages/Auth/register-page/RegisterPage.svelte b/src/pages/Auth/register-page/RegisterPage.svelte index ace9fb4..d5b61f5 100644 --- a/src/pages/Auth/register-page/RegisterPage.svelte +++ b/src/pages/Auth/register-page/RegisterPage.svelte @@ -26,7 +26,7 @@ let redirectRules = { title: 'Welcome to Sparrow!', description: 'Bridging Frontend and Backend Development.', - message: `Easily document and manage APIs for seamless collaboration between frontend and backend teams. Get started now to simplify your development workflows.`, + message: `the token if you are facing any issue in redirecting to the login page`, isSpinner: true, buttonText: 'Open Desktop App', buttonClick: () => {}, @@ -37,7 +37,8 @@ firstName: '', lastName: '', password: '', - tnsCheckbox: false + tnsCheckbox: false, + marketingUpdates:false }; let isDuplicateEmail = false; let validationErrors: any = {}; @@ -139,7 +140,8 @@ !validationErrors?.lastName && !validationErrors?.email && !validationErrors?.password && - userData?.tnsCheckbox + userData?.tnsCheckbox && + userData?.marketingUpdates ) { registerLoader = true; const response = await handleRegister(userData); @@ -344,7 +346,7 @@
-
+
- Terms of Service + + + and
+ + + Privacy Policy + + +
{#if !userData.tnsCheckbox && isCheckboxTouched} @@ -372,29 +381,34 @@ > {/if} +
+ + +
+ + + +
+
- - {/if} diff --git a/src/pages/Auth/verify-email/VerifyEmail.svelte b/src/pages/Auth/verify-email/VerifyEmail.svelte index ddf095a..9014afd 100644 --- a/src/pages/Auth/verify-email/VerifyEmail.svelte +++ b/src/pages/Auth/verify-email/VerifyEmail.svelte @@ -15,9 +15,14 @@ import BgContainer from '$lib/components/bgContainer/BgContainer.svelte'; import Redirect from '../redirect/Redirect.svelte'; import constants from '$lib/utils/constants'; + import PrivacyPolicy from '$lib/components/privacy-policy/PrivacyPolicy.svelte'; + import SupportHelp from '$lib/components/help/SupportHelp.svelte'; + import AiSparkle from '$lib/assets/AiSparkle.svelte'; + import CircleTick from '$lib/assets/CircleTick.svelte'; + import CircleCheck from '$lib/assets/CircleCheck.svelte'; export let id: string; - let seconds = 60; + let seconds = 600; const verifyString = writable(''); let verifyLength: string = ''; let isRegistered = false; @@ -78,6 +83,7 @@ let userFromDesktop = localStorage.getItem('isUserFromDesktop'); + let showResendSuccess = false; const handleVerificationCode = () => { verifyCode = @@ -121,6 +127,7 @@ resentCodeLoader = true; const response = await sendUserEmailVerification({ email: id }); if (response.isSuccessful) { + showResendSuccess = true; notifications.success('Verification code sent successfully'); localStorage.setItem(`timer-verify-${id}`, new Date().getTime()); startTimer(); @@ -225,15 +232,31 @@ /> {:else} -

- Welcome to Sparrow! -

+ +
+
+ +
+

Sparrow

+
+ +
+

+ Welcome! +

+

Let’s get you onboard

+
+ +