tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

chore: auth page refac

Browse source
This commit is contained in:
Timothy J. Baek 2023-12-26 11:22:09 -08:00
parent 5304ddaa82
commit 753327522a
2 changed files with 113 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/lib/apis/auths/index.ts Normal file
View file

@ -0,0 +1,63 @@
import { WEBUI_API_BASE_URL } from '$lib/constants';
export const userSignIn = async (email: string, password: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/auths/signin`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
password: password
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
error = error.detail;
return null;
});
if (error) {
throw error;
}
return res;
};
export const userSignUp = async (name: string, email: string, password: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/auths/signup`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: name,
email: email,
password: password
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
error = error.detail;
return null;
});
if (error) {
throw error;
}
return res;
};

121
src/routes/auth/+page.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { userSignIn, userSignUp } from '$lib/apis/auths';
import { WEBUI_API_BASE_URL } from '$lib/constants'; import { WEBUI_API_BASE_URL } from '$lib/constants';
import { config, user } from '$lib/stores'; import { config, user } from '$lib/stores';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@ -12,76 +13,51 @@
let email = ''; let email = '';
let password = ''; let password = '';
const signInHandler = async () => { const setSessionUser = async (sessionUser) => {
const res = await fetch(`${WEBUI_API_BASE_URL}/auths/signin`, { if (sessionUser) {
method: 'POST', console.log(sessionUser);
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
password: password
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
toast.error(error.detail);
return null;
});
if (res) {
console.log(res);
toast.success(`You're now logged in.`); toast.success(`You're now logged in.`);
localStorage.token = res.token; localStorage.token = sessionUser.token;
await user.set(res); await user.set(sessionUser);
goto('/'); goto('/');
} }
}; };
const signUpHandler = async () => { const signInHandler = async () => {
const res = await fetch(`${WEBUI_API_BASE_URL}/auths/signup`, { const sessionUser = await userSignIn(email, password).catch((error) => {
method: 'POST', toast.error(error);
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: name,
email: email,
password: password
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
toast.error(error.detail);
return null; return null;
}); });
if (res) { await setSessionUser(sessionUser);
console.log(res); };
toast.success(`Account creation successful.`);
localStorage.token = res.token; const signUpHandler = async () => {
await user.set(res); const sessionUser = await userSignUp(name, email, password).catch((error) => {
goto('/'); toast.error(error);
return null;
});
await setSessionUser(sessionUser);
};
const submitHandler = async () => {
if (mode === 'signin') {
await signInHandler();
} else {
await signUpHandler();
} }
}; };
onMount(async () => { onMount(async () => {
if ($config === null || !$config.auth || ($config.auth && $user !== undefined)) { if ($user !== undefined) {
await goto('/'); await goto('/');
} }
loaded = true; loaded = true;
}); });
</script> </script>
{#if loaded && $config && $config.auth} {#if loaded}
<div class="fixed m-10 z-50"> <div class="fixed m-10 z-50">
<div class="flex space-x-2"> <div class="flex space-x-2">
<div class=" self-center"> <div class=" self-center">
@ -91,7 +67,7 @@
</div> </div>
<div class=" bg-white min-h-screen w-full flex justify-center font-mona"> <div class=" bg-white min-h-screen w-full flex justify-center font-mona">
<div class="hidden lg:flex lg:flex-1 px-10 md:px-16 w-full bg-yellow-50 justify-center"> <!-- <div class="hidden lg:flex lg:flex-1 px-10 md:px-16 w-full bg-yellow-50 justify-center">
<div class=" my-auto pb-16 text-left"> <div class=" my-auto pb-16 text-left">
<div> <div>
<div class=" font-bold text-yellow-600 text-4xl"> <div class=" font-bold text-yellow-600 text-4xl">
@ -103,66 +79,65 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="w-full max-w-xl px-10 md:px-16 bg-white min-h-screen flex flex-col"> <div class="w-full max-w-lg px-10 md:px-16 bg-white min-h-screen flex flex-col">
<div class=" my-auto pb-10 w-full"> <div class=" my-auto pb-10 w-full">
<form <form
class=" flex flex-col justify-center" class=" flex flex-col justify-center"
on:submit|preventDefault={() => { on:submit|preventDefault={() => {
if (mode === 'signin') { submitHandler();
signInHandler();
} else {
signUpHandler();
}
}} }}
> >
<div class=" text-2xl md:text-3xl font-semibold"> <div class=" text-xl md:text-2xl font-bold">
{mode === 'signin' ? 'Sign in' : 'Sign up'} to Ollama Web UI {mode === 'signin' ? 'Sign in' : 'Sign up'} to Ollama Web UI
</div> </div>
<hr class="my-8" /> <div class="flex flex-col mt-4">
<div class="flex flex-col space-y-4">
{#if mode === 'signup'} {#if mode === 'signup'}
<div> <div>
<div class=" text-sm font-bold text-left mb-2">Name</div> <div class=" text-sm font-semibold text-left mb-1">Name</div>
<input <input
bind:value={name} bind:value={name}
type="text" type="text"
class=" border px-5 py-4 rounded-2xl w-full text-sm" class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
autocomplete="name" autocomplete="name"
placeholder="Enter Your Full Name"
required required
/> />
</div> </div>
<hr class=" my-3" />
{/if} {/if}
<div> <div class="mb-2">
<div class=" text-sm font-bold text-left mb-2">Email</div> <div class=" text-sm font-semibold text-left mb-1">Email</div>
<input <input
bind:value={email} bind:value={email}
type="email" type="email"
class=" border px-5 py-4 rounded-2xl w-full text-sm" class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
autocomplete="email" autocomplete="email"
placeholder="Enter Your Email"
required required
/> />
</div> </div>
<div> <div>
<div class=" text-sm font-bold text-left mb-2">Password</div> <div class=" text-sm font-semibold text-left mb-1">Password</div>
<input <input
bind:value={password} bind:value={password}
type="password" type="password"
class=" border px-5 py-4 rounded-2xl w-full text-sm" class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
placeholder="Enter Your Password"
autocomplete="current-password" autocomplete="current-password"
required required
/> />
</div> </div>
</div> </div>
<div class="mt-8"> <div class="mt-5">
<button <button
class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-5 transition" class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-3 transition"
type="submit" type="submit"
> >
{mode === 'signin' ? 'Sign In' : 'Create Account'} {mode === 'signin' ? 'Sign In' : 'Create Account'}