Merge pull request #38 from Kratik1093/faculty-profile

teacher-profile

package.json

@@ -14,6 +14,8 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-icon": "^1.0.0",
+    "react-markdown": "^9.0.1",
+    "react-model": "^4.3.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -16,6 +16,7 @@ import ReadyQuestionPaperDashboard from './ReadyQuestionPaperDashboard/ReadyQues
 import EditReadyQuestion from './edit_ready_question/EditReadyQuestion';
 import Error404 from './error/error404';
 import EditQuestion from './edit_question/EditQuestion';
+import Profile from './Profile/profile';
 
 
 
@@ -76,6 +77,7 @@ const App = () => {
           <Route path="/questionPaperDashboard/:paperId" element={<QuestionPaperDashboard />}/>
           <Route path="/ready_papers" element={<ReadyPaperDashboard />}/>
           <Route path="/ready_questions/:paperId" element={<ReadyQuestionPaperDashboard />} />
+          <Route path='/profile' element={<Profile/>}/>
         </>
       )}
 

src/Forgot_Password/Forgot_Password.css

@@ -1,5 +1,5 @@
 .forgot-container-main{
-    background-color: #282828;
+    background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;

src/Profile/profile.css

@@ -0,0 +1,146 @@
+/* Profile container */
+.profile-card {
+  background-color: #282828;
+  border-radius: 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 50%;
+  margin: 100px auto;
+  text-align: center;
+  padding: 20px;
+  position: relative; /* Added to position the edit button relative to the container */
+}
+
+.profile-header {
+  position: relative;
+  display: inline-block;
+}
+
+.profile-image {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 5px solid rgb(255, 255, 255);
+  margin-top: -90px;
+  box-shadow: 10px 15px 60px rgba(255, 255, 255, .1);
+}
+
+.plus-icon {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-color: black;
+  color: white;
+  border-radius: 50%;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.profile-details {
+  margin-top: -40px;
+}
+
+.profile-email {
+  font-size: 16px;
+  color: #ffffff;
+  margin-bottom: 5px;
+}
+
+.profile-name {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  margin-top: 50px;
+}
+
+.profile-mob {
+  font-size: 18px;
+  color: gray;
+  margin-bottom: 15px;
+}
+
+/* Edit button */
+.edit-button {
+  background-color: #4CAF50; 
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 20px 2px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.edit-button:hover {
+  background-color: #45a049;
+}
+
+/* Modal styles */
+.modal {
+  background-color: #1a1a1a;
+  padding: 20px;
+  border-radius: 10px;
+  width: 500px;
+  margin: auto;
+  align-items: center;
+}
+
+.overlay {
+  background-color: rgba(0, 0, 0, 0.75);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Modal form styles */
+.modal-form {
+  display: grid;
+  flex-direction: column;
+}
+
+.modal-form label {
+  margin-bottom: 10px;
+  color: white;
+  display: inline-grid;
+}
+
+.modal-form input {
+  padding: 10px;
+  margin-top: 5px;
+  border-radius: 5px;
+  background-color: #282828;
+  border: 1px solid #fffdfd;
+  color: white;
+}
+
+.modal-buttons {
+  gap: 5px;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.modal-buttons button {
+  background-color: #4CAF50;
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.modal-buttons button:hover {
+  background-color: #45a049;
+}

src/Profile/profile.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import './profile.css'; // Ensure the CSS file is created for styling
+import Navbar from '../Navbar/Navbar';
+import { FaPlus } from 'react-icons/fa'; // Importing the plus icon
+import Modal from 'react-modal'; // Importing react-modal
+
+import defaultPhoto from "../Assets/profile_photo.png"; // Corrected import statement
+
+Modal.setAppElement('#root'); // Set the root element for accessibility
+
+const Profile = () => {
+  const [profileData, setProfileData] = useState({
+    photo: defaultPhoto,
+    name: "Niko",
+    email: "[email protected]",
+    mobile_no: "1234567890",
+  });
+
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [newProfileData, setNewProfileData] = useState(profileData);
+
+  const openModal = () => {
+    setNewProfileData(profileData);
+    setModalIsOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalIsOpen(false);
+  };
+
+  const handleSave = () => {
+    setProfileData(newProfileData);
+    setModalIsOpen(false);
+    alert("Profile updated successfully!");
+  };
+
+  const handleImageChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setProfileData({
+          ...profileData,
+          photo: e.target.result,
+        });
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <>
+      <Navbar />
+      <div className="profile-card">
+        <div className="profile-header">
+          <img src={profileData.photo} alt="Profile" className="profile-image" />
+          <label htmlFor="file-input" className="plus-icon">
+            <FaPlus />
+          </label>
+          <input
+            id="file-input"
+            type="file"
+            accept="image/*"
+            onChange={handleImageChange}
+            style={{ display: 'none' }}
+          />
+        </div>
+        <div className="profile-details">
+          <div className="profile-name">{profileData.name}</div>
+          <p className="profile-email">Email: {profileData.email}</p>
+          <p className="profile-mob">Mobile: {profileData.mobile_no}</p>
+        </div>
+        <button className="edit-button" onClick={openModal}>Edit Profile</button>
+      </div>
+
+      <Modal
+        isOpen={modalIsOpen}
+        onRequestClose={closeModal}
+        contentLabel="Edit Profile"
+        className="modal"
+        overlayClassName="overlay"
+      >
+        <h2>Edit Profile</h2>
+        <form className="modal-form">
+          <label>
+            Name:
+            <input
+              type="text"
+              value={newProfileData.name}
+              onChange={(e) => setNewProfileData({ ...newProfileData, name: e.target.value })}
+            />
+          </label>
+          <label>
+            Email:
+            <input
+              type="email"
+              value={newProfileData.email}
+              onChange={(e) => setNewProfileData({ ...newProfileData, email: e.target.value })}
+            />
+          </label>
+          <label>
+            Mobile:
+            <input
+              type="text"
+              value={newProfileData.mobile_no}
+              onChange={(e) => setNewProfileData({ ...newProfileData, mobile_no: e.target.value })}
+            />
+          </label>
+          <label>
+            password:
+            <input
+              type="email"
+              value={newProfileData.email}
+              onChange={(e) => setNewProfileData({ ...newProfileData, email: e.target.value })}
+            />
+          </label>
+          <div className="modal-buttons">
+            <button type="button" onClick={handleSave}>Save</button>
+            <button type="button" onClick={closeModal}>Cancel</button>
+          </div>
+        </form>
+      </Modal>
+    </>
+  );
+};
+
+export default Profile;