spy4x/gb-lux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: Auth - Username / Password - UI

Browse Source
This commit is contained in:
Eirene 2024-07-28 17:27:54 +08:00
parent f459e873cd
commit 0c7233f077
6 changed files with 2057 additions and 1669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/front/package.json
View File

@ -4,7 +4,7 @@
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev --host 0.0.0.0",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

3641
apps/front/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

48
apps/front/src/app.css
View File

@ -2,15 +2,53 @@
@tailwind components; @tailwind components;
@tailwind utilities; @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 { @layer components {
.btn { .btn {
@apply cursor-pointer flex items-center gap-2 @apply cursor-pointer flex items-center justify-center gap-2;
rounded-md px-3 py-2 @apply rounded-lg px-4 h-12 text-white;
text-sm font-semibold text-white shadow-sm @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
} }
.btn-primary { .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;
} }
} }

7
apps/front/src/app.html
View File

@ -1,13 +1,16 @@
<!doctype html> <!doctype html>
<html lang="en" class="h-full bg-gray-50"> <html lang="en" class="h-full bg-gray-100">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>GB Light Control System</title> <title>GB Light Control System</title>
%sveltekit.head% %sveltekit.head%
</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> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

27
apps/front/src/lib/client/components/login.svelte
View File

@ -2,38 +2,31 @@
import { auth } from '$lib/client/stores/auth'; import { auth } from '$lib/client/stores/auth';
</script> </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"> <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"> <img class="mx-auto w-64" src="../img/logo.svg" alt="Gardens by the Bay">
<h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your account</h2> <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>
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]"> <div class="mt-6 mx-auto w-full max-w-md">
<div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12"> <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}> <form class="space-y-6" on:submit|preventDefault={auth.signIn}>
<div> <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"> <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> </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"> <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> </div>
<div> <div>
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label> <button type="submit" class="btn btn-primary w-full">Sign in</button>
<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>
</div> </div>
</form> </form>
</div> </div>

1
apps/front/static/img/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB