add success screen

rezk2ll · Oct 6, 2023 · a72afdb · a72afdb
1 parent 854e200
commit a72afdb
Show file tree

Hide file tree

Showing 37 changed files with 787 additions and 94 deletions.
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -24,4 +24,6 @@ interface SessionData {
 	verified: boolean = false;
 	registered: boolean = false;
 	user?: string;
+	firstName?: string;
+	lastName?: string;
 }
diff --git a/src/lib/components/button/SubmitButton.svelte b/src/lib/components/button/SubmitButton.svelte
@@ -1,6 +1,11 @@
+<script lang="ts">
+	export let disabled: boolean = false;
+</script>
+
 <button
 	type="submit"
-	class="flex items-center rounded-full justify-center w-full h-12 bg-blue-500 text-base font-medium leading-5 tracking-wide text-center text-white"
+	{disabled}
+	class="flex items-center rounded-full justify-center w-full h-12 { disabled ? 'bg-gray-300': 'bg-blue-500' }  text-base font-medium leading-5 tracking-wide text-center text-white"
 >
 	<slot />
 </button>
diff --git a/src/lib/components/forms/RegisterForm.svelte b/src/lib/components/forms/RegisterForm.svelte
@@ -8,13 +8,16 @@
 	import SubmitButton from '../button/SubmitButton.svelte';
 	import OutlineLink from '../link/OutlineLink.svelte';
 	import VerifyPhoneModal from '../otp/VerifyPhoneModal.svelte';
+	import { form, phone as phoneStore } from '../../../store';
+	import { enhance } from '$app/forms';
 
 	let password: string = '';
 	let confirmPassword: string = '';
 	let firstName: string = '';
 	let lastName: string = '';
 	let nickName: string = '';
-	let phone: string = '';
+	let phone = '';
+	let invalidPhone = false;
 
 	$: invalidPassword = password.length > 0 && !validatePassword(password);
 	$: invalidConfirmPassword =
@@ -23,10 +26,13 @@
 	$: invalidFirstName = firstName.length > 0 && !validateName(firstName);
 	$: invalidLastName = lastName.length > 0 && !validateName(lastName);
 	$: invalidNickname = nickName.length > 0 && !validateNickName(nickName);
-	$: invalidPhone = phone.length > 0 && !isPhoneValid(phone);
+	$: {
+		invalidPhone = !!phone && phone.length > 0 && !isPhoneValid(phone);
+		!!phone && phoneStore.set(phone);
+	}
 </script>
 
-<form action="" class="flex flex-col space-y-6">
+<form use:enhance action="?/register" method="POST" class="flex flex-col space-y-6">
 	<div class="flex space-x-5 text-xs font-medium leading-4 tracking-wide text-left font-[Inter]">
 		<TextField
 			name="firstname"
@@ -43,31 +49,57 @@
 			bind:isInValid={invalidLastName}
 		/>
 	</div>
-	<TextField
-		name="nickname"
-		placeholder="Last Name"
-		label="Username"
-		bind:value={nickName}
-		bind:isInValid={invalidNickname}
-	/>
-	<PasswordField
-		name="password"
-		placeholder="Password"
-		label="Password"
-		bind:value={password}
-		bind:isInvalid={invalidPassword}
-	/>
+	<div>
+		<TextField
+			name="nickname"
+			placeholder="Last Name"
+			label="Username"
+			bind:value={nickName}
+			bind:isInValid={invalidNickname}
+		/>
+		{#if $form?.invalid_nickname}
+			<span class="text-xs font-medium leading-4 tracking-tight text-left text-red-500 px-5"
+				>invalid Username.
+			</span>
+		{/if}
+		{#if $form?.nickname_taken}
+			<span class="text-xs font-medium leading-4 tracking-tight text-left text-red-500 px-5"
+				>username is already taken
+			</span>
+		{/if}
+	</div>
+	<div>
+		<PasswordField
+			name="password"
+			placeholder="Password"
+			label="Password"
+			bind:value={password}
+			bind:isInvalid={invalidPassword}
+		/>
+
+		{#if $form?.invalid_password}
+			<span class="text-xs font-medium leading-4 tracking-tight text-left text-red-500 px-5"
+				>invalid password
+			</span>
+		{/if}
+	</div>
 	<PasswordField
 		name="confirmpassword"
 		placeholder="Confirm password"
 		label="Confirm password"
 		bind:value={confirmPassword}
 		bind:isInvalid={invalidConfirmPassword}
 	/>
-
-	<PhoneField bind:value={phone} bind:isInValid={invalidPhone}>
-		<VerifyPhoneModal bind:phone />
-	</PhoneField>
+	<div>
+		<PhoneField bind:value={phone} bind:isInValid={invalidPhone}>
+			<VerifyPhoneModal bind:phone />
+		</PhoneField>
+		{#if $form?.invalid_phone}
+			<span class="text-xs font-medium leading-4 tracking-tight text-left text-red-500 px-5"
+				>invalid phone number
+			</span>
+		{/if}
+	</div>
 
 	<div class="flex flex-col items-center justify-center space-y-5">
 		<SubmitButton>Sign up</SubmitButton>

diff --git a/src/lib/components/icons/ArrowForward.svelte b/src/lib/components/icons/ArrowForward.svelte
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z" fill="#0A84FF" />
+</svg>
diff --git a/src/lib/components/icons/Avatar.svelte b/src/lib/components/icons/Avatar.svelte
@@ -0,0 +1,45 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="48" height="48" rx="24" fill="url(#paint0_linear_14205_5852)" />
+	<rect width="48" height="48" rx="24" fill="url(#paint1_linear_14205_5852)" />
+	<mask
+		id="mask0_14205_5852"
+		style="mask-type:alpha"
+		maskUnits="userSpaceOnUse"
+		x="14"
+		y="12"
+		width="21"
+		height="23"
+	>
+		<path
+			d="M27.818 18C27.818 15.8902 26.1096 14.1818 23.9998 14.1818C21.89 14.1818 20.1816 15.8902 20.1816 18C20.1816 20.1098 21.89 21.8182 23.9998 21.8182C26.1096 21.8182 27.818 20.1098 27.818 18ZM29.9998 18C29.9998 21.3148 27.3146 24 23.9998 24C20.6851 24 17.9998 21.3148 17.9998 18C17.9998 14.6852 20.6851 12 23.9998 12C27.3146 12 29.9998 14.6852 29.9998 18ZM16.3635 31.2468C16.3635 32.2759 16.276 32.1818 16.8608 32.1818H31.6843C32.2691 32.1818 32.1816 32.2759 32.1816 31.2468C32.1816 28.7506 28.5773 27.2727 24.2725 27.2727C19.9678 27.2727 16.3635 28.7506 16.3635 31.2468ZM14.1816 31.2468C14.1816 27.0138 18.8714 25.0909 24.2725 25.0909C29.6737 25.0909 34.3635 27.0138 34.3635 31.2468C34.3635 33.4465 33.5113 34.3636 31.6843 34.3636H16.8608C15.0338 34.3636 14.1816 33.4465 14.1816 31.2468Z"
+			fill="#007AFF"
+		/>
+	</mask>
+	<g mask="url(#mask0_14205_5852)">
+		<rect x="8.72656" y="8.72729" width="30.5455" height="30.5455" fill="white" />
+	</g>
+	<defs>
+		<linearGradient
+			id="paint0_linear_14205_5852"
+			x1="7.5"
+			y1="6.75"
+			x2="48"
+			y2="48"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F8D280" />
+			<stop offset="0.953432" stop-color="#F2AC69" />
+		</linearGradient>
+		<linearGradient
+			id="paint1_linear_14205_5852"
+			x1="7.5"
+			y1="6.75"
+			x2="48"
+			y2="48"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#F19E86" />
+			<stop offset="0.953432" stop-color="#F95967" />
+		</linearGradient>
+	</defs>
+</svg>
diff --git a/src/lib/components/icons/Tdrive.svelte b/src/lib/components/icons/Tdrive.svelte
@@ -0,0 +1,52 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="56" height="56" rx="18" fill="white" />
+	<rect width="56" height="56" rx="18" fill="url(#paint0_linear_14205_5880)" />
+	<rect width="56" height="56" rx="18" fill="url(#paint1_linear_14205_5880)" />
+	<rect width="56" height="56" rx="18" fill="url(#paint2_linear_14205_5880)" />
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M27.8333 32.7504C27.8333 32.5799 27.8292 32.4096 27.8209 32.2393C27.8124 32.069 27.7999 31.899 27.7832 31.7294C27.7664 31.5597 27.7457 31.3906 27.7206 31.222C27.6957 31.0534 27.6665 30.8854 27.6332 30.7183C27.6 30.551 27.5626 30.3848 27.5212 30.2194C27.4798 30.054 27.4343 29.8898 27.3849 29.7267C27.3353 29.5635 27.2819 29.4017 27.2245 29.2411C27.167 29.0807 27.1057 28.9216 27.0404 28.7642C26.9752 28.6066 26.9062 28.4508 26.8333 28.2967C26.7604 28.1426 26.6838 27.9904 26.6034 27.8401C26.5231 27.6897 26.439 27.5414 26.3513 27.3952C26.2637 27.2489 26.1726 27.105 26.0779 26.9632C25.9831 26.8214 25.885 26.6822 25.7834 26.5453C25.6819 26.4083 25.577 26.274 25.4689 26.1422C25.3608 26.0103 25.2495 25.8812 25.1349 25.7551C25.0204 25.6287 24.903 25.5053 24.7824 25.3847C24.6618 25.2642 24.5385 25.1466 24.4121 25.0322C24.2858 24.9177 24.1568 24.8063 24.025 24.6982C23.8932 24.59 23.7589 24.4852 23.6219 24.3836C23.485 24.2821 23.3457 24.184 23.2039 24.0893C23.0621 23.9945 22.9181 23.9034 22.7719 23.8157C22.6256 23.7281 22.4774 23.6441 22.327 23.5638C22.1768 23.4833 22.0245 23.4067 21.8704 23.3339C21.7163 23.261 21.5604 23.192 21.403 23.1267C21.2455 23.0615 21.0865 23 20.9259 22.9426C20.7654 22.8852 20.6037 22.8317 20.4405 22.7823C20.2774 22.7328 20.1131 22.6874 19.9477 22.646C19.7824 22.6044 19.6161 22.5672 19.4488 22.5338C19.2817 22.5006 19.1138 22.4715 18.9451 22.4465C18.7765 22.4215 18.6073 22.4006 18.4378 22.3839C18.268 22.3673 18.098 22.3547 17.9279 22.3463C17.7576 22.3379 17.5871 22.3337 17.4167 22.3337C17.2462 22.3337 17.0758 22.3379 16.9056 22.3463C16.7353 22.3547 16.5653 22.3673 16.3957 22.3839C16.226 22.4006 16.0569 22.4215 15.8882 22.4465C15.7196 22.4715 15.5517 22.5006 15.3845 22.5338C15.2173 22.5672 15.051 22.6044 14.8856 22.646C14.7203 22.6874 14.556 22.7328 14.3929 22.7823C14.2298 22.8317 14.0679 22.8852 13.9074 22.9426C13.7469 23 13.5879 23.0615 13.4304 23.1267C13.2729 23.192 13.1171 23.261 12.963 23.3339C12.8089 23.4067 12.6566 23.4833 12.5063 23.5638C12.356 23.6441 12.2077 23.7281 12.0614 23.8157C11.9152 23.9034 11.7712 23.9945 11.6295 24.0893C11.4877 24.184 11.3484 24.2821 11.2115 24.3836C11.0745 24.4852 10.9402 24.59 10.8084 24.6982C10.6766 24.8063 10.5476 24.9177 10.4213 25.0322C10.295 25.1466 10.1715 25.2642 10.051 25.3847C9.93043 25.5053 9.81291 25.6287 9.69843 25.7551C9.58395 25.8812 9.47264 26.0103 9.36449 26.1422C9.25634 26.274 9.15148 26.4083 9.04993 26.5453C8.94836 26.6822 8.85024 26.8214 8.75553 26.9632C8.66082 27.105 8.56964 27.2489 8.482 27.3952C8.39435 27.5414 8.31035 27.6897 8.22998 27.8401C8.14963 27.9904 8.073 28.1426 8.00011 28.2967C7.92722 28.4508 7.85816 28.6066 7.79292 28.7642C7.72768 28.9216 7.66635 29.0807 7.60891 29.2411C7.55149 29.4017 7.49802 29.5635 7.44854 29.7267C7.39905 29.8898 7.3536 30.054 7.31217 30.2194C7.27075 30.3848 7.23341 30.551 7.20015 30.7183C7.16689 30.8854 7.13776 31.0534 7.11275 31.222C7.08773 31.3906 7.06687 31.5597 7.05016 31.7294C7.03344 31.899 7.02091 32.069 7.01255 32.2393C7.00418 32.4096 7 32.5799 7 32.7504C7 32.9208 7.00418 33.0913 7.01255 33.2616C7.02091 33.4319 7.03344 33.6017 7.05016 33.7715C7.06687 33.9411 7.08773 34.1102 7.11275 34.2789C7.13776 34.4475 7.16689 34.6154 7.20015 34.7827C7.23341 34.9498 7.27075 35.1161 7.31217 35.2815C7.3536 35.4468 7.39905 35.6111 7.44854 35.7742C7.49802 35.9374 7.55149 36.0992 7.60891 36.2597C7.66635 36.4202 7.72768 36.5792 7.79292 36.7368C7.85816 36.8942 7.92722 37.05 8.00011 37.2041C8.073 37.3582 8.14963 37.5105 8.22998 37.6609C8.31035 37.8111 8.39435 37.9595 8.482 38.1056C8.56964 38.2518 8.66082 38.3959 8.75553 38.5376C8.85024 38.6794 8.94836 38.8187 9.04993 38.9557C9.15148 39.0926 9.25634 39.2269 9.36449 39.3587C9.47264 39.4905 9.58395 39.6195 9.69843 39.7459C9.81291 39.8722 9.93043 39.9957 10.051 40.1161C10.1715 40.2367 10.295 40.3542 10.4213 40.4687C10.5476 40.5832 10.6766 40.6945 10.8084 40.8026C10.9402 40.9107 11.0745 41.0156 11.2115 41.1171C11.3484 41.2187 11.4877 41.3168 11.6295 41.4116C11.7712 41.5063 11.9152 41.5975 12.0614 41.685C12.2077 41.7727 12.356 41.8568 12.5063 41.9371C12.6566 42.0175 12.8089 42.0941 12.963 42.167C13.1171 42.2399 13.2729 42.3089 13.4304 42.3743C13.5879 42.4394 13.7469 42.5007 13.9074 42.5582C14.0679 42.6156 14.2298 42.669 14.3929 42.7186C14.556 42.768 14.7203 42.8135 14.8856 42.8549C15.051 42.8963 15.2173 42.9337 15.3845 42.9669C15.5517 43.0002 15.7196 43.0294 15.8882 43.0543C16.0569 43.0794 16.226 43.1003 16.3957 43.1169C16.5653 43.1337 16.7353 43.1463 16.9056 43.1546C17.0758 43.1629 17.2462 43.1672 17.4167 43.1672H34.0834V32.7504H27.8333Z"
+		fill="white"
+	/>
+	<path
+		d="M34.0833 43.1667C42.1376 43.1667 48.6668 36.6376 48.6668 28.5833C48.6668 20.5291 42.1376 14 34.0833 14C26.0293 14 19.5 20.5291 19.5 28.5833C19.5 36.6376 26.0293 43.1667 34.0833 43.1667Z"
+		fill="white"
+	/>
+	<defs>
+		<linearGradient
+			id="paint0_linear_14205_5880"
+			x1="56"
+			y1="32.6667"
+			x2="-1.44172e-06"
+			y2="32.6667"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop offset="0.12998" stop-color="#A033FF" />
+			<stop offset="0.610381" stop-color="#0094FF" />
+			<stop offset="1" stop-color="#4FB500" />
+		</linearGradient>
+		<linearGradient
+			id="paint1_linear_14205_5880"
+			x1="25.6667"
+			y1="17.5"
+			x2="8.16666"
+			y2="52.5"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD600" stop-opacity="0" />
+			<stop offset="0.563347" stop-color="#FFC700" />
+		</linearGradient>
+		<linearGradient
+			id="paint2_linear_14205_5880"
+			x1="30.3333"
+			y1="32.6667"
+			x2="50.1667"
+			y2="53.6667"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop offset="0.0297327" stop-color="#FF3B30" stop-opacity="0" />
+			<stop offset="0.842824" stop-color="#E73B2D" />
+		</linearGradient>
+	</defs>
+</svg>
diff --git a/src/lib/components/icons/Tmail.svelte b/src/lib/components/icons/Tmail.svelte
@@ -0,0 +1,63 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="56" height="56" rx="16" fill="url(#paint0_linear_14205_5872)" />
+	<rect width="56" height="56" rx="16" fill="url(#paint1_linear_14205_5872)" />
+	<rect width="56" height="56" rx="16" fill="url(#paint2_linear_14205_5872)" />
+	<rect width="56" height="56" rx="16" fill="url(#paint3_linear_14205_5872)" />
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M6.875 23.7906C6.875 22.1334 7.64831 20.5711 8.96605 19.5662L24.2784 7.88873C26.1811 6.43773 28.8189 6.43773 30.7216 7.88873L46.034 19.5662C47.3517 20.5711 48.125 22.1334 48.125 23.7906V41.7497C48.125 45.2706 45.2707 48.1248 41.7498 48.1248H13.2502C9.72926 48.1248 6.875 45.2706 6.875 41.7497V23.7906ZM11.4583 41.5058V23.4079L25.0619 32.9353C26.5256 33.9604 28.4744 33.9604 29.9381 32.9353L43.5417 23.4079V41.5058C43.5417 42.6794 42.5902 43.6308 41.4166 43.6308H13.5834C12.4098 43.6308 11.4583 42.6794 11.4583 41.5058ZM20.625 14.4199H34.375V17.7904H29.2188V27.9021H25.7812V17.7904H20.625V14.4199Z"
+		fill="white"
+	/>
+	<defs>
+		<linearGradient
+			id="paint0_linear_14205_5872"
+			x1="28"
+			y1="0"
+			x2="28"
+			y2="56"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#2C942B" />
+			<stop offset="0.582834" stop-color="#D0CC01" />
+			<stop offset="1" stop-color="#FEC303" />
+		</linearGradient>
+		<linearGradient
+			id="paint1_linear_14205_5872"
+			x1="3.20746e-07"
+			y1="42.4058"
+			x2="55.1884"
+			y2="42.4058"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFCF01" stop-opacity="0" />
+			<stop offset="0.57659" stop-color="#F05A2B" />
+			<stop offset="1" stop-color="#E90B00" />
+		</linearGradient>
+		<linearGradient
+			id="paint2_linear_14205_5872"
+			x1="49.5072"
+			y1="3.65217"
+			x2="16.8406"
+			y2="40.7826"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop offset="0.0103405" stop-color="#0394F7" />
+			<stop offset="0.177129" stop-color="#0693F3" stop-opacity="0.88" />
+			<stop offset="0.504933" stop-color="#0B92EE" stop-opacity="0.39" />
+			<stop offset="1" stop-color="#E84232" stop-opacity="0" />
+		</linearGradient>
+		<linearGradient
+			id="paint3_linear_14205_5872"
+			x1="1.42029"
+			y1="5.27536"
+			x2="25.971"
+			y2="33.0725"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop offset="0.0291436" stop-color="#2B9629" />
+			<stop offset="0.449248" stop-color="#4BBC06" stop-opacity="0.25" />
+			<stop offset="1" stop-color="#0792F7" stop-opacity="0" />
+		</linearGradient>
+	</defs>
+</svg>