Skip to content

responsive edit profile for CMC and user #282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MonikaaMoanes wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

responsive edit profile for CMC and user #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
311 changes: 148 additions & 163 deletions client/src/Components/EditAccount/EditAccount.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,11 @@ import ModalToggler from "../Modals/ModalToggler.jsx";
import RegisterUserForm from "./RegisterUserForm.jsx";
import usePublicUserStore from "../../store/user/public-user.store.js";
import CloudinaryImageService from "../../service/asset/image.service.js";
import "./EditAccount.css";

const EditAccount = () => {
const publicUserStore = usePublicUserStore()
const publicUserStore = usePublicUserStore();
const userData = JSON.parse(localStorage.getItem("userData"));
const entity = publicUserStore.getEntity()
const entity = publicUserStore.getEntity();
const [editProfile, setEditProfileActive] = useState(false);
const [newProfile, setNewProfile] = useState({
userid: entity.userid ? entity.userid : "",
Expand Down Expand Up @@ -58,199 +57,185 @@ const EditAccount = () => {
const handleImageChange = async (e) => {
const file = e.target.files[0];
let url;
if (!file)
return
if (!file) return;

const loadingToast = toast.loading('Saving image...');
const loadingToast = toast.loading("Saving image...");
try {
const response = await CloudinaryImageService.uploadImage(file)
url = response.data.url
const response = await CloudinaryImageService.uploadImage(file);
url = response.data.url;
} catch (err) {
toast.dismiss(loadingToast);
console.log(err)
return
console.log(err);
return;
}

if (url) {
const publicUser = publicUserStore.getEntity()
await publicUserStore.updatePublicUser({ ...publicUser, profile_picture: url })
const publicUser = publicUserStore.getEntity();
await publicUserStore.updatePublicUser({
...publicUser,
profile_picture: url,
});
}
toast.dismiss(loadingToast);
toast.success("Profile picture updated successfully", { autoClose: 500 })
toast.success("Profile picture updated successfully", { autoClose: 500 });
};


const handleSubmit = async (e) => {
e.preventDefault();
const status = await publicUserStore.updatePublicUser(newProfile);
if (status) {
toast.success("Account updated successfully", { autoClose: 500 })
toast.success("Account updated successfully", { autoClose: 500 });
}
};

return (
<div
className="min-h-screen flex flex-col justify-start items-center bg-profile-hero bg-cover bg-no-repeat
bg-center relative"
>
<div className="min-h-screen flex flex-col justify-center items-center bg-profile-hero bg-cover bg-no-repeat bg-center relative">
{entity.role !== "public_user" && (
<div className={"absolute top-0 left-0"}>
<div className="absolute top-0 left-0">
<button onClick={() => navigate(-1)}>
<MdKeyboardDoubleArrowLeft size={40}/>
<MdKeyboardDoubleArrowLeft size={40} />
</button>
</div>
)}
<div className="flex flex-col flex-grow w-full justify-center">
<div
className="flex flex-row bg-white min-w-fit min-h-fit self-center overflow-hidden
border-none rounded-lg shadow-md"
<div className="flex flex-col w-full max-w-md justify-center items-center rounded-lg shadow-md bg-white">
<form
className="flex flex-col px-8 py-6 gap-4 w-full"
onSubmit={handleSubmit}
>
<form
className="flex flex-col px-16 py-8 gap-8 w-full"
onSubmit={handleSubmit}
>
<h2 className="self-center font-inter font-bold text-3xl">
User Page
</h2>
<div className="flex items-center justify-center gap-16">
{/* Avatar Image */}
<div
className="relative rounded-full overflow-hidden w-32 h-32 bg-gray-200 flex items-center justify-center"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
{publicUserStore.getEntity().profile_picture ? (
<>
<img
src={publicUserStore.getEntity().profile_picture}
alt="Uploaded"
className="absolute top-0 left-0 w-full h-full object-cover"
/>
<label
htmlFor="imageInput"
className={`absolute inset-0 z-10 flex items-center justify-center cursor-pointer ${
isHovering ? "opacity-100" : "opacity-0"
}`}
style={{ transition: 'opacity 0.3s' }}
>
<p className="text-white text-center bg-black bg-opacity-50 px-2 py-1 rounded">Upload Image</p>
</label>
<input
type="file"
id="imageInput"
accept="image/*"
onChange={handleImageChange}
className="hidden"
/>
</>
<h2 className="self-center font-inter font-bold text-3xl">
User Page
</h2>
<div className="flex flex-col items-center justify-center gap-8">
{/* Avatar Image */}
<div className="relative rounded-full overflow-hidden w-32 h-32 bg-gray-200 flex items-center justify-center"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}>
{publicUserStore.getEntity().profile_picture ? (
<>
<img
src={publicUserStore.getEntity().profile_picture}
alt="Uploaded"
className="absolute top-0 left-0 w-full h-full object-cover"
/>
<label
htmlFor="imageInput"
className={`absolute inset-0 z-10 flex items-center justify-center cursor-pointer ${
isHovering ? "opacity-100" : "opacity-0"
}`}
style={{ transition: 'opacity 0.3s' }}
>
<p className="text-white text-center bg-black bg-opacity-50 px-2 py-1 rounded">Upload Image</p>
</label>
<input
type="file"
id="imageInput"
accept="image/*"
onChange={handleImageChange}
className="hidden"
/>
</>
) : (
<>
<label
htmlFor="imageInput"
className="absolute inset-0 z-10 flex items-center justify-center cursor-pointer">
<p className="text-white text-center bg-black bg-opacity-50 px-2 py-1 rounded">Upload Image</p>
</label>
<input
type="file"
id="imageInput"
accept="image/*"
onChange={handleImageChange}
className="hidden"
/>
</>
)}
</div>
{/* Content of the form */}
<div className="flex flex-col min-w-[360px]">
<div className="flex justify-between">
<p className="font-bold">First name:</p>
{!editProfile ? (
<p>{newProfile.first_name}</p>
) : (
<>
<label htmlFor="imageInput"
className={'absolute inset-0 z-10 flex items-center justify-center cursor-pointer'}>
<p className="text-white text-center bg-black bg-opacity-50 px-2 py-1 rounded">Upload Image</p>
</label>
<input
type="file"
id="imageInput"
accept="image/*"
onChange={handleImageChange}
className="hidden"
/>
</>
<input
type="text"
value={newProfile.first_name}
onChange={handleFirstNameChange}
name="first_name"
className="border rounded p-1"
/>
)}
</div>
{/* Content of the form */}
<div className="flex flex-col min-w-[360px]">
<div className="row justify-content-center">
<div className="col-lg-5 col-sm-2 headers">
<p>First name: </p>
<p>Last name: </p>
<p>Email: </p>
<p>Current Plan: </p>
</div>
<div
className={`col-lg-5 col-sm-4 information ${
!editProfile ? "" : "editable"
}`}
>
{!editProfile ? (
<>
<p>{newProfile.first_name}</p>
<p>{newProfile.last_name}</p>
<p>{newProfile.email}</p>
<p>{entity.role}</p>
</>
) : (
<>
<input
type="text"
value={newProfile.first_name}
onChange={handleFirstNameChange}
name="first_name"
/>
<input
type="text"
value={newProfile.last_name}
onChange={handleLastNameChange}
name="last_name"
/>
<input
type="email"
value={newProfile.email}
onChange={handleEmailChange}
name="email"
/>
<p>{entity.role}</p>
</>
)}
</div>
</div>
<div className="flex justify-between">
<p className="font-bold">Last name:</p>
{!editProfile ? (
<p>{newProfile.last_name}</p>
) : (
<input
type="text"
value={newProfile.last_name}
onChange={handleLastNameChange}
name="last_name"
className="border rounded p-1"
/>
)}
</div>
</div>
<div className="row">
<div className="col-lg-12 editpage__buttons">
<button
style={{ backgroundColor: "black", color: "white" }}
onClick={() => setEditProfileActive(!editProfile)}
>
Update Info
</button>
<button
style={{ color: "white", backgroundColor: "black" }}
onClick={() => setEditProfileActive(!editProfile)}
type="submit"
>
Done
</button>
<Modal>
<ModalToggler>
<button
type={"button"}
style={{ backgroundColor: "black", color: "white" }}
onClick={(event) => {
event.preventDefault()
setEditProfileActive(!editProfile)
}}
>
Activate Registration Key
</button>
</ModalToggler>
<ModalContent
title={"Account Activation"}
description={
"Enter the token you have been given by the company to activate your " +
"account."
}
>
<RegisterUserForm/>
</ModalContent>
</Modal>
<div className="flex justify-between">
<p className="font-bold">Email:</p>
{!editProfile ? (
<p>{newProfile.email}</p>
) : (
<input
type="email"
value={newProfile.email}
onChange={handleEmailChange}
name="email"
className="border rounded p-1"
/>
)}
</div>
<div className="flex justify-between">
<p className="font-bold">Current Plan:</p>
<p>{entity.role}</p>
</div>
</div>
</form>
</div>
</div>
<div className="flex justify-center gap-4">
<button
className="bg-black text-white px-4 py-2 rounded"
onClick={() => setEditProfileActive(!editProfile)}
>
{editProfile ? "Cancel" : "Edit Profile"}
</button>
{editProfile && (
<button
className="bg-black text-white px-4 py-2 rounded"
type="submit"
>
Done
</button>
)}
<Modal>
<ModalToggler>
<button className="bg-black text-white px-4 py-2 rounded">
Activate Registration Key
</button>
</ModalToggler>
<ModalContent
title="Account Activation"
description="Enter the token you have been given by the company to activate your account."
>
<RegisterUserForm />
</ModalContent>
</Modal>
</div>
</form>
</div>
</div>
);
};

export default EditAccount;


Loading