Add mobile-first styling to layouts, auth, and user pages
- Consolidated navbar with hamburger menu for mobile - Responsive styling for root/protected layouts and auth pages - Mobile-friendly account, dashboard, license-key, and setup pages
This commit is contained in:
NeilClack
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { authClient } from '$lib/auth-client';
|
||||
import { page } from '$app/state';
|
||||
import { resolve } from '$app/paths';
|
||||
import Window from '$lib/components/containers/Window.svelte';
|
||||
let email = $state('');
|
||||
let password = $state('');
|
||||
@@ -10,7 +11,7 @@
|
||||
let verified = $derived(page.url.searchParams.get('verified') === 'true');
|
||||
|
||||
async function handleSubmit() {
|
||||
const { data, error: authError } = await authClient.signIn.email({
|
||||
const { error: authError } = await authClient.signIn.email({
|
||||
email,
|
||||
password,
|
||||
rememberMe
|
||||
@@ -26,47 +27,88 @@
|
||||
</script>
|
||||
|
||||
<Window>
|
||||
<div class="dark:text-gray-100">
|
||||
{#if verified}
|
||||
<div
|
||||
class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
|
||||
>
|
||||
Your email has been verified. You can now log in.
|
||||
</div>
|
||||
{/if}
|
||||
{#if error}
|
||||
<span class="text-red-600 dark:text-gray-300">{error}</span>
|
||||
{/if}
|
||||
<form onsubmit={handleSubmit} class="my-6 flex flex-col items-center justify-center">
|
||||
<p>Login</p>
|
||||
<input type="email" placeholder="Email Address" bind:value={email} required class="my-2" />
|
||||
<input type="password" placeholder="Password" bind:value={password} required class="my-2" />
|
||||
<button
|
||||
class="mt-4 rounded bg-blue-200 px-4 py-2 dark:bg-gray-700 dark:text-gray-100"
|
||||
type="submit">Sign In</button
|
||||
>
|
||||
</form>
|
||||
<div class="mt-2 flex flex-col items-center gap-2">
|
||||
<a
|
||||
href="/forgot-password"
|
||||
class="text-sm text-blue-600 hover:text-blue-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>Forgot Password?</a
|
||||
>
|
||||
<a
|
||||
href="/register"
|
||||
class="text-sm text-blue-600 hover:text-blue-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>Don't have an account? Register</a
|
||||
>
|
||||
{#if verified}
|
||||
<div class="mb-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800" role="status">
|
||||
Your email has been verified. You can now log in.
|
||||
</div>
|
||||
<div class="mt-4 flex flex-col items-center justify-center">
|
||||
<span>Or</span>
|
||||
<button
|
||||
onclick={async () => {
|
||||
await authClient.signIn.social({ provider: 'google', callbackURL: '/account' });
|
||||
}}
|
||||
>
|
||||
<img src="light/web_light_sq_SI.svg" alt="Sign In with Google" />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSubmit} class="flex flex-col gap-4">
|
||||
<h1 class="text-2xl font-bold text-slate-900">Login</h1>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="email" class="text-sm font-medium text-slate-700"> Email Address </label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
bind:value={email}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="password" class="text-sm font-medium text-slate-700"> Password </label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
bind:value={password}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center gap-2 text-sm text-slate-600">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={rememberMe}
|
||||
class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
Remember me
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="mt-1 flex h-11 w-full items-center justify-center rounded-lg bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 flex flex-col gap-2 text-center text-sm">
|
||||
<a href={resolve('/forgot-password')} class="text-indigo-600 hover:text-indigo-700">
|
||||
Forgot Password?
|
||||
</a>
|
||||
<span class="text-slate-500">
|
||||
Don't have an account?
|
||||
<a href={resolve('/register')} class="font-medium text-indigo-600 hover:text-indigo-700">
|
||||
Register
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 border-t border-slate-200 pt-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-px flex-1 bg-slate-200"></div>
|
||||
<span class="text-sm text-slate-500">Or</span>
|
||||
<div class="h-px flex-1 bg-slate-200"></div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await authClient.signIn.social({ provider: 'google', callbackURL: '/account' });
|
||||
}}
|
||||
class="mx-auto mt-4 flex h-11 items-center justify-center rounded-lg bg-white hover:bg-slate-50"
|
||||
>
|
||||
<img src="light/web_light_sq_SI.svg" alt="Sign In with Google" class="" />
|
||||
</button>
|
||||
</div>
|
||||
</Window>
|
||||
|
||||
Reference in New Issue
Block a user