ui: Auth - Username / Password - UI
This commit is contained in:
parent
f459e873cd
commit
0c7233f077
@ -4,7 +4,7 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"dev": "vite dev --host 0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -2,15 +2,53 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
.poppins-light {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.poppins-regular {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.poppins-medium {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.poppins-semibold {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
html {
|
||||
@apply poppins-regular text-base text-black;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply cursor-pointer flex items-center gap-2
|
||||
rounded-md px-3 py-2
|
||||
text-sm font-semibold text-white shadow-sm
|
||||
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
|
||||
@apply cursor-pointer flex items-center justify-center gap-2;
|
||||
@apply rounded-lg px-4 h-12 text-white;
|
||||
@apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-purple-600 hover:bg-purple-400 focus-visible:outline-purple-500;
|
||||
@apply bg-purple-900 text-purple-50 hover:bg-purple-600 focus-visible:outline-purple-600;
|
||||
}
|
||||
|
||||
.input{
|
||||
@apply block w-full h-12 rounded-lg border border-gray-300 text-gray-900;
|
||||
@apply placeholder:text-gray-500;
|
||||
@apply focus:border-purple-900 focus:ring-1 focus:ring-inset focus:ring-transparent;
|
||||
}
|
||||
|
||||
.label{
|
||||
@apply block text-black;
|
||||
}
|
||||
}
|
||||
|
@ -1,13 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-full bg-gray-50">
|
||||
<html lang="en" class="h-full bg-gray-100">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GB Light Control System</title>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" class="h-full">
|
||||
<body data-sveltekit-preload-data="hover" class="h-full antialiased">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -2,38 +2,31 @@
|
||||
import { auth } from '$lib/client/stores/auth';
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div class="flex min-h-full flex-col justify-center py-12 px-6 lg:px-8">
|
||||
<div class="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<img class="mx-auto h-10 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
|
||||
<h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your account</h2>
|
||||
<img class="mx-auto w-64" src="../img/logo.svg" alt="Gardens by the Bay">
|
||||
<h2 class="mt-4 text-center text-2xl font-semibold leading-9 tracking-tight text-gray-900">Sign in to your account</h2>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
|
||||
<div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
|
||||
<div class="mt-6 mx-auto w-full max-w-md">
|
||||
<div class="bg-white p-6 lg:py-12 rounded-lg sm:px-12 shadow-sm">
|
||||
<form class="space-y-6" on:submit|preventDefault={auth.signIn}>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Organisation</label>
|
||||
<label for="email" class="label">Username</label>
|
||||
<div class="mt-2">
|
||||
<input id="organisation" name="organisation" type="text" autocomplete="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
<input id="login" name="login" type="text" autocomplete="email" class="input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Login</label>
|
||||
<label for="password" class="label">Password</label>
|
||||
<div class="mt-2">
|
||||
<input id="login" name="login" type="text" autocomplete="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
<input id="password" name="password" type="password" autocomplete="current-password" class="input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
|
||||
<div class="mt-2">
|
||||
<input id="password" name="password" type="password" autocomplete="current-password" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" 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">Sign in</button>
|
||||
<button type="submit" class="btn btn-primary w-full">Sign in</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
1
apps/front/static/img/logo.svg
Normal file
1
apps/front/static/img/logo.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 42 KiB |
Loading…
Reference in New Issue
Block a user