login ui

src/lib/elements/Button.svelte

@@ -1,11 +1,24 @@
 <script lang="ts">
+	import { onMount } from 'svelte'
+
 	export let disabled = false
 	export let text = ''
 	export let classNames = ''
+	export let type: 'button' | 'submit' | 'reset' = 'button'
+
+	let buttonRef: HTMLButtonElement
+
+	onMount(() => {
+		if (buttonRef) {
+			buttonRef.type = type
+		}
+	})
 </script>
 
 <button
+	bind:this={buttonRef}
 	{disabled}
+	{type}
 	class="border border-gray-400 rounded-md text-teal-600 font-semibold px-3 py-1 w-fit disabled:text-opacity-60 {classNames}"
 	on:click
 >

src/lib/elements/Input.svelte

@@ -6,7 +6,6 @@
 	export let id: string = makeid(3)
 	export let value: string
 	export let type: string = 'number'
-	export let placeholder: string = ''
 	export let disabled: boolean = false
 	export let classNames: string = ''
 
@@ -24,11 +23,11 @@
 	{id}
 	{disabled}
 	class="input-field focus:!border-[1.5px] focus:!border-teal-500 focus:outline-none {classNames}"
-	{placeholder}
 	bind:value
 	on:keydown
 	on:focus
 	on:focus={() => ($focusedInputStore = inputRef)}
+	{...$$restProps}
 />
 
 <style lang="postcss">

src/routes/auth/login/+page.svelte

@@ -3,6 +3,16 @@
 	import Button from '$lib/elements/Button.svelte'
 	import Input from '$lib/elements/Input.svelte'
 	let email = ''
+	let otp = ''
+	let isOtpSent = false
+
+	const handleSendOTP = () => {
+		if (!email) return
+		isOtpSent = true
+	}
+	const verifyOTP = () => {
+		if (!otp) return
+	}
 </script>
 
 <svelte:head>
@@ -13,8 +23,25 @@
 	<h1 class="text-xl text-center">Login</h1>
 	<div class="w-full bg-gradient-to-r from-transparent via-slate-600/10 to-transparent p-[1px]" />
 
-	<div class="flex w-full flex-col gap-3 items-center">
-		<Input type="email" bind:value={email} classNames="!w-full" placeholder="Type your email" />
-		<Button text="Login with OTP" />
-	</div>
+	<form class="flex w-full flex-col gap-3 items-center">
+		{#if isOtpSent}
+			<Input
+				required
+				type="text"
+				bind:value={otp}
+				classNames="!w-full text-center"
+				placeholder="******"
+			/>
+			<Button type="submit" text="Login with OTP" on:click={verifyOTP} />
+		{:else}
+			<Input
+				required
+				type="email"
+				bind:value={email}
+				classNames="!w-full text-center"
+				placeholder="Type your email"
+			/>
+			<Button type="submit" text="Send OTP" on:click={handleSendOTP} />
+		{/if}
+	</form>
 </section>