74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
import { useState } from "react";
|
|
|
|
export default function ManageAccount() {
|
|
const [name, setName] = useState("John Doe");
|
|
const [email, setEmail] = useState("johndoe@example.com");
|
|
const [phoneNumber, setPhoneNumber] = useState("123-456-7890");
|
|
const [password, setPassword] = useState("************");
|
|
|
|
const handleNameEdit = () => {
|
|
// Add your logic to edit the name
|
|
};
|
|
|
|
const handleEmailEdit = () => {
|
|
// Add your logic to edit the email
|
|
};
|
|
|
|
const handlePhoneNumberEdit = () => {
|
|
// Add your logic to edit the phone number
|
|
};
|
|
|
|
const handlePasswordChange = () => {
|
|
// Add your logic to change the password
|
|
};
|
|
|
|
const handleAccountDelete = () => {
|
|
// Add your logic to delete the account
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h2>Manage Account</h2>
|
|
<h4>Profile Information</h4>
|
|
<div className="input-style">
|
|
<label htmlFor="name">Name:</label>
|
|
<input type="text" id="name" value={name} readOnly />
|
|
<button onClick={handleNameEdit} className="btn-input">
|
|
Edit
|
|
</button>
|
|
</div>
|
|
<div className="input-style">
|
|
<label htmlFor="email">Email:</label>
|
|
<input type="email" id="email" value={email} readOnly />
|
|
<button onClick={handleEmailEdit} className="btn-input">
|
|
Edit
|
|
</button>
|
|
</div>
|
|
<div className="input-style">
|
|
<label htmlFor="phoneNumber">Phone Number:</label>
|
|
<input type="tel" id="phoneNumber" value={phoneNumber} readOnly />
|
|
<button onClick={handlePhoneNumberEdit} className="btn-input">
|
|
Edit
|
|
</button>
|
|
</div>
|
|
<h4>Security</h4>
|
|
<div className="input-style">
|
|
<label htmlFor="password">Password:</label>
|
|
<input type="password" id="password" value={password} readOnly />
|
|
<button onClick={handlePasswordChange} className="btn-input">
|
|
Change Password
|
|
</button>
|
|
</div>
|
|
<h4>Account Actions</h4>
|
|
<div>
|
|
<button onClick={handleAccountDelete} className="btn-custom">
|
|
Delete Account
|
|
</button>
|
|
<p className="mt-10">
|
|
Warning: Deleting your account is irreversible. All your data will be permanently deleted.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|