From e753d88271f97281aec73077a3447eb6fa2d8435 Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 20:24:02 +0200 Subject: [PATCH 01/12] updated the avatar component --- src/components/profile/avatar.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/components/profile/avatar.tsx diff --git a/src/components/profile/avatar.tsx b/src/components/profile/avatar.tsx new file mode 100644 index 0000000..9b1604e --- /dev/null +++ b/src/components/profile/avatar.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Avatar } from "@mui/material"; + +interface ProfileAvatarProps { + src: string; +} + +const ProfileAvatar: React.FC = ({ src }) => { + return ; +}; + +export default ProfileAvatar; From 304e99894c93fa66b185cc9696d05ef846c32ca8 Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 20:26:10 +0200 Subject: [PATCH 02/12] updated the custombutton --- src/components/profile/customButton.tsx | 31 +++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/components/profile/customButton.tsx diff --git a/src/components/profile/customButton.tsx b/src/components/profile/customButton.tsx new file mode 100644 index 0000000..9b01381 --- /dev/null +++ b/src/components/profile/customButton.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import { Button } from "@mui/material"; +import { Lock, Add } from "@mui/icons-material"; + +interface SideMenuButtonProps { + onClick: () => void; + showForm: boolean; +} + +const SideMenuButton: React.FC = ({ onClick, showForm }) => { + return ( + + ); +}; + +export default SideMenuButton; From 0b854b2bb8dd3f31ef2ac8536d03001195d95ef9 Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 20:27:12 +0200 Subject: [PATCH 03/12] updated the editable text --- src/components/profile/EditableText.tsx | 45 +++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/components/profile/EditableText.tsx diff --git a/src/components/profile/EditableText.tsx b/src/components/profile/EditableText.tsx new file mode 100644 index 0000000..99a80c6 --- /dev/null +++ b/src/components/profile/EditableText.tsx @@ -0,0 +1,45 @@ +import React, { useState } from "react"; +import { Box, IconButton, InputBase, Typography } from "@mui/material"; +import { Edit, Check } from "@mui/icons-material"; + +interface EditableTextProps { + label: string; + onSubmit: (value: string) => void; + placeholder: string; +} + +const EditableText: React.FC = ({ + label, + + onSubmit, + placeholder, +}) => { + const [value, setValue] = useState(""); + const [isEditable, setIsEditable] = useState(false); + + const handleIconClick = () => { + if (isEditable) { + onSubmit(value); + } + setIsEditable(!isEditable); + }; + + return ( + + {label}: + setValue(e.target.value)} + readOnly={!isEditable} + multiline + placeholder={placeholder} + inputProps={{ style: { borderBottom: isEditable ? "2px solid blue" : "1px solid #F3FB8C" } }} + /> + + {isEditable ? : } + + + ); +}; + +export default EditableText; \ No newline at end of file From 644df6fe6c2dd14830508412ec588641ee566cfd Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 20:34:00 +0200 Subject: [PATCH 04/12] added the maincontent on profile page --- src/components/profile/mainContent.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/components/profile/mainContent.tsx diff --git a/src/components/profile/mainContent.tsx b/src/components/profile/mainContent.tsx new file mode 100644 index 0000000..f904f98 --- /dev/null +++ b/src/components/profile/mainContent.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { Card, CardContent } from "@mui/material"; + +interface MainContentProps { + children: React.ReactNode; +} + +const MainContent: React.FC = ({ children }) => { + return ( + + {children} + + ); +}; + +export default MainContent; From 6ecc84c269b41e408800508dcbb39587dda15043 Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 20:35:13 +0200 Subject: [PATCH 05/12] profileinfo modified --- src/components/profile/ProfileInfo.tsx | 77 ++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 src/components/profile/ProfileInfo.tsx diff --git a/src/components/profile/ProfileInfo.tsx b/src/components/profile/ProfileInfo.tsx new file mode 100644 index 0000000..bb91aed --- /dev/null +++ b/src/components/profile/ProfileInfo.tsx @@ -0,0 +1,77 @@ +import React, { useState } from "react"; +import { Box, TextField, Typography } from "@mui/material"; +import { PersonOutline, PhoneIphone, EmailOutlined } from "@mui/icons-material"; +import EditableText from "./EditableText"; +import { FormField } from "../shared/FormField"; + +interface ProfileInfoProps { + name: string; + bio: string; + setBio: (bio: string) => void; + phoneNumber: string; + setPhoneNumber: (phoneNumber: string) => void; + email: string; + setEmail: (email: string) => void; +} + +const ProfileInfo: React.FC = ({ + name, + bio, + setBio, + phoneNumber, + setPhoneNumber, + email, + setEmail, +}) => { + return ( +
+ {name} + setBio(e.target.value)} + multiline + rows={4} + variant="outlined" + sx={{ + margin: 2, + width: "100%", + "& .MuiOutlinedInput-notchedOutline": { + borderColor: "transparent", + }, + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: "transparent", + }, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + borderColor: "transparent", + }, + }} + /> + + + setPhoneNumber(value)} + placeholder="Enter your phone number..." + /> + + + + + setEmail(value)} + placeholder="Enter your email..." + /> + + + +
+ ); +}; + +export default ProfileInfo; From f53174570e73d41b7844b9f1be02b1f56f89cf9e Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 20:36:33 +0200 Subject: [PATCH 06/12] created a button on the side --- src/components/profile/SideManuButton.tsx | 26 +++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/components/profile/SideManuButton.tsx diff --git a/src/components/profile/SideManuButton.tsx b/src/components/profile/SideManuButton.tsx new file mode 100644 index 0000000..4dff455 --- /dev/null +++ b/src/components/profile/SideManuButton.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { Button } from "@mui/material"; +import EditIcon from "@mui/icons-material/Edit"; +import LockIcon from "@mui/icons-material/Lock"; + + +interface SideMenuButtonProps { + showForm: boolean; + onClick: () => void; +} + +const SideMenuButton: React.FC = ({ showForm, onClick }) => { + return ( + + + ); +}; + +export default SideMenuButton; From b16cbd53d1527caea153b87a44bd08aeeeeb5c94 Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 21:18:02 +0200 Subject: [PATCH 07/12] updated the color of the changepassword form --- src/components/profile/ChangePasswordForm.tsx | 0 src/components/profile/SideMenuButton.tsx | 26 +++++++++++++++++++ 2 files changed, 26 insertions(+) create mode 100644 src/components/profile/ChangePasswordForm.tsx create mode 100644 src/components/profile/SideMenuButton.tsx diff --git a/src/components/profile/ChangePasswordForm.tsx b/src/components/profile/ChangePasswordForm.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/profile/SideMenuButton.tsx b/src/components/profile/SideMenuButton.tsx new file mode 100644 index 0000000..4dff455 --- /dev/null +++ b/src/components/profile/SideMenuButton.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { Button } from "@mui/material"; +import EditIcon from "@mui/icons-material/Edit"; +import LockIcon from "@mui/icons-material/Lock"; + + +interface SideMenuButtonProps { + showForm: boolean; + onClick: () => void; +} + +const SideMenuButton: React.FC = ({ showForm, onClick }) => { + return ( + + + ); +}; + +export default SideMenuButton; From cb3dbfff0d669428be431b569a1fa9c1560dbffc Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 21:20:58 +0200 Subject: [PATCH 08/12] main content color updated --- src/components/profile/mainContent.tsx | 1 - src/pages/profile/index.tsx | 87 ++++++++++++++++++++++++++ 2 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 src/pages/profile/index.tsx diff --git a/src/components/profile/mainContent.tsx b/src/components/profile/mainContent.tsx index f904f98..f4d8bb6 100644 --- a/src/components/profile/mainContent.tsx +++ b/src/components/profile/mainContent.tsx @@ -10,7 +10,6 @@ const MainContent: React.FC = ({ children }) => { { + const [showChangePasswordForm, setShowChangePasswordForm] = useState(false); + const handleButtonClick = () => { + setShowChangePasswordForm(!showChangePasswordForm); + }; + + const onSubmit = (data: FormData) => { + console.log(data); + }; + + const [bio, setBio] = useState("Software Developer"); + const [phoneNumber, setPhoneNumber] = useState("123-456-7890"); + const [email, setEmail] = useState("john.doe@example.com"); + + return ( + + + + + + + + + + + + {!showChangePasswordForm && ( + <> + + + + + + )} + {showChangePasswordForm && ( + + )} + + + + + + ); +}; + +export default Profile; From 09ca877a9c83cf4db29037aa492d96bdf5712556 Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 21:34:31 +0200 Subject: [PATCH 09/12] made change on the changepassword form --- src/components/profile/ChangePasswordForm.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/src/components/profile/ChangePasswordForm.tsx b/src/components/profile/ChangePasswordForm.tsx index e69de29..e656d7c 100644 --- a/src/components/profile/ChangePasswordForm.tsx +++ b/src/components/profile/ChangePasswordForm.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import { Button, Container, Typography } from "@mui/material"; +import { useForm, FormProvider } from "react-hook-form"; +import { FormField } from "@/components/shared/FormField"; + +interface ChangePasswordFormData { + oldPassword: string; + newPassword: string; + confirmNewPassword: string; +} + +interface ChangePasswordFormProps { + onSubmit: (data: ChangePasswordFormData) => void; +} + +const ChangePasswordForm: React.FC = ({ onSubmit }) => { + const methods = useForm(); + + return ( + + +
+ + Change Password + + + + + + +
+ + ); +}; + +export default ChangePasswordForm; From 3912cfef114c6968836319759c2e86b55586092c Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 21:49:03 +0200 Subject: [PATCH 10/12] fixed the error on password change --- src/pages/profile/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx index 38b680f..e3a7074 100644 --- a/src/pages/profile/index.tsx +++ b/src/pages/profile/index.tsx @@ -4,7 +4,7 @@ import MainLayout from "@/layouts/MainLayout"; import { NextPage } from "next"; import ProfileAvatar from "@/components/profile/avatar"; import ProfileInfo from "@/components/profile/ProfileInfo"; -import ChangePasswordForm from "@/components/profile/ChangePasswordForm"; +import ChangePasswordForm , { ChangePasswordFormData} from "@/components/profile/ChangePasswordForm"; import SideMenuButton from "@/components/profile/SideMenuButton"; import MainContent from "@/components/profile/mainContent"; @@ -14,7 +14,7 @@ const Profile: NextPage = () => { setShowChangePasswordForm(!showChangePasswordForm); }; - const onSubmit = (data: FormData) => { + const onSubmit = (data: ChangePasswordFormData) => { console.log(data); }; @@ -71,9 +71,7 @@ const Profile: NextPage = () => { )} {showChangePasswordForm && ( )} From a234298280f9ac1bf05633e3555c6ca5f3c90a73 Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 21:50:34 +0200 Subject: [PATCH 11/12] fixed error and updated the change password form --- src/components/profile/ChangePasswordForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/profile/ChangePasswordForm.tsx b/src/components/profile/ChangePasswordForm.tsx index e656d7c..b420255 100644 --- a/src/components/profile/ChangePasswordForm.tsx +++ b/src/components/profile/ChangePasswordForm.tsx @@ -3,7 +3,7 @@ import { Button, Container, Typography } from "@mui/material"; import { useForm, FormProvider } from "react-hook-form"; import { FormField } from "@/components/shared/FormField"; -interface ChangePasswordFormData { +export interface ChangePasswordFormData { oldPassword: string; newPassword: string; confirmNewPassword: string; From e1d19cfd3790058c59271e9a97d4d11b2cf59817 Mon Sep 17 00:00:00 2001 From: HelenT HYF <107499395+HelenT-HYF@users.noreply.github.com> Date: Sun, 9 Apr 2023 22:58:24 +0200 Subject: [PATCH 12/12] fixed color of the profilepage --- src/components/profile/EditableText.tsx | 3 ++- src/components/profile/ProfileInfo.tsx | 1 + src/components/profile/SideManuButton.tsx | 26 ----------------------- src/components/profile/mainContent.tsx | 2 ++ src/components/shared/Header/index.tsx | 9 ++++++++ src/pages/profile/index.tsx | 2 +- 6 files changed, 15 insertions(+), 28 deletions(-) delete mode 100644 src/components/profile/SideManuButton.tsx diff --git a/src/components/profile/EditableText.tsx b/src/components/profile/EditableText.tsx index 99a80c6..7970f34 100644 --- a/src/components/profile/EditableText.tsx +++ b/src/components/profile/EditableText.tsx @@ -25,7 +25,7 @@ const EditableText: React.FC = ({ }; return ( - + {label}: = ({ multiline placeholder={placeholder} inputProps={{ style: { borderBottom: isEditable ? "2px solid blue" : "1px solid #F3FB8C" } }} + sx= { {color: isEditable ? "blue" : "#FFFFFF" } } /> {isEditable ? : } diff --git a/src/components/profile/ProfileInfo.tsx b/src/components/profile/ProfileInfo.tsx index bb91aed..1a9c5b9 100644 --- a/src/components/profile/ProfileInfo.tsx +++ b/src/components/profile/ProfileInfo.tsx @@ -35,6 +35,7 @@ const ProfileInfo: React.FC = ({ rows={4} variant="outlined" sx={{ + color: "#fffff", margin: 2, width: "100%", "& .MuiOutlinedInput-notchedOutline": { diff --git a/src/components/profile/SideManuButton.tsx b/src/components/profile/SideManuButton.tsx deleted file mode 100644 index 4dff455..0000000 --- a/src/components/profile/SideManuButton.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { Button } from "@mui/material"; -import EditIcon from "@mui/icons-material/Edit"; -import LockIcon from "@mui/icons-material/Lock"; - - -interface SideMenuButtonProps { - showForm: boolean; - onClick: () => void; -} - -const SideMenuButton: React.FC = ({ showForm, onClick }) => { - return ( - - - ); -}; - -export default SideMenuButton; diff --git a/src/components/profile/mainContent.tsx b/src/components/profile/mainContent.tsx index f4d8bb6..5276647 100644 --- a/src/components/profile/mainContent.tsx +++ b/src/components/profile/mainContent.tsx @@ -10,6 +10,8 @@ const MainContent: React.FC = ({ children }) => { { const userData = useSelector(selectUserData); @@ -36,6 +37,14 @@ const Header = () => {
  • {userData.fullName} Logout
    • +
  • + + + + Helen + + +
    • ) : (
      diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx index e3a7074..4ac28d2 100644 --- a/src/pages/profile/index.tsx +++ b/src/pages/profile/index.tsx @@ -24,7 +24,7 @@ const Profile: NextPage = () => { return ( - +