Initial code Commit
This commit is contained in:
Varun Kaushik
@@ -0,0 +1,325 @@
|
||||
// // // 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;
|
||||
Reference in New Issue
Block a user