Feat: Added Magic Code Flow verify section

src/App.svelte

@@ -18,9 +18,10 @@
 	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}>
@@ -38,6 +39,8 @@
 		<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/>

src/lib/components/button/Button.svelte

@@ -13,6 +13,7 @@
     export let allowChild = false;
     export let type:
       | "primary"
+      | "secondary"
       | "dark"
       | "danger"
       | "primary-gradient"
@@ -21,6 +22,7 @@
       | "icon" = "other";
     enum BtnType {
       PRIMARY = "primary",
+      SECONDARY = "secondary",
       DARK = "dark",
       DANGER = "danger",
       TRANSPARENT = "transparent",
@@ -34,6 +36,9 @@
       case BtnType.PRIMARY:
         btnClass = "custom-btn-primary";
         break;
+        case BtnType.SECONDARY:
+        btnClass = "custom-btn-secondary";
+        break;
       case BtnType.DARK:
         btnClass = "custom-btn-dark";
         break;
@@ -91,7 +96,12 @@
 
 button:active {
     transition: all 300ms ease-in-out;
-  }
+}
+
+button {
+    transition: all 300ms ease-in-out;
+}
+
     .sparrow-icon-btn {
       background-color: transparent;
       border: 0px;
@@ -135,6 +145,29 @@ button:active {
         border: 0.4px solid white !important;
     }
 
+    .custom-btn-secondary {
+    font-weight: 400;
+    font-size: 14px;
+    background-color: transparent;
+    border: 1px solid rgba(214, 211, 209, 0.9);
+    border-radius: 8px;
+  }
+
+  .custom-btn-secondary:hover {
+    background-color: #6147ff;
+    border-color: transparent;
+  }
+
+  .custom-btn-secondary:active {
+    box-shadow: inset 0px 0px 12px 5px rgba(0, 0, 0, 0.55);
+    transition: all 100ms ease-in-out;
+  }
+
+  .custom-btn-secondary:disabled {
+    background-color: transparent;
+    border: 1px solid rgba(214, 211, 209, 0.9);
+  }
+
     .custom-btn-primary-gradient{
         // background: linear-gradient(270deg, #6147ff -1.72%, #1193f0 100%);
         background: var(--primary-color);

src/lib/services/auth.service.ts

@@ -9,6 +9,12 @@ import { makeRequest } from '$lib/api/api.common';
 import constants from '$lib/utils/constants';
 const apiUrl: string = constants.API_URL;
 
+// Add new type for magic code verification
+type MagicCodeVerifyBody = {
+	email: string;
+	magicCode: string;
+};
+
 const registerUser = async (userInfo: registerUserPostBody) => {
 	const response = await makeRequest('POST', `${apiUrl}/api/user`, {
 		body: userInfo
@@ -72,4 +78,31 @@ const verifyUserEmail = async (verifyInfo: verifyPostbody) => {
 	return response;
 };
 
-export { registerUser, loginUser, forgotPassword, loginWithGoogle, verifyEmail, resetPassword, getUser, sendUserEmailVerification, verifyUserEmail };
+const sendMagicCodeEmail = async (emailInfo: EmailPostBody) => {
+	const response = await makeRequest('POST', `${apiUrl}/api/user/send-magic-code-email`, {
+		body: emailInfo
+	});
+	return response;
+};
+
+const verifyMagicCode = async (verifyInfo: MagicCodeVerifyBody) => {
+	const response = await makeRequest('POST', `${apiUrl}/api/user/verify-magic-code`, {
+		body: verifyInfo
+	});
+	return response;
+};
+
+
+export { 
+	registerUser, 
+	loginUser, 
+	forgotPassword, 
+	loginWithGoogle, 
+	verifyEmail, 
+	resetPassword, 
+	getUser, 
+	sendUserEmailVerification, 
+	verifyUserEmail,
+	sendMagicCodeEmail,
+	verifyMagicCode 
+};

src/lib/store/auth.store.ts

@@ -5,6 +5,8 @@ export const username = writable("");
 export const isLoading = writable(false);
 export const isResponseError = writable(false);
 export const errorMessageText = writable("");
+export const errorMessageTextMagicCode = writable(""); 
+
 export const isLoggout = writable(false);
 export const register_user = writable(null);
 export const userWorkspaceLevelRole = writable(null);

src/lib/utils/dto/auth-dto.ts

@@ -20,6 +20,11 @@ export interface verifyPostbody {
   verificationCode: string;
 }
 
+export interface verifyMagicCodePostBody {
+  email: string;
+  magicCode: string;
+}
+
 export interface resetPasswordPostBody {
   email: string;
   newPassword: string;

src/pages/Auth/cool-down-page/CoolDownPage.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import BgContainer from '$lib/components/bgContainer/BgContainer.svelte';
+	import Button from '$lib/components/button/Button.svelte';
+	import { navigate } from 'svelte-navigator';
+	import sparrowicon from '$lib/assets/logoSparrowSquare.svg';
+	import SupportHelp from '$lib/components/help/SupportHelp.svelte';
+	import AiSparkle from '$lib/assets/AiSparkle.svelte';
+
+
+	let userFromDesktop = localStorage.getItem('isUserFromDesktop');
+
+
+</script>
+
+<BgContainer>
+
+	<div class="w-100 d-flex flex-column justify-content-center align-items-center">
+		<div class="d-flex align-items-start gap-2">
+			<div
+				class="text-white d-flex justify-content-center align-items-center bg-sparrowPrimaryColor"
+				style="height: 23px; width: 23px; border-radius: 6px;"
+			>
+				<img height="20px" width="20px" src={sparrowicon} alt="" class="" />
+			</div>
+			<p style="font-weight:500;">Sparrow</p>
+		</div>
+		<div class="d-flex flex-column  align-items-center" style="margin-top: 20px;">
+			<h1 class="" style="font-size:24px; font-weight: 600;">Cooldown Active</h1>
+			<p class="" style="font-size: 14px;">Too many request</p>
+		</div>
+
+		<div style="margin:44px 0px;">
+			<p class="mb-0  text-center " style="font-size:12px; color:#CCCCCCE5; font-weight: 400; line-height:15px; margin-bottom:44px; ">Your account is in a 30-minute cooldown. You can log in again after this period. Meanwhile, try accessing the Sparrow Edge.</p>
+		</div>
+
+		{#if userFromDesktop}
+		<div class="w-100 mb-5">
+
+			<Button 
+				title={'Try Sparrow Edge'}
+				buttonClassProp={'w-100 align-items-center d-flex justify-content-center sparrow-fs-16'}
+				type={'primary'}/>
+
+				<div class="d-flex align-items-start ms-1 " style="margin-top: 18px;">
+					<div style="height: 24px; width:24px; ">
+						<AiSparkle height={'24px'} width={'24px'} />
+					</div>
+					<p class="text-center sparrow-fs-12 pt-1" style="margin-left:-24px; color: #CCCCCCE5; line-height:15px;">
+						Instantly test APIs without signing up-just the essentials to get started fast.				</p>
+					</div>
+
+
+				</div>
+				{/if}
+
+
+		<div class="mt-4">
+			<SupportHelp/>
+		</div>
+	</div>
+</BgContainer>
+
+<style>
+	.cooldown-container {
+		text-align: center;
+		color: white;
+		padding: 20px;
+	}
+
+	.cooldown-button {
+		margin-top: 20px;
+	}
+</style>