64 |
96 | );
97 | }
98 |
--------------------------------------------------------------------------------
/frontend/src/pages/PasswordReset/Request/api.js:
--------------------------------------------------------------------------------
1 | import http from "@/lib/http";
2 |
3 | export function passwordResetRequest(body) {
4 | return http.post('/api/v1/users/password-reset', body);
5 | }
--------------------------------------------------------------------------------
/frontend/src/pages/PasswordReset/Request/index.jsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/shared/components/Input";
2 | import { usePasswordResetRequest } from "./usePasswordResetRequest";
3 | import { Alert } from "@/shared/components/Alert";
4 | import { Button } from "@/shared/components/Button";
5 |
6 | export function PasswordResetRequest() {
7 | const {onSubmit, onChangeEmail, apiProgress, success, error, generalError} = usePasswordResetRequest();
8 | return (
9 |
65 |
94 |
95 |
10 |
39 | );
40 | }
--------------------------------------------------------------------------------
/frontend/src/pages/PasswordReset/Request/usePasswordResetRequest.js:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from "react";
2 | import { passwordResetRequest } from "./api";
3 |
4 | export function usePasswordResetRequest() {
5 | const [apiProgress, setApiProgress] = useState(false);
6 | const [email, setEmail] = useState();
7 | const [success, setSuccess] = useState();
8 | const [generalError, setGeneralError] = useState()
9 | const [errors, setErrors] = useState({});
10 |
11 | const onSubmit = useCallback(async (event) => {
12 | event.preventDefault();
13 | setApiProgress(true);
14 | setSuccess();
15 | setErrors({});
16 | setGeneralError()
17 | try {
18 | const response = await passwordResetRequest({ email });
19 | setSuccess(response.data.message);
20 | } catch (axiosError) {
21 | if(axiosError.response.data.status === 400) {
22 | setErrors(axiosError.response?.data.validationErrors);
23 | } else {
24 | setGeneralError(axiosError.response.data.message);
25 | }
26 | } finally {
27 | setApiProgress(false);
28 | }
29 | }, [email]);
30 |
31 | return {
32 | apiProgress,
33 | onChangeEmail: (event) => setEmail(event.target.value),
34 | onSubmit,
35 | success,
36 | error: errors.email,
37 | generalError
38 |
39 | };
40 | }
--------------------------------------------------------------------------------
/frontend/src/pages/PasswordReset/SetPassword/api.js:
--------------------------------------------------------------------------------
1 | import http from "@/lib/http";
2 |
3 | export function resetPassword(token, body) {
4 | return http.patch(`/api/v1/users/${token}/password`, body);
5 | }
--------------------------------------------------------------------------------
/frontend/src/pages/PasswordReset/SetPassword/index.jsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/shared/components/Input";
2 | import { useSetPassword } from "./useSetPassword";
3 | import { Alert } from "@/shared/components/Alert";
4 | import { Button } from "@/shared/components/Button";
5 |
6 | export function SetPassword() {
7 | const {apiProgress, errors, generalError, onChangePassword, onChangePasswordRepeat, onSubmit, success, disabled} = useSetPassword();
8 | return (
9 |
11 |
37 |
38 |
10 |
48 | );
49 | }
--------------------------------------------------------------------------------
/frontend/src/pages/PasswordReset/SetPassword/useSetPassword.js:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from "react";
2 | import { resetPassword } from "./api";
3 | import { useNavigate, useSearchParams } from "react-router-dom";
4 |
5 | export function useSetPassword() {
6 | const [apiProgress, setApiProgress] = useState(false);
7 | const [password, setPassword] = useState();
8 | const [passwordRepeat, setPasswordRepeat] = useState();
9 | const [success, setSuccess] = useState();
10 | const [generalError, setGeneralError] = useState()
11 | const [errors, setErrors] = useState({});
12 | const navigate = useNavigate()
13 | const [searchParams] = useSearchParams()
14 |
15 | const onSubmit = useCallback(async (event) => {
16 | event.preventDefault();
17 | setApiProgress(true);
18 | setSuccess();
19 | setErrors({});
20 | setGeneralError()
21 | try {
22 | const response = await resetPassword(searchParams.get("tk"), { password });
23 | setSuccess(response.data.message);
24 | navigate("/login")
25 | } catch (axiosError) {
26 | if(axiosError.response.data.status === 400) {
27 | setErrors(axiosError.response?.data.validationErrors);
28 | } else {
29 | setGeneralError(axiosError.response.data.message);
30 | }
31 | } finally {
32 | setApiProgress(false);
33 | }
34 | }, [password, searchParams]);
35 |
36 |
37 |
38 | return {
39 | apiProgress,
40 | onChangePassword: (event) => {
41 | setPassword(event.target.value),
42 | setErrors({})
43 | },
44 | onChangePasswordRepeat: (event) => setPasswordRepeat(event.target.value),
45 | onSubmit,
46 | success,
47 | errors: {
48 | password: errors.password,
49 | passwordRepeat: password !== passwordRepeat ? 'Password mismatch' : ''
50 | },
51 | generalError,
52 | disabled: password ? password !== passwordRepeat : true
53 |
54 | };
55 | }
--------------------------------------------------------------------------------
/frontend/src/pages/SignUp/api.js:
--------------------------------------------------------------------------------
1 | import http from "@/lib/http";
2 |
3 | export function signUp(body){
4 | return http.post('/api/v1/users', body);
5 | }
--------------------------------------------------------------------------------
/frontend/src/pages/SignUp/index.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useState } from "react";
2 | import { signUp } from "./api";
3 | import { Input } from "@/shared/components/Input";
4 | import { useTranslation } from "react-i18next";
5 | import { Alert } from "@/shared/components/Alert";
6 | import { Spinner } from "@/shared/components/Spinner";
7 | import { Button } from "@/shared/components/Button";
8 |
9 | export function SignUp() {
10 | const [username, setUsername] = useState();
11 | const [email, setEmail] = useState();
12 | const [password, setPassword] = useState();
13 | const [passwordRepeat, setPasswordRepeat] = useState();
14 | const [apiProgress, setApiProgress] = useState();
15 | const [successMessage, setSuccessMessage] = useState();
16 | const [errors, setErrors] = useState({});
17 | const [generalError, setGeneralError] = useState();
18 | const { t } = useTranslation();
19 |
20 | useEffect(() => {
21 | setErrors(function (lastErrors) {
22 | return {
23 | ...lastErrors,
24 | username: undefined,
25 | };
26 | });
27 | }, [username]);
28 |
29 | useEffect(() => {
30 | setErrors(function (lastErrors) {
31 | return {
32 | ...lastErrors,
33 | email: undefined,
34 | };
35 | });
36 | }, [email]);
37 |
38 | useEffect(() => {
39 | setErrors(function (lastErrors) {
40 | return {
41 | ...lastErrors,
42 | password: undefined,
43 | };
44 | });
45 | }, [password]);
46 |
47 | const onSubmit = async (event) => {
48 | event.preventDefault();
49 | setSuccessMessage();
50 | setGeneralError();
51 | setApiProgress(true);
52 |
53 | try {
54 | const response = await signUp({
55 | username,
56 | email,
57 | password,
58 | });
59 | setSuccessMessage(response.data.message);
60 | } catch (axiosError) {
61 | if (axiosError.response?.data) {
62 | if (axiosError.response.data.status === 400) {
63 | setErrors(axiosError.response.data.validationErrors);
64 | } else {
65 | setGeneralError(axiosError.response.data.message);
66 | }
67 | } else {
68 | setGeneralError(t("genericError"));
69 | }
70 | } finally {
71 | setApiProgress(false);
72 | }
73 | };
74 |
75 | const passwordRepeatError = useMemo(() => {
76 | if (password && password !== passwordRepeat) {
77 | return t("passwordMismatch");
78 | }
79 | return "";
80 | }, [password, passwordRepeat]);
81 |
82 | return (
83 |
11 |
46 |
47 |
84 |
130 | );
131 | }
132 |
--------------------------------------------------------------------------------
/frontend/src/pages/User/api.js:
--------------------------------------------------------------------------------
1 | import http from "@/lib/http";
2 |
3 | export function getUser(id) {
4 | return http.get(`/api/v1/users/${id}`);
5 | }
6 |
--------------------------------------------------------------------------------
/frontend/src/pages/User/components/ProfileCard/UserDeleteButton/api.js:
--------------------------------------------------------------------------------
1 | import http from "@/lib/http";
2 |
3 | export function deleteUser(id){
4 | return http.delete(`/api/v1/users/${id}`)
5 | }
--------------------------------------------------------------------------------
/frontend/src/pages/User/components/ProfileCard/UserDeleteButton/index.jsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/shared/components/Button";
2 | import { useUserDeleteButton } from "./useUserDeleteButton";
3 |
4 | export function UserDeleteButton(){
5 | const {apiProgress, onClick} = useUserDeleteButton();
6 |
7 | return
8 | }
--------------------------------------------------------------------------------
/frontend/src/pages/User/components/ProfileCard/UserDeleteButton/useUserDeleteButton.js:
--------------------------------------------------------------------------------
1 | import { useAuthDispatch, useAuthState } from "@/shared/state/context"
2 | import { deleteUser } from "./api"
3 | import { useCallback, useState } from "react";
4 | import { useNavigate } from "react-router-dom";
5 |
6 | export function useUserDeleteButton(){
7 | const [apiProgress, setApiProgress] = useState(false);
8 | const { id } = useAuthState();
9 | const dispatch = useAuthDispatch()
10 | const navigate = useNavigate();
11 |
12 | const onClick = useCallback(async () => {
13 | const result = confirm("Are you sure?")
14 | if(result) {
15 | setApiProgress(true);
16 | try {
17 | await deleteUser(id)
18 | dispatch({type: 'logout-success'});
19 | navigate("/")
20 | } catch {
21 |
22 | } finally {
23 | setApiProgress(false);
24 | }
25 | }
26 | }, [id])
27 |
28 | return {
29 | apiProgress, onClick
30 | }
31 | }
--------------------------------------------------------------------------------
/frontend/src/pages/User/components/ProfileCard/UserEditForm.jsx:
--------------------------------------------------------------------------------
1 | import { useAuthDispatch, useAuthState } from "@/shared/state/context";
2 | import { useState } from "react";
3 | import { useTranslation } from "react-i18next";
4 | import { updateUser } from "./api";
5 | import { Input } from "@/shared/components/Input";
6 | import { Alert } from "@/shared/components/Alert";
7 | import { Button } from "@/shared/components/Button";
8 |
9 | export function UserEditForm({ setEditMode, setTempImage }) {
10 | const authState = useAuthState();
11 | const { t } = useTranslation();
12 | const [newUsername, setNewUsername] = useState(authState.username);
13 | const [apiProgress, setApiProgress] = useState(false);
14 | const [errors, setErrors] = useState({});
15 | const [generalError, setGeneralError] = useState();
16 | const dispatch = useAuthDispatch();
17 | const [newImage, setNewImage] = useState();
18 |
19 | const onChangeUsername = (event) => {
20 | setNewUsername(event.target.value);
21 | setErrors(function (lastErrors) {
22 | return {
23 | ...lastErrors,
24 | username: undefined,
25 | };
26 | });
27 | };
28 |
29 | const onClickCancel = () => {
30 | setEditMode(false);
31 | setNewUsername(authState.username);
32 | setNewImage();
33 | setTempImage();
34 | };
35 |
36 | const onSelectImage = (event) => {
37 | setErrors(function (lastErrors) {
38 | return {
39 | ...lastErrors,
40 | image: undefined,
41 | };
42 | });
43 | if(event.target.files.length < 1) return;
44 | const file = event.target.files[0]
45 | const fileReader = new FileReader();
46 | fileReader.onloadend = () => {
47 | const data = fileReader.result
48 | setNewImage(data);
49 | setTempImage(data);
50 | }
51 | fileReader.readAsDataURL(file);
52 | }
53 |
54 | const onSubmit = async (event) => {
55 | event.preventDefault();
56 | setApiProgress(true);
57 | setErrors({});
58 | setGeneralError();
59 | try {
60 | const { data } = await updateUser(authState.id, { username: newUsername, image: newImage });
61 | dispatch({
62 | type: "user-update-success",
63 | data: { username: data.username, image: data.image },
64 | });
65 | setEditMode(false);
66 | } catch (axiosError) {
67 | if (axiosError.response?.data) {
68 | if (axiosError.response.data.status === 400) {
69 | setErrors(axiosError.response.data.validationErrors);
70 | } else {
71 | setGeneralError(axiosError.response.data.message);
72 | }
73 | } else {
74 | setGeneralError(t("genericError"));
75 | }
76 | } finally {
77 | setApiProgress(false);
78 | }
79 | };
80 | return (
81 |
103 | );
104 | }
105 |
--------------------------------------------------------------------------------
/frontend/src/pages/User/components/ProfileCard/api.js:
--------------------------------------------------------------------------------
1 | import http from "@/lib/http";
2 |
3 | export function updateUser(id, body){
4 | return http.put(`/api/v1/users/${id}`, body)
5 | }
--------------------------------------------------------------------------------
/frontend/src/pages/User/components/ProfileCard/index.jsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/shared/components/Button";
2 | import { useAuthState } from "@/shared/state/context";
3 | import { useState } from "react";
4 | import { ProfileImage } from "@/shared/components/ProfileImage";
5 | import { UserEditForm } from "./UserEditForm";
6 | import { UserDeleteButton } from "./UserDeleteButton";
7 |
8 | export function ProfileCard({ user }) {
9 | const authState = useAuthState();
10 | const [editMode, setEditMode] = useState(false);
11 | const [tempImage, setTempImage] = useState();
12 |
13 | const isLoggedInUser = !editMode && authState.id === user.id;
14 |
15 | const visibleUsername = authState.id === user.id ? authState.username : user.username;
16 |
17 | return (
18 |
85 |
128 |
129 |
19 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/frontend/src/pages/User/index.jsx:
--------------------------------------------------------------------------------
1 | import { getUser } from "./api";
2 | import { Alert } from "@/shared/components/Alert";
3 | import { Spinner } from "@/shared/components/Spinner";
4 | import { useRouteParamApiRequest } from "@/shared/hooks/useRouteParamApiRequest";
5 | import { ProfileCard } from "./components/ProfileCard";
6 |
7 | export function User() {
8 | const {
9 | apiProgress,
10 | data: user,
11 | error,
12 | } = useRouteParamApiRequest("id", getUser);
13 |
14 | return (
15 | <>
16 | {apiProgress && (
17 |
20 |
21 |
22 |
23 | {!editMode && {visibleUsername}}
24 | {isLoggedInUser && (
25 | <>
26 |
27 |
28 | }
32 |
33 | {children}
5 | );
6 | }
7 |
--------------------------------------------------------------------------------
/frontend/src/shared/components/Button.jsx:
--------------------------------------------------------------------------------
1 | import { Spinner } from "./Spinner";
2 |
3 | export function Button({
4 | apiProgress,
5 | disabled,
6 | children,
7 | onClick,
8 | styleType = "primary",
9 | type
10 | }) {
11 | return (
12 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/frontend/src/shared/components/Input.jsx:
--------------------------------------------------------------------------------
1 | export function Input(props) {
2 | const { id, label, error, onChange, type, defaultValue } = props;
3 |
4 | return (
5 |
6 |
9 |
16 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/frontend/src/shared/components/LanguageSelector.jsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from "react-i18next";
2 |
3 | export function LanguageSelector() {
4 | const { i18n } = useTranslation();
5 |
6 | const onSelectLanguage = (language) => {
7 | i18n.changeLanguage(language);
8 | localStorage.setItem("lang", language);
9 | };
10 | return (
11 | <>
12 | {error}
17 | 
onSelectLanguage("tr")}
19 | >
20 | 
onSelectLanguage("en")}
27 | >
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/frontend/src/shared/components/NavBar/api.js:
--------------------------------------------------------------------------------
1 | import http from "@/lib/http";
2 |
3 | export function logout(){
4 | return http.post("/api/v1/logout");
5 | }
--------------------------------------------------------------------------------
/frontend/src/shared/components/NavBar/index.jsx:
--------------------------------------------------------------------------------
1 | import logo from "@/assets/hoaxify.png";
2 | import { useTranslation } from "react-i18next";
3 | import { Link } from "react-router-dom";
4 | import { useAuthDispatch, useAuthState } from "../../state/context";
5 | import { ProfileImage } from "../ProfileImage";
6 | import { logout } from "./api";
7 |
8 | export function NavBar() {
9 | const { t } = useTranslation();
10 | const authState = useAuthState();
11 | const dispatch = useAuthDispatch();
12 |
13 | const onClickLogout = async () => {
14 | try {
15 | await logout();
16 | } catch {
17 |
18 | } finally {
19 | dispatch({type: 'logout-success'});
20 | }
21 | }
22 | return (
23 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/frontend/src/shared/components/ProfileImage.jsx:
--------------------------------------------------------------------------------
1 | import defaultProfileImage from "@/assets/profile.png";
2 |
3 | export function ProfileImage({ width, tempImage, image }) {
4 |
5 | const profileImage = image ? `/assets/profile/${image}` : defaultProfileImage;
6 |
7 | return (
8 |