Merge pull request #90 from sparrowapp-dev/revamp-login-flow

Revamp login flow
sparrowapp-dev · Dec 16, 2024 · d445a87 · d445a87
2 parents a82e974 + f74ddc5
commit d445a87
Show file tree

Hide file tree

Showing 27 changed files with 2,380 additions and 770 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -13,13 +13,15 @@
 	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';
 	import { onMount } from 'svelte';
+	import VerifyMagicCode from './pages/Auth/verify-magic-code/VerifyMagicCode.svelte';
+	import CoolDownPage from './pages/Auth/cool-down-page/CoolDownPage.svelte';
 	export let url = '/';
 
-
 </script>
 
 <Router {url}>
@@ -37,11 +39,13 @@
 		<ExternalNavigation to={`mailto:${constants.SPARROW_SUPPORT_EMAIL}`}/>
 	</Route>
 	<!-- <Route path="/success" component={AuthSuccess} /> -->
+	<Route path="/verify-magic-code/:id" component={VerifyMagicCode} />
+	<Route path="/cool-down-active" component={CoolDownPage} />
 	<Route path="/*"><Navigate to="/init" /></Route>
 </Router>
 <Toast/>
 
 <div style="height: 100vh; top:0; left:0;
 right:0; z-index:-100 !important" class="w-100 position-fixed">
-	<img src={bg} alt="" style="height:100%; width:100%; opacity: 0.7">
+	<img src={SparrowBackgroundV2} alt="" style="height:100%; width:100%; opacity: 0.7">
 </div>
diff --git a/src/lib/assets/AiSparkle.svelte b/src/lib/assets/AiSparkle.svelte
@@ -0,0 +1,151 @@
+<script>
+  export let height = "24px";
+  export let width = "24px";
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 29 29"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g filter="url(#filter0_d_15966_755424)">
+    <path
+      d="M7.15385 14.0907C10.8675 14.3146 13.8404 17.2863 14.0637 21H14.0908C14.3146 17.2863 17.2869 14.3146 21 14.0907V14.0636C17.2863 13.8392 14.3146 10.8675 14.0908 7.15381H14.0637C13.8398 10.8675 10.8675 13.8392 7.15385 14.0636V14.0907Z"
+      fill="url(#paint0_linear_15966_755424)"
+    />
+    <path
+      d="M14.0772 7.76951C13.6098 11.0306 11.0304 13.6094 7.76926 14.0771C11.0304 14.5443 13.6101 17.123 14.0773 20.384C14.5448 17.1231 17.124 14.5444 20.3846 14.0771C17.1235 13.6095 14.5446 11.0306 14.0772 7.76951Z"
+      stroke="url(#paint1_linear_15966_755424)"
+      stroke-width="0.151515"
+    />
+  </g>
+  <g filter="url(#filter1_d_15966_755424)">
+    <path
+      d="M6.00007 8.60135C7.3927 8.68529 8.50753 9.79969 8.59125 11.1923H8.60142C8.68536 9.79969 9.79998 8.68529 11.1924 8.60135V8.59118C9.79976 8.50702 8.68536 7.39262 8.60142 6H8.59125C8.50731 7.39262 7.3927 8.50702 6.00007 8.59118V8.60135Z"
+      fill="url(#paint2_linear_15966_755424)"
+    />
+    <path
+      d="M8.59634 6.24403C8.41666 7.45739 7.45738 8.41647 6.24398 8.59624C7.45736 8.77584 8.41679 9.73486 8.59636 10.9482C8.77607 9.73487 9.7353 8.77586 10.9485 8.59625C9.7351 8.41647 8.776 7.45739 8.59634 6.24403Z"
+      stroke="url(#paint3_linear_15966_755424)"
+      stroke-width="0.0606061"
+    />
+  </g>
+  <defs>
+    <filter
+      id="filter0_d_15966_755424"
+      x="0.103014"
+      y="0.358936"
+      width="27.9483"
+      height="27.9488"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.25641" />
+      <feGaussianBlur stdDeviation="3.52564" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0.0666667 0 0 0 0 0.576471 0 0 0 0 0.941176 0 0 0 0.55 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_15966_755424"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_15966_755424"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter1_d_15966_755424"
+      x="3.17949"
+      y="3.4359"
+      width="10.8334"
+      height="10.8334"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.25641" />
+      <feGaussianBlur stdDeviation="1.41026" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0.0666667 0 0 0 0 0.576471 0 0 0 0 0.941176 0 0 0 0.55 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_15966_755424"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_15966_755424"
+        result="shape"
+      />
+    </filter>
+    <linearGradient
+      id="paint0_linear_15966_755424"
+      x1="14.0769"
+      y1="7.15381"
+      x2="14.0769"
+      y2="21"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#6147FF" />
+      <stop offset="0.695" stop-color="#0095FF" />
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear_15966_755424"
+      x1="14.0769"
+      y1="7.15381"
+      x2="14.0769"
+      y2="21"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#999999" stop-opacity="0" />
+      <stop offset="1" stop-color="white" />
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear_15966_755424"
+      x1="8.59623"
+      y1="6"
+      x2="8.59623"
+      y2="11.1923"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#6147FF" />
+      <stop offset="1" stop-color="#1193F0" />
+    </linearGradient>
+    <linearGradient
+      id="paint3_linear_15966_755424"
+      x1="6.53037"
+      y1="6"
+      x2="9.56067"
+      y2="10.697"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#666666" stop-opacity="0" />
+      <stop offset="1" stop-color="white" />
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/src/lib/assets/AiSparkleV2.svg b/src/lib/assets/AiSparkleV2.svg
diff --git a/src/lib/assets/CircleCheck.svelte b/src/lib/assets/CircleCheck.svelte
@@ -0,0 +1,11 @@
+<script>
+    export let height = "24px";
+    export let width = "24px";
+    export let color="gray"
+  </script>
+
+  <svg
+    {width}
+    {height} viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.38 12.18L13.02 6.54L11.9 5.42L7.38 9.94L5.1 7.66L3.98 8.78L7.38 12.18ZM8.5 16.5C7.39333 16.5 6.35333 16.2899 5.38 15.8696C4.40667 15.4499 3.56 14.88 2.84 14.16C2.12 13.44 1.55013 12.5933 1.1304 11.62C0.710133 10.6467 0.5 9.60667 0.5 8.5C0.5 7.39333 0.710133 6.35333 1.1304 5.38C1.55013 4.40667 2.12 3.56 2.84 2.84C3.56 2.12 4.40667 1.54987 5.38 1.1296C6.35333 0.709867 7.39333 0.5 8.5 0.5C9.60667 0.5 10.6467 0.709867 11.62 1.1296C12.5933 1.54987 13.44 2.12 14.16 2.84C14.88 3.56 15.4499 4.40667 15.8696 5.38C16.2899 6.35333 16.5 7.39333 16.5 8.5C16.5 9.60667 16.2899 10.6467 15.8696 11.62C15.4499 12.5933 14.88 13.44 14.16 14.16C13.44 14.88 12.5933 15.4499 11.62 15.8696C10.6467 16.2899 9.60667 16.5 8.5 16.5Z" fill={color}/>
+</svg>
diff --git a/src/lib/assets/CircleTick.svelte b/src/lib/assets/CircleTick.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let height: string = "24";
+    export let width: string = "24";
+</script>
+
+<svg width={width} height={height} viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2502 9.73051C13.7502 12.2305 11.8652 14.5845 9.22022 15.1105C7.93022 15.3674 6.59204 15.2108 5.39623 14.6629C4.20042 14.115 3.20794 13.2038 2.56012 12.0591C1.91229 10.9144 1.64214 9.5944 1.78813 8.28719C1.93413 6.97997 2.48882 5.75214 3.37322 4.77851C5.18722 2.78051 8.25022 2.23051 10.7502 3.23051" stroke="#34A853" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.75 8.73047L8.25 11.2305L14.25 4.73047" stroke="#34A853" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/lib/assets/CopyIcon.svelte b/src/lib/assets/CopyIcon.svelte
@@ -0,0 +1,12 @@
+<script>
+  export let height = "24px";
+  export let width = "24px";
+  export let color="gray"
+</script>
+
+<svg
+  {width}
+  {height} viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2188 4.5H6.28125C5.29749 4.5 4.5 5.29749 4.5 6.28125V13.2188C4.5 14.2025 5.29749 15 6.28125 15H13.2188C14.2025 15 15 14.2025 15 13.2188V6.28125C15 5.29749 14.2025 4.5 13.2188 4.5Z" stroke={color} stroke-opacity="0.9" stroke-linejoin="round"/>
+<path d="M12.4844 4.5L12.5 3.75C12.4987 3.28628 12.3139 2.84192 11.986 2.51402C11.6581 2.18612 11.2137 2.00132 10.75 2H4C3.47005 2.00157 2.96225 2.21278 2.58752 2.58752C2.21278 2.96225 2.00157 3.47005 2 4V10.75C2.00132 11.2137 2.18612 11.6581 2.51402 11.986C2.84192 12.3139 3.28628 12.4987 3.75 12.5H4.5" stroke={color} stroke-opacity="0.9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/lib/assets/EmptyCheckBox.svg b/src/lib/assets/EmptyCheckBox.svg
diff --git a/src/lib/assets/FilledCheckBox.svg b/src/lib/assets/FilledCheckBox.svg