325 lines
10 KiB
JavaScript
325 lines
10 KiB
JavaScript
// // // reactstrap components
|
|
// // import {
|
|
// // Button,
|
|
// // Card,
|
|
// // CardHeader,
|
|
// // CardBody,
|
|
// // FormGroup,
|
|
// // Form,
|
|
// // Input,
|
|
// // Container,
|
|
// // Row,
|
|
// // Col,
|
|
// // } from "reactstrap";
|
|
// // // core components
|
|
// // import UserHeader from "components/Headers/UserHeader.js";
|
|
|
|
// // const Profile = () => {
|
|
// // return (
|
|
// // <>
|
|
// // <UserHeader />
|
|
// // {/* Page content */}
|
|
// // {/* <Container className="mt--7" fluid>
|
|
// // <Row>
|
|
// // <Col xl="12">
|
|
// // <Card className="bg-secondary shadow">
|
|
// // <CardHeader className="bg-white border-0">
|
|
// // <Row className="align-items-center">
|
|
// // <Col xs="8">
|
|
// // <h3 className="mb-0">My Profile Settings</h3>
|
|
// // </Col>
|
|
// // </Row>
|
|
// // </CardHeader>
|
|
// // <CardBody>
|
|
// // <Form>
|
|
// // <Row>
|
|
// // <Col md="6">
|
|
// // <FormGroup>
|
|
// // <label>Your Full Name</label>
|
|
// // <Input placeholder="Enter full name" type="text" />
|
|
// // </FormGroup>
|
|
// // </Col>
|
|
// // <Col md="6">
|
|
// // <FormGroup>
|
|
// // <label>Pronouns</label>
|
|
// // <Input placeholder="Enter pronouns" type="text" />
|
|
// // </FormGroup>
|
|
// // </Col>
|
|
// // </Row>
|
|
// // <Row>
|
|
// // <Col md="6">
|
|
// // <FormGroup>
|
|
// // <label>Role</label>
|
|
// // <Input placeholder="Enter role" type="text" />
|
|
// // </FormGroup>
|
|
// // </Col>
|
|
// // <Col md="6">
|
|
// // <FormGroup>
|
|
// // <label>Department or Team</label>
|
|
// // <Input placeholder="Enter department" type="text" />
|
|
// // </FormGroup>
|
|
// // </Col>
|
|
// // </Row>
|
|
// // <Row>
|
|
// // <Col md="12">
|
|
// // <FormGroup>
|
|
// // <label>Email</label>
|
|
// // <Input placeholder="Enter email" type="email" />
|
|
// // </FormGroup>
|
|
// // </Col>
|
|
// // </Row>
|
|
// // <FormGroup>
|
|
// // <label>About Me</label>
|
|
// // <Input
|
|
// // type="textarea"
|
|
// // rows="4"
|
|
// // placeholder="Enter description"
|
|
// // />
|
|
// // </FormGroup>
|
|
// // <Button color="primary" type="submit">
|
|
// // Update
|
|
// // </Button>
|
|
// // </Form>
|
|
// // </CardBody>
|
|
// // </Card>
|
|
// // </Col>
|
|
// // </Row>
|
|
// // </Container>*/}
|
|
// // </>
|
|
// // );
|
|
// // };
|
|
|
|
// // export default Profile;
|
|
|
|
// import React from 'react';
|
|
// import { Link, useNavigate } from 'react-router-dom';
|
|
// import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
// const Profile = () => {
|
|
// const navigate = useNavigate();
|
|
|
|
// const handleLogout = () => {
|
|
// // Clear user session/token and redirect to login or homepage
|
|
// localStorage.removeItem("authToken");
|
|
// navigate('/auth/login');
|
|
// };
|
|
|
|
// return (
|
|
// <div className="container mt-5">
|
|
// <h3 className="mb-4">My Profile Settings</h3>
|
|
|
|
// <div className="mb-3">
|
|
// <label>Your Full Name</label>
|
|
// <input type="text" className="form-control" value="sysadmin" readOnly />
|
|
// </div>
|
|
|
|
// <div className="mb-3">
|
|
// <label>Pronouns</label>
|
|
// <input type="text" className="form-control" placeholder="Enter Pronouns" />
|
|
// </div>
|
|
|
|
// <div className="mb-3">
|
|
// <label>Role</label>
|
|
// <input type="text" className="form-control" placeholder="Enter Role" />
|
|
// </div>
|
|
|
|
// <div className="mb-3">
|
|
// <label>Department or Team</label>
|
|
// <input type="text" className="form-control" placeholder="Enter Department" />
|
|
// </div>
|
|
|
|
// <div className="mb-3">
|
|
// <label>Email</label>
|
|
// <input type="email" className="form-control" value="sysadmin" readOnly />
|
|
// </div>
|
|
|
|
// <div className="mb-3">
|
|
// <label>About Me</label>
|
|
// <textarea className="form-control" placeholder="Enter Description"></textarea>
|
|
// </div>
|
|
|
|
// <button
|
|
// className="btn btn-primary mb-4"
|
|
// onClick={() => navigate('/error404')}
|
|
// >
|
|
// Update
|
|
// </button>
|
|
|
|
// <hr />
|
|
|
|
// <p><strong>Password:</strong> Change Password for your account <Link to="/auth/resetpassword">Change password</Link></p>
|
|
|
|
// <hr />
|
|
|
|
// <p><strong>Security:</strong> Logout of all sessions except this current browser <span style={{ color: 'blue', cursor: 'pointer' }} onClick={handleLogout}>Logout other sessions</span></p>
|
|
|
|
// <hr />
|
|
|
|
// <p><strong>Deactivation:</strong> Remove access to all organizations and workspace in CloudnSure <span style={{ color: 'blue', cursor: 'pointer' }} onClick={handleLogout}>Deactivate account</span></p>
|
|
// </div>
|
|
// );
|
|
// };
|
|
|
|
// export default Profile;
|
|
|
|
|
|
|
|
import React, { useState, useRef } from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
|
|
const Profile = () => {
|
|
const navigate = useNavigate();
|
|
const [preview, setPreview] = useState(null);
|
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
const fileInputRef = useRef(null);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem("authToken");
|
|
navigate('/auth/login');
|
|
};
|
|
|
|
const handleFileChange = (e) => {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
setSelectedFile(file);
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setPreview(reader.result);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
const triggerFileInput = () => {
|
|
fileInputRef.current.click();
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setPreview(null);
|
|
setSelectedFile(null);
|
|
fileInputRef.current.value = '';
|
|
};
|
|
|
|
const handleUpload = () => {
|
|
if (!selectedFile) return;
|
|
|
|
// Here you would typically upload the file to your server
|
|
// For example:
|
|
// const formData = new FormData();
|
|
// formData.append('profileImage', selectedFile);
|
|
// fetch('/api/upload-profile-image', {
|
|
// method: 'POST',
|
|
// body: formData
|
|
// })
|
|
// .then(response => response.json())
|
|
// .then(data => {
|
|
// console.log('Upload successful', data);
|
|
// })
|
|
// .catch(error => {
|
|
// console.error('Upload error', error);
|
|
// });
|
|
|
|
alert('Upload functionality would go here');
|
|
};
|
|
|
|
return (
|
|
<div className="container mt-5">
|
|
<h3 className="mb-4">My Profile Settings</h3>
|
|
|
|
{/* Simple Image Upload Section */}
|
|
<div className="mb-4">
|
|
<h5>PROFILE PHOTO</h5>
|
|
<div className="d-flex align-items-center mb-3">
|
|
<div className="me-3">
|
|
{preview ? (
|
|
<img
|
|
src={preview}
|
|
alt="Profile Preview"
|
|
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
|
|
/>
|
|
) : (
|
|
<div style={{ width: '100px', height: '100px', borderRadius: '50%', backgroundColor: '#f0f0f0' }}></div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
onChange={handleFileChange}
|
|
accept="image/*"
|
|
style={{ display: 'none' }}
|
|
/>
|
|
<button className="btn btn-outline-primary" onClick={triggerFileInput}>
|
|
Choose File
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action buttons - shown only when an image is selected */}
|
|
{preview && (
|
|
<div className="d-flex justify-content-end gap-2 mt-3">
|
|
<button className="btn btn-outline-secondary" onClick={handleCancel}>
|
|
Cancel
|
|
</button>
|
|
<button className="btn btn-primary" onClick={handleUpload}>
|
|
Upload
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Rest of the profile form */}
|
|
<div className="mb-3">
|
|
<label>Your Full Name</label>
|
|
<input type="text" className="form-control" value="sysadmin" readOnly />
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label>Pronouns</label>
|
|
<input type="text" className="form-control" placeholder="Enter Pronouns" />
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label>Role</label>
|
|
<input type="text" className="form-control" placeholder="Enter Role" />
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label>Department or Team</label>
|
|
<input type="text" className="form-control" placeholder="Enter Department" />
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label>Email</label>
|
|
<input type="email" className="form-control" value="sysadmin" readOnly />
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label>About Me</label>
|
|
<textarea className="form-control" placeholder="Enter Description"></textarea>
|
|
</div>
|
|
|
|
<button
|
|
className="btn btn-primary mb-4"
|
|
onClick={() => navigate('/error404')}
|
|
>
|
|
Update Profile
|
|
</button>
|
|
|
|
<hr />
|
|
|
|
<p><strong>Password:</strong> Change Password for your account <Link to="/admin/resetpassword">Change password</Link></p>
|
|
|
|
<hr />
|
|
|
|
<p><strong>Security:</strong> Logout of all sessions except this current browser <span style={{ color: 'blue', cursor: 'pointer' }} onClick={handleLogout}>Logout other sessions</span></p>
|
|
|
|
<hr />
|
|
|
|
<p><strong>Deactivation:</strong> Remove access to all organizations and workspace in CloudnSure <span style={{ color: 'blue', cursor: 'pointer' }} onClick={handleLogout}>Deactivate account</span></p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Profile; |