Login hot fix

.prettierrc

@@ -5,5 +5,5 @@
   "singleQuote": true,
   "trailingComma": "none",
   "jsxBracketSameLine": false,
-  "endOfLine": "lf"
+  "endOfLine": "auto"
 }

package.json

@@ -12,6 +12,7 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
+    "validator": "^13.12.0",
     "web-vitals": "^3.1.1"
   },
   "scripts": {

src/App.css

@@ -14,3 +14,7 @@
 .ReactModal__Html--open {
   overflow: hidden;
 }
+
+.profile-button-group > section {
+  padding-left: 400px;
+}

src/App.js

@@ -8,7 +8,8 @@ import Verification from './pages/verification';
 import { AuthProvider, ProtectedRoute } from './context/auth';
 import { ModalProvider } from './context/modal';
 import Welcome from './pages/welcome';
-
+import ViewProfile from './pages/profileView';
+import EditProfile from './pages/profileEdit';
 const App = () => {
   return (
     <>
@@ -28,6 +29,24 @@ const App = () => {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="profile/:id"
+              element={
+                <ProtectedRoute>
+                  <ViewProfile></ViewProfile>
+                </ProtectedRoute>
+              }
+            />
+
+            <Route
+              path="profile/:id/edit"
+              element={
+                <ProtectedRoute>
+                  <EditProfile></EditProfile>
+                </ProtectedRoute>
+              }
+            />
+
             <Route
               path="welcome"
               element={

src/components/form/textInput/index.js

@@ -1,8 +1,20 @@
 import { useState } from 'react';
 
-const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
+const TextInput = ({
+  value,
+  onChange,
+  errorResponse = '',
+  name,
+  label,
+  icon,
+  require = false,
+  type = 'text',
+  readOnly = false
+}) => {
   const [input, setInput] = useState('');
   const [showpassword, setShowpassword] = useState(false);
+  // form is valid if has a text value or field is optional
+  // const [isValid, setIsValid] = useState(!!value || !require);
   if (type === 'password') {
     return (
       <div className="inputwrapper">
@@ -11,21 +23,33 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
           type={type}
           name={name}
           value={value}
+          required={require}
+          readOnly={readOnly}
           onChange={(e) => {
             onChange(e);
             setInput(e.target.value);
           }}
         />
-        {showpassword && <input type="text" name={name} value={input} className="passwordreveal" />}
+        {showpassword && (
+          <input
+            type="text"
+            name={name}
+            value={input}
+            className="passwordreveal"
+            readOnly={readOnly}
+          />
+        )}
         <button
           className={`showpasswordbutton formbutton ${showpassword === true && '__faded'}`}
           onClick={(e) => {
             e.preventDefault();
             setShowpassword(!showpassword);
           }}
+          type="button"
         >
           <EyeLogo />
         </button>
+        {errorResponse && <span className="input-invalid">{errorResponse}</span>}
       </div>
     );
   } else {
@@ -36,10 +60,13 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
           type={type}
           name={name}
           value={value}
+          required={require}
+          readOnly={readOnly}
           onChange={onChange}
           className={icon && 'input-has-icon'}
         />
         {icon && <span className="input-icon">{icon}</span>}
+        {errorResponse && <span className="input-invalid">{errorResponse}</span>}
       </div>
     );
   }

src/components/navigation/index.js

@@ -4,6 +4,7 @@ import HomeIcon from '../../assets/icons/homeIcon';
 import ProfileIcon from '../../assets/icons/profileIcon';
 import useAuth from '../../hooks/useAuth';
 import './style.css';
+import { getId } from '../../service/tokenService';
 
 const Navigation = () => {
   const { token } = useAuth();
@@ -22,7 +23,7 @@ const Navigation = () => {
           </NavLink>
         </li>
         <li>
-          <NavLink to="/">
+          <NavLink to={`/profile/${getId()}`}>
             <ProfileIcon />
             <p>Profile</p>
           </NavLink>

src/components/profile/index.js

@@ -0,0 +1,177 @@
+import './profile.css';
+import { useContext } from 'react';
+import Form from '../form';
+import TextInput from '../form/textInput';
+
+const Profile = ({ readOnly, UserContext }) => {
+  if (!UserContext) {
+    throw new Error('UserContext is required');
+  }
+
+  const context = useContext(UserContext);
+  const { user, updatedUser, onChange, submit } = context;
+  const initials = user ? `${user.firstName[0]}${user.lastName[0]}` : '';
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="profile-container">
+      <h1>{readOnly ? 'View Profile' : 'Edit Profile'}</h1>
+      <div className="profile-edit-section">
+        <div className="profile-header">
+          <div className="profile-icon">
+            <p>{initials}</p>
+          </div>
+          <label className="profile-name">
+            <p className="profile-name-header">{`${user.firstName} ${user.lastName}`}</p>
+            <p>{user.role === 'STUDENT' ? 'Student' : 'Teacher'}</p>
+          </label>
+        </div>
+
+        <div className="profile-body">
+          <section>
+            <Form className="profile-body-forms" onSubmit={submit}>
+              <section>
+                <h3>Basic Info</h3>
+                <div className="profile-smaller-icon">
+                  <p>{initials}</p>
+                </div>
+                <TextInput
+                  value={updatedUser ? updatedUser.firstName || user.firstName : user.firstName}
+                  onChange={onChange}
+                  name="firstName"
+                  label="First Name"
+                  readOnly={readOnly}
+                  require={true}
+                />
+                <TextInput
+                  value={updatedUser ? updatedUser.lastName || user.lastName : user.lastName}
+                  onChange={onChange}
+                  name="lastName"
+                  label="Last Name"
+                  readOnly={readOnly}
+                  require={true}
+                />
+                <TextInput
+                  value={
+                    updatedUser
+                      ? updatedUser.username || user.email.split('@')[0]
+                      : user.email.split('@')[0]
+                  }
+                  onChange={onChange}
+                  name="username"
+                  label="Username"
+                  readOnly={readOnly}
+                  require={true}
+                />
+                <TextInput
+                  value={updatedUser ? updatedUser.githubUrl || user.githubUrl : user.githubUrl}
+                  onChange={onChange}
+                  name="githubUrl"
+                  label="GitHub Username"
+                  readOnly={readOnly}
+                  require={true}
+                />
+              </section>
+
+              <section>
+                <h3>{user.role === 'STUDENT' ? 'Training Info' : 'Professional Info'}</h3>
+                <TextInput
+                  value={updatedUser ? updatedUser.role || user.role : user.role}
+                  onChange={onChange}
+                  name="role"
+                  label="Role"
+                  readOnly={readOnly}
+                  require={true}
+                />
+                <TextInput
+                  value={updatedUser ? updatedUser.specialism || 'N/A' : 'N/A'}
+                  onChange={onChange}
+                  name="specialism"
+                  label="Specialism"
+                  readOnly={readOnly}
+                  require={true}
+                />
+                {user.role === 'STUDENT' ? (
+                  <>
+                    <TextInput
+                      value={updatedUser ? updatedUser.cohortStartDate || 'N/A' : 'N/A'}
+                      onChange={onChange}
+                      name="cohortStartDate"
+                      label="Cohort Start Date"
+                      readOnly={readOnly}
+                      require={true}
+                    />
+                    <TextInput
+                      value={updatedUser ? updatedUser.cohortEndDate : 'N/A'}
+                      onChange={onChange}
+                      name="cohortEndDate"
+                      label="Cohort End Date"
+                      readOnly={readOnly}
+                      require={true}
+                    />
+                  </>
+                ) : (
+                  <TextInput
+                    value={updatedUser ? updatedUser.jobTitle || 'N/A' : 'N/A'}
+                    onChange={onChange}
+                    name="jobTitle"
+                    label="Job Title"
+                    readOnly={readOnly}
+                    require={true}
+                  />
+                )}
+              </section>
+              <section>
+                <h3>Contact Info</h3>
+                <TextInput
+                  value={updatedUser ? updatedUser.email || user.email : user.email}
+                  onChange={onChange}
+                  name="email"
+                  label="Email"
+                  readOnly={readOnly}
+                  require={true}
+                />
+                <TextInput
+                  value={updatedUser ? updatedUser.mobile || 'N/A' : 'N/A'}
+                  onChange={onChange}
+                  name="mobile"
+                  label="Mobile"
+                  readOnly={readOnly}
+                  require={true}
+                />
+                <TextInput
+                  value={updatedUser ? updatedUser.password || '********' : '********'}
+                  onChange={onChange}
+                  name="password"
+                  label="Password"
+                  readOnly={readOnly}
+                  require={true}
+                />
+              </section>
+              <section>
+                <h3>Bio</h3>
+                <textarea
+                  value={
+                    updatedUser
+                      ? updatedUser.biography || user.biography || ''
+                      : user.biography || ''
+                  }
+                  onChange={onChange}
+                  name="biography"
+                  label="Biography"
+                  readOnly={readOnly}
+                  required={true}
+                />
+              </section>
+            </Form>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;