90 lines
3.1 KiB
Svelte
90 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from "svelte";
|
|
import { dashBoardRequest } from "../../requests/auth.request";
|
|
import Section from "../../components/auth/Section.svelte";
|
|
import InfoForm from "../../components/auth/InfoForm.svelte";
|
|
import RoomList from "../../components/auth/RoomList.svelte";
|
|
import type { User } from "../../types/auth.type";
|
|
import type { Writable } from "svelte/store";
|
|
import { writable } from "svelte/store";
|
|
import PasswordForm from "../../components/auth/PasswordForm.svelte";
|
|
import { updatePassword, updateUserRequest } from "../../requests/auth.request.js";
|
|
import UserConfirm from "../../components/auth/UserConfirm.svelte";
|
|
import MdInfo from "svelte-icons/md/MdInfo.svelte";
|
|
import FaUsers from "svelte-icons/fa/FaUsers.svelte";
|
|
import FaUserLock from "svelte-icons/fa/FaUserLock.svelte";
|
|
import { goto } from "$app/navigation";
|
|
|
|
let u = "";
|
|
let p = "";
|
|
const user: Writable<User | null> = writable(null);
|
|
const { logout, username, isAuth, initialLoading } = getContext("auth");
|
|
|
|
$: !$initialLoading && $isAuth && dashBoardRequest().then((res) => {
|
|
|
|
user.set(res);
|
|
});
|
|
const { show, close } = getContext("modal");
|
|
const { success, error } = getContext("notif");
|
|
let passwordForm = null;
|
|
let infoForm = null;
|
|
|
|
$: !$initialLoading && !$isAuth && goto("/");
|
|
|
|
</script>
|
|
<svelte:head>
|
|
<title>Profil - {$user != null ? $user.username: ""}</title>
|
|
</svelte:head>
|
|
<div>
|
|
{#if $user != null}
|
|
<h1>Mon compte</h1>
|
|
<Section title="Mes informations" icon={MdInfo} onValidate={()=>{
|
|
if(infoForm == null) return
|
|
updateUserRequest($infoForm.summary).then(res=>{
|
|
user.update((o)=>{return {...o,...res}})
|
|
success("Mis a jour", "Informations mises à jour avec succès")
|
|
}).catch(()=>{
|
|
error("Erreur","Une erreur est survenue")
|
|
})
|
|
|
|
}} canValid={infoForm != null && $infoForm.valid}>
|
|
<InfoForm user={$user} bind:myForm={infoForm} />
|
|
</Section>
|
|
<Section title="Salles" icon={FaUsers}>
|
|
<RoomList rooms={$user.rooms} />
|
|
</Section>
|
|
<Section title="Sécurité" icon={FaUserLock} validate="Modifier mon mot de passe" onValidate={()=>{
|
|
show(UserConfirm, {onValidate: ( p )=>{
|
|
updatePassword({...$passwordForm.summary, old_password: p}).then((r)=>{
|
|
localStorage.setItem("token", r.access_token)
|
|
localStorage.setItem("refresh", r.refresh_token)
|
|
close()
|
|
success("Sécurité", "Mot de passe mises à jour avec succès")
|
|
}).catch((e)=>{
|
|
|
|
error("Sécurité","Une erreur est survenue")
|
|
})
|
|
}, validate: "Changer mon mot de passe", cancel: close, cancelMsg: "Garder le mot de passe actuel"})
|
|
|
|
}} canValid={passwordForm != null && $passwordForm.valid}>
|
|
<PasswordForm bind:myForm={passwordForm} />
|
|
</Section>
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import "../../mixins.scss";
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
margin-bottom: 20px;
|
|
@include down(800){
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
div {
|
|
padding: 7px 15px;
|
|
}
|
|
</style> |