add alert to login

fivaz · Jan 12, 2024 · dc13547 · dc13547
1 parent 6224932
commit dc13547
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 16 deletions.
diff --git a/src/lib/components/alert/Alert.svelte b/src/lib/components/alert/Alert.svelte
@@ -1,28 +1,75 @@
 <script lang="ts">
-	import { CheckCircle, XMark } from '@steeze-ui/heroicons';
+	import {
+		CheckCircle,
+		ExclamationTriangle,
+		InformationCircle,
+		XCircle,
+		XMark,
+	} from '@steeze-ui/heroicons';
 	import { Icon } from '@steeze-ui/svelte-icon';
+	import classnames from 'classnames';
 	import { createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	export let isVisible: boolean;
 
+	export let type: 'warning' | 'error' | 'info' | 'success';
+
+	const typeElements = {
+		warning: {
+			background: 'bg-yellow-50',
+			iconColor: 'text-yellow-400',
+			message: 'text-yellow-800',
+			button: 'bg-yellow-50 text-yellow-500',
+			icon: ExclamationTriangle,
+		},
+		error: {
+			background: 'bg-red-50',
+			iconColor: 'text-red-400',
+			message: 'text-red-800',
+			button: 'bg-red-50 text-red-500',
+			icon: XCircle,
+		},
+		info: {
+			background: 'bg-blue-50',
+			iconColor: 'text-blue-400',
+			message: 'text-blue-800',
+			button: 'bg-blue-50 text-blue-500',
+			icon: InformationCircle,
+		},
+		success: {
+			background: 'bg-green-50',
+			iconColor: 'text-green-400',
+			message: 'text-green-800',
+			button: 'bg-green-50 text-green-500',
+			icon: CheckCircle,
+		},
+	};
+
 	const dispatch = createEventDispatcher();
 </script>
 
 {#if isVisible}
-	<div transition:fade class="rounded-md bg-green-50 p-4">
+	<div transition:fade class={classnames(typeElements[type].background, 'rounded-md p-4')}>
 		<div class="flex">
 			<div class="flex-shrink-0">
-				<Icon src={CheckCircle} class="h-5 w-5 text-green-400" aria-hidden="true" />
+				<Icon
+					src={typeElements[type].icon}
+					class={classnames(typeElements[type].button, 'h-5 w-5')}
+					aria-hidden="true"
+				/>
 			</div>
 			<div class="ml-3">
-				<p class="text-sm font-medium text-green-800"><slot /></p>
+				<p class={classnames(typeElements[type].button, 'text-sm font-medium')}><slot /></p>
 			</div>
 			<div class="ml-auto pl-3">
 				<div class="-mx-1.5 -my-1.5">
 					<button
 						type="button"
-						class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+						class={classnames(
+							typeElements[type].button,
+							'inline-flex rounded-md p-1.5 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50',
+						)}
 						on:click={() => dispatch('close')}
 					>
 						<span class="sr-only">Dismiss</span>

diff --git a/src/lib/components/alert/alert.stories.svelte b/src/lib/components/alert/alert.stories.svelte
@@ -16,4 +16,50 @@
 	<Alert {...args} />
 </Template>
 
-<Story name="Primary" args={{}} />
+<Story
+	name="Success"
+	args={{
+		isVisible: true,
+		type: 'success',
+	}}
+	on:close={() => console.log('close')}
+	let:args
+>
+	<Alert {...args}>Successfully uploaded</Alert>
+</Story>
+
+<Story
+	name="Info"
+	args={{
+		isVisible: true,
+		type: 'info',
+	}}
+	on:close={() => console.log('close')}
+	let:args
+>
+	<Alert {...args}>A new software update is available. See what’s new in version 2.0.4.</Alert>
+</Story>
+
+<Story
+	name="Warning"
+	args={{
+		isVisible: true,
+		type: 'warning',
+	}}
+	on:close={() => console.log('close')}
+	let:args
+>
+	<Alert {...args}>You have no credits left</Alert>
+</Story>
+
+<Story
+	name="Error"
+	args={{
+		isVisible: true,
+		type: 'error',
+	}}
+	on:close={() => console.log('close')}
+	let:args
+>
+	<Alert {...args}>There were 2 errors with your submission</Alert>
+</Story>
diff --git a/src/routes/dashboard/profile/profile/Profile.svelte b/src/routes/dashboard/profile/profile/Profile.svelte
@@ -31,7 +31,11 @@
 		</h2>
 	</div>
 	<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
-		<Alert isVisible={!!form?.success} on:close={() => (form ? (form.success = false) : null)}>
+		<Alert
+			type="success"
+			isVisible={!!form?.success}
+			on:close={() => (form ? (form.success = false) : null)}
+		>
 			Profile successfully edited
 		</Alert>
 		<div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">

diff --git a/src/routes/login/login/Login.svelte b/src/routes/login/login/Login.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import Alert from '$lib/components/alert/Alert.svelte';
+	import Button from '$lib/components/button/Button.svelte';
 	import { registerRoute } from '$lib/consts';
 	import type { ActionData } from '../../../../.svelte-kit/types/src/routes/login/$types';
 
 	export let form: ActionData | null = null;
+	let isLoading: boolean = false;
 </script>
 
 <div class="flex min-h-full flex-1">
@@ -28,13 +31,16 @@
 				</p>
 			</div>
 
-			<div class="mt-10">
-				<div>
+			<div class="mt-5">
+				<Alert
+					type="error"
+					isVisible={!!form?.error}
+					on:close={() => (form ? (form.error = '') : null)}
+				>
+					{form?.error}
+				</Alert>
+				<div class="mt-5">
 					<form class="space-y-6" method="POST" use:enhance>
-						{#if form?.error}
-							<p class="text-center text-red-500">{form?.error}</p>
-						{/if}
-
 						<div>
 							<label for="username" class="block text-sm font-medium leading-6 text-gray-900">
 								Email address
@@ -85,12 +91,14 @@
 						</div>
 
 						<div>
-							<button
-								class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+							<Button
+								{isLoading}
+								on:click={() => (isLoading = true)}
 								type="submit"
+								class="w-full leading-6"
 							>
 								Sign in
-							</button>
+							</Button>
 						</div>
 					</form>
 				</div>