Skip to content

GitLab

Commit 047c9fe8 authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

fix: styling

parent 50f6addd
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 101 deletions
src/lib/components/common/Spinner.svelte
View file @ 047c9fe8
<script lang="ts"> <script lang="ts">
export let className: string = 'text-white'; export let className: string = '';
export let theme: 'blue' | 'white' | 'black' = 'white';
</script> </script>
<div class="flex justify-center text-center {className}"> <div class="flex justify-center text-center {className}">
<svg <svg class="size-5" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
class="animate-spin -ml-1 mr-3 h-5 w-5 {theme === 'blue' ><style>
? 'text-sky-600' .spinner_ajPY {
: theme === 'white' transform-origin: center;
? 'text-white' animation: spinner_AtaB 0.75s infinite linear;
: 'text-gray-600'} " }
xmlns="http://www.w3.org/2000/svg" @keyframes spinner_AtaB {
fill="none" 100% {
viewBox="0 0 24 24" transform: rotate(360deg);
}
}
</style><path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/><path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
class="spinner_ajPY"
/></svg
> >
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div> </div>
src/routes/auth/+page.svelte
View file @ 047c9fe8
<script> <script>
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { userSignIn, userSignUp } from '$lib/apis/auths'; import { userSignIn, userSignUp } from '$lib/apis/auths';
import Spinner from '$lib/components/common/Spinner.svelte';
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { WEBUI_NAME, config, user } from '$lib/stores'; import { WEBUI_NAME, config, user } from '$lib/stores';
import { onMount, getContext } from 'svelte'; import { onMount, getContext } from 'svelte';
...@@ -93,109 +94,117 @@ ...@@ -93,109 +94,117 @@
</div> --> </div> -->
<div class="w-full sm:max-w-lg px-4 min-h-screen flex flex-col"> <div class="w-full sm:max-w-lg px-4 min-h-screen flex flex-col">
{#if ($config?.trusted_header_auth ?? false)} {#if $config?.trusted_header_auth ?? false}
<div class=" my-auto pb-10 w-full"> <div class=" my-auto pb-10 w-full">
<div class=" text-xl sm:text-2xl font-bold"> <div
{$i18n.t('Signing in')} class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-bold dark:text-gray-200"
{$i18n.t('to')} >
{$WEBUI_NAME} <div>
{$i18n.t('Signing in')}
{$i18n.t('to')}
{$WEBUI_NAME}
</div>
<div>
<Spinner />
</div>
</div> </div>
</div> </div>
{:else} {:else}
<div class=" my-auto pb-10 w-full"> <div class=" my-auto pb-10 w-full">
<form <form
class=" flex flex-col justify-center bg-white py-6 sm:py-16 px-6 sm:px-16 rounded-2xl" class=" flex flex-col justify-center bg-white py-6 sm:py-16 px-6 sm:px-16 rounded-2xl"
on:submit|preventDefault={() => { on:submit|preventDefault={() => {
submitHandler(); submitHandler();
}} }}
> >
<div class=" text-xl sm:text-2xl font-bold"> <div class=" text-xl sm:text-2xl font-bold">
{mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Sign up')} {mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Sign up')}
{$i18n.t('to')} {$i18n.t('to')}
{$WEBUI_NAME} {$WEBUI_NAME}
</div>
{#if mode === 'signup'}
<div class=" mt-1 text-xs font-medium text-gray-500">
ⓘ {$WEBUI_NAME}
{$i18n.t(
'does not make any external connections, and your data stays securely on your locally hosted server.'
)}
</div> </div>
{/if}
<div class="flex flex-col mt-4">
{#if mode === 'signup'} {#if mode === 'signup'}
<div> <div class=" mt-1 text-xs font-medium text-gray-500">
<div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Name')}</div> ⓘ {$WEBUI_NAME}
{$i18n.t(
'does not make any external connections, and your data stays securely on your locally hosted server.'
)}
</div>
{/if}
<div class="flex flex-col mt-4">
{#if mode === 'signup'}
<div>
<div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Name')}</div>
<input
bind:value={name}
type="text"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
autocomplete="name"
placeholder={$i18n.t('Enter Your Full Name')}
required
/>
</div>
<hr class=" my-3" />
{/if}
<div class="mb-2">
<div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Email')}</div>
<input <input
bind:value={name} bind:value={email}
type="text" type="email"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm" class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
autocomplete="name" autocomplete="email"
placeholder={$i18n.t('Enter Your Full Name')} placeholder={$i18n.t('Enter Your Email')}
required required
/> />
</div> </div>
<hr class=" my-3" /> <div>
{/if} <div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Password')}</div>
<input
<div class="mb-2"> bind:value={password}
<div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Email')}</div> type="password"
<input class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
bind:value={email} placeholder={$i18n.t('Enter Your Password')}
type="email" autocomplete="current-password"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm" required
autocomplete="email" />
placeholder={$i18n.t('Enter Your Email')} </div>
required
/>
</div>
<div>
<div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Password')}</div>
<input
bind:value={password}
type="password"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
placeholder={$i18n.t('Enter Your Password')}
autocomplete="current-password"
required
/>
</div> </div>
</div>
<div class="mt-5">
<button
class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-3 transition"
type="submit"
>
{mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Create Account')}
</button>
<div class=" mt-4 text-sm text-center">
{mode === 'signin'
? $i18n.t("Don't have an account?")
: $i18n.t('Already have an account?')}
<div class="mt-5">
<button <button
class=" font-medium underline" class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-3 transition"
type="button" type="submit"
on:click={() => {
if (mode === 'signin') {
mode = 'signup';
} else {
mode = 'signin';
}
}}
> >
{mode === 'signin' ? $i18n.t('Sign up') : $i18n.t('Sign in')} {mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Create Account')}
</button> </button>
<div class=" mt-4 text-sm text-center">
{mode === 'signin'
? $i18n.t("Don't have an account?")
: $i18n.t('Already have an account?')}
<button
class=" font-medium underline"
type="button"
on:click={() => {
if (mode === 'signin') {
mode = 'signup';
} else {
mode = 'signin';
}
}}
>
{mode === 'signin' ? $i18n.t('Sign up') : $i18n.t('Sign in')}
</button>
</div>
</div> </div>
</div> </form>
</form> </div>
</div>
{/if} {/if}
</div> </div>
</div> </div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment