diff --git a/front-js/src/app/auth/signup/page.tsx b/front-js/src/app/auth/signup/page.tsx index 468a477..39d9d64 100644 --- a/front-js/src/app/auth/signup/page.tsx +++ b/front-js/src/app/auth/signup/page.tsx @@ -11,7 +11,7 @@ import { use, useState } from "react"; import Link from "@/components/Link"; import Space from "@/components/Space"; import ValidatePsw from "@/components/ValidatePsw"; -import {validate_passwd} from "./validatePasswd"; +import {validate_passwd} from "@/utils/validatePasswd"; export default function Home() { const [username, setUsername] = useState(""); diff --git a/front-js/src/app/profile/layout.tsx b/front-js/src/app/profile/layout.tsx new file mode 100644 index 0000000..5e2b311 --- /dev/null +++ b/front-js/src/app/profile/layout.tsx @@ -0,0 +1,14 @@ +import type { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Modifier mon mot de passe", + description: "Networkers", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return {children}; +} \ No newline at end of file diff --git a/front-js/src/app/profile/page.tsx b/front-js/src/app/profile/page.tsx new file mode 100644 index 0000000..2a098b3 --- /dev/null +++ b/front-js/src/app/profile/page.tsx @@ -0,0 +1,177 @@ +"use client"; + +import Box from "@/components/Box"; +import Header from "@/components/Header"; +import { useRouter } from "next/navigation"; +import Button from "@/components/Button"; +import Input from "@/components/Input"; +import Layout from "@/components/Layout"; +import Modal from "@/components/Modal"; +import ValidatePsw from "@/components/ValidatePsw"; +import {validate_passwd} from "@/utils/validatePasswd"; +import { useEffect, useState } from "react"; +import Title from "@/components/Title"; +import axios from "@/axiosConfig"; +import { AxiosError } from "axios"; +import Cookies from "js-cookie"; +import { Alert } from "@mui/material"; + +export default function Profile() { + const router = useRouter(); + + const [oldPassword, setOldPassword] = useState(""); + + const [password, setPassword] = useState(""); + + const [confirmPassword, setConfirmPassword] = useState("") + + const [error, setError] = useState(""); + const [success, setSuccess] = useState(""); + + + const [hasAccessToken, setHasAccessToken] = useState(false); + + useEffect(() => { + const checkTokens = async () => { + const token = Cookies.get("access_token"); + const refresh = Cookies.get("refresh_token"); + if (!token && refresh) { + try { + const response = await axios.post("/auth/refresh", { + refresh_token: refresh, + }); + const data = response.data; + if (response.status === 200) { + Cookies.set("access_token", data.access_token); + Cookies.set("refresh_token", refresh); + } + } catch { + Cookies.remove("access_token"); + Cookies.remove("refresh_token"); + } + } + setHasAccessToken(!!token); + + if (!token && !refresh) { + router.push("/"); + } + }; + + checkTokens(); + }, [router]); + + const changePassword = async (e: { preventDefault: () => void }) => { + e.preventDefault(); + try { + setError(""); + setSuccess(""); + const response = await axios.patch("/users/me/password", { + old_password: oldPassword, + password: password, + confirm_password: confirmPassword, + }, { + headers: { + Authorization: `Bearer ${Cookies.get("access_token")}`, + }, + }); + const data = response.data; + if (response.status === 200) { + setSuccess("Mot de passe modifié avec succès") + } + } catch (error: unknown) { + const axiosError = error as AxiosError; + if ( + axiosError.response?.status === 400 || + axiosError.response?.status === 404 + ) { + setError("L'ancien mot de passe est incorrect"); + } else if (axiosError.response?.status === 403) { + setError("Erreur lors de la connexion"); + } else { + setError("Erreur lors de la connexion"); + } + } + }; + return ( + + +
router.push(`/${tab.toLowerCase()}`)} + onClickLogout={() => router.push("/auth/logout")} + onClickLogo={() => router.push("/")} + /> + + + + Modifier mon mot de passe +
+ setOldPassword(e.target.value)} + required + label="Ancien mot de passe" + /> + setPassword(e.target.value)} + required + label="Nouveau mot de passe" + /> + setConfirmPassword(e.target.value)} + required + label="Confirmer nouveau mot de passe" + /> + + {error !== "" ? ( + + {error} + + ) : null} + {success !== "" ? ( + + {success} + + ) : null} +