119 lines
3.5 KiB
Svelte
119 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import logo from "$lib/assets/logo-txt.png"
|
|
import { auth, setToken } from '$lib/state/auth.svelte';
|
|
import { goto } from '$app/navigation';
|
|
import { authApi, type OIDCProvider } from "$lib/api/endpoints/auth"
|
|
import { validateEmail } from "$lib/utilities/validators"
|
|
import { onMount } from "svelte"
|
|
|
|
type Credentials = {
|
|
email: string
|
|
validemail: boolean
|
|
password : string
|
|
}
|
|
|
|
let credentials: Credentials = $state({
|
|
email: "",
|
|
password: "",
|
|
validemail: false
|
|
})
|
|
|
|
let providers: OIDCProvider[] = $state([])
|
|
|
|
onMount(() => {
|
|
authApi.oidcProviders()
|
|
.then((res) => { providers = res ?? [] })
|
|
.catch(() => { providers = [] })
|
|
})
|
|
|
|
const oidcLogin = (providerId: string) => {
|
|
window.location.href = authApi.oidcLoginUrl(providerId)
|
|
}
|
|
|
|
const formSubmitEmail = () => {
|
|
credentials.validemail = validateEmail(credentials.email)
|
|
}
|
|
|
|
const formSubmitPass = (e: Event) => {
|
|
e.preventDefault()
|
|
authApi.login(credentials)
|
|
.then((res)=>{
|
|
auth.user = res.user
|
|
setToken(res.accessToken)
|
|
goto("/")
|
|
})
|
|
.catch((err)=>{
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="h-full w-full flex items-center public">
|
|
<div class="m-auto w-96 max-w-full p-4">
|
|
<img src={logo} class="h-10 mb-4" alt="logo"/>
|
|
<h1>Identifiez-vous ...</h1>
|
|
{#if !credentials.validemail}
|
|
<form onsubmit={formSubmitEmail}>
|
|
<div class="flex">
|
|
<label for="email" class="block mb-2 flex-1">Email</label>
|
|
<a href="/recover-password" class="text-xs ">Mot de passe oublié ?</a>
|
|
</div>
|
|
<div class="flex flex-row">
|
|
<input
|
|
type="text"
|
|
bind:value={credentials.email}
|
|
class="textinput mr-1 flex-1"
|
|
autofocus
|
|
/>
|
|
<button class="bt small" title="page suivante">
|
|
<i class="icon-right-big"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="my-4 text-xs">
|
|
<a href="/register">Pas encore de compte ? Incrivez-vous.</a>
|
|
</div>
|
|
|
|
|
|
{:else}
|
|
<form onsubmit={formSubmitPass}>
|
|
<div class="flex">
|
|
<label for="email" class="block mb-2 flex-1">Mot de passe</label>
|
|
</div>
|
|
<div class="flex flex-row">
|
|
<input
|
|
type="password"
|
|
bind:value={credentials.password}
|
|
class="textinput mr-1 flex-1"
|
|
autofocus
|
|
/>
|
|
<button class="bt small">
|
|
Entrer
|
|
</button>
|
|
</div>
|
|
<a href="/login" class="text-xs" onclick={()=>{credentials.validemail=false}}>← Retour</a>
|
|
</form>
|
|
{/if}
|
|
|
|
|
|
{#if providers.length > 0}
|
|
<hr class="my-4">
|
|
|
|
<div class="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4">
|
|
{#each providers as provider (provider.id)}
|
|
<button
|
|
class="bt p-5 text-center"
|
|
title="Connexion avec {provider.label}"
|
|
onclick={() => oidcLogin(provider.id)}
|
|
>
|
|
{provider.label}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
</div>
|
|
</div>
|