diff --git a/index.html b/index.html index cd21ed8..e28377b 100644 --- a/index.html +++ b/index.html @@ -8,21 +8,6 @@
- - - - - - - diff --git a/src/App.tsx b/src/App.tsx index 32b74ac..d21929a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -45,8 +45,7 @@ export default function App() { ) } - const storedAuth = useMemo(() => getStoredAuthentication(), []) - const fetcher = useMemo(() => new Fetcher(storedAuth), [storedAuth]) + const fetcher = useMemo(() => new Fetcher(getStoredAuthentication()), []) const [user, setUser] = useState(null) const handleAuthSuccess = useCallback( @@ -247,7 +246,7 @@ function AppLayout() { interface UserContext { user: User | null - setUser: (user: User) => void + setUser: (user: User | null) => void } const SignedInUserContext = createContext(null) @@ -257,7 +256,7 @@ export function useAppFetcher() { return useContext(FetcherContext) } -export function useUser(): [User | null, (user: User) => void] { +export function useUser(): [User | null, (user: User | null) => void] { const { user, setUser } = useContext(SignedInUserContext)! return [user, setUser] } diff --git a/src/app/Fetcher.ts b/src/app/Fetcher.ts index 14b353e..55e8f44 100644 --- a/src/app/Fetcher.ts +++ b/src/app/Fetcher.ts @@ -68,11 +68,9 @@ export class Fetcher { } const nextToken = response.headers.get("Next-Authorization")! - const expirationDate = new Date( - response.headers.get("Next-Authorization-Expiration-Date")!, - ) + const expirationDate = response.headers.get("Next-Authorization-Expiration-Date")! if (nextToken && expirationDate) { - this.auth = { token: nextToken, expirationDate } + this.auth = { token: nextToken, expirationDate: new Date(expirationDate) } } return response diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index 767caa6..0eff7a0 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -1,4 +1,4 @@ -import { FormEvent, useCallback, useRef, useState } from "react" +import { FormEvent, useCallback, useEffect, useRef, useState } from "react" import "../style/settings.css" import { useAppFetcher, useUser } from "../App.tsx" import { Fetcher } from "../app/Fetcher.ts" @@ -10,18 +10,19 @@ export default function ProfileSettings() { const [errorMessages, setErrorMessages] = useState([]) const [success, setSuccess] = useState(false) - const formRef = useRef(null) + const [name, setName] = useState(user!.name) + const [email, setEmail] = useState(user!.email) + const [password, setPassword] = useState() + const [confirmPassword, setConfirmPassword] = useState() + + const passwordConfirmRef = useRef(null) + const formRef = useRef(null) const submitForm = useCallback( async (e: FormEvent) => { e.preventDefault() - const { name, email, password, confirmPassword } = - Object.fromEntries( - new FormData(formRef.current!) as Iterable< - [PropertyKey, string] - >, - ) + passwordConfirmRef.current!.checkValidity() if (password !== confirmPassword) { setErrorMessages(["Les mots de passe ne correspondent pas !"]) return @@ -46,9 +47,15 @@ export default function ProfileSettings() { formRef.current!.reset() setErrorMessages([]) }, - [fetcher, setUser, user], + [confirmPassword, email, fetcher, name, password, setUser, user], ) + useEffect(() => { + passwordConfirmRef.current!.setCustomValidity( + password === confirmPassword ? "" : "Les mots de passe ne correspondent pas !" + ) + }, [confirmPassword, password]) + const [modalShow, setModalShow] = useState(false) const width = 150 @@ -94,44 +101,64 @@ export default function ProfileSettings() { ref={formRef} id="credentials-form" onSubmit={submitForm}> -

Nom d'utilisateur

+ setName(e.target.value)} /> -

Addresse email

+ setEmail(e.target.value)} /> -

Mot de passe

+ setPassword(e.target.value)} /> -

Confirmez le mot de passe

+ setConfirmPassword(e.target.value)} /> @@ -173,11 +200,38 @@ function ProfileImageInputPopup({ show, onHide }: ProfileImageInputPopupProps) { const fetcher = useAppFetcher() const [user, setUser] = useUser() + const [link, setLink] = useState("") + + useEffect(() => { + function onKeyUp(e: KeyboardEvent) { + if (e.key === "Escape") onHide() + } + + window.addEventListener('keyup', onKeyUp) + return () => window.removeEventListener('keyup', onKeyUp) + }, [onHide]) + + const handleForm = useCallback(async (e: FormEvent) => { + e.preventDefault() + + const url = urlRef.current!.value + const errors = await updateAccount(fetcher, { + profilePicture: url, + }) + if (errors.length !== 0) { + setErrorMessages(errors) + return + } + setUser({ ...user!, profilePicture: url }) + setErrorMessages([]) + onHide() + }, [fetcher, onHide, setUser, user]) + if (!show) return <> return ( -
-
+ +

Nouvelle photo de profil @@ -189,9 +243,9 @@ function ProfileImageInputPopup({ show, onHide }: ProfileImageInputPopupProps) { {msg}

))} -

+

+ setLink(e.target.value)} /> -
-
+ + ) } diff --git a/src/pages/template/Header.tsx b/src/pages/template/Header.tsx index 26401b4..9056ea8 100644 --- a/src/pages/template/Header.tsx +++ b/src/pages/template/Header.tsx @@ -11,7 +11,7 @@ export function Header() { {"profile-picture"} ) : ( diff --git a/src/style/home/home.css b/src/style/home/home.css index 3af258a..479773a 100644 --- a/src/style/home/home.css +++ b/src/style/home/home.css @@ -20,13 +20,13 @@ body { #body { display: flex; flex-direction: row; - margin: 0px; + margin: 0; height: 100%; background-color: var(--home-second-color); } .data { - border: 1.5px solid var(--main-contrast-color); + border: 2px solid var(--main-contrast-color); background-color: var(--home-main-color); border-radius: 0.75cap; color: var(--main-contrast-color); diff --git a/src/style/settings.css b/src/style/settings.css index 249770a..8c2f449 100644 --- a/src/style/settings.css +++ b/src/style/settings.css @@ -79,7 +79,7 @@ background-color: rgba(84, 78, 78, 0.33); } -#profile-picture-popup-content { +#profile-picture-popup-form { display: flex; flex-direction: column; row-gap: 20px; diff --git a/src/style/template/header.css b/src/style/template/header.css index ee48daf..6d64f46 100644 --- a/src/style/template/header.css +++ b/src/style/template/header.css @@ -40,12 +40,6 @@ color: var(--accent-color); } -#username { - text-align: center; - vertical-align: center; - margin: 0; -} - #clickable-header-right { border-radius: 1cap;