Therapist sign up login pages

.env

@@ -0,0 +1,4 @@
+REACT_APP_SERVER_URL=http://localhost:5005
+# VITE_LIVE_SERVER=https://bookworm-backend.adaptable.app
+VITE_LIVE_SERVER=http://localhost:5005
+DEV_SERVER=http://localhost:5005

.env.sample

@@ -1 +1,3 @@
-REACT_APP_SERVER_URL=http://localhost:5005
+REACT_APP_SERVER_URL=http://localhost:5005
+# update live server string when working locally - change to localhost:5005
+VITE_LIVE_SERVER=

.gitignore

@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+.env
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fluentui/react-components": "^9.26.1",
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.jsx

@@ -1,3 +1,9 @@
+import {
+  FluentProvider,
+  teamsLightTheme,
+  Button,
+  Input,
+} from "@fluentui/react-components";
 import "./App.css";
 import { Routes, Route } from "react-router-dom";
 import Navbar from "./components/Navbar";
@@ -10,34 +16,100 @@ import SignupPage from "./pages/SignupPage";
 import LoginPage from "./pages/LoginPage";
 import IsPrivate from "./components/IsPrivate";
 import IsAnon from "./components/IsAnon";
+import IsTherapist from "./components/IsTherapist";
+import TherapistLoginPage from "./pages/TherapistLogin";
+import TherapistSignupPage from "./pages/TherapistSignUp";
+import TherapistDashboard from "./pages/TherapistDashboard";
 
 function App() {
   return (
     <div className="App">
-      <Navbar />
-
-      <Routes>      
-        <Route path="/" element={<HomePage />} />
-
-        <Route
-          path="/projects"
-          element={ <IsPrivate> <ProjectListPage /> </IsPrivate> } 
-        />
-
-        <Route
-          path="/projects/:projectId"
-          element={ <IsPrivate> <ProjectDetailsPage /> </IsPrivate> }
-        />
-
-        <Route
-          path="/projects/edit/:projectId"
-          element={ <IsPrivate> <EditProjectPage /> </IsPrivate> } 
-        />
-
-        <Route path="/signup" element={<IsAnon> <SignupPage /> </IsAnon>} />
-        <Route path="/login" element={<IsAnon> <LoginPage /> </IsAnon>} />
-
-      </Routes>
+      <FluentProvider theme={teamsLightTheme}>
+        <Navbar />
+
+        <Button appearance="primary">FLUENT UI FOR STEPHEN</Button>
+
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+
+          <Route
+            path="/projects"
+            element={
+              <IsPrivate>
+                {" "}
+                <ProjectListPage />{" "}
+              </IsPrivate>
+            }
+          />
+
+          <Route
+            path="/projects/:projectId"
+            element={
+              <IsPrivate>
+                {" "}
+                <ProjectDetailsPage />{" "}
+              </IsPrivate>
+            }
+          />
+
+          <Route
+            path="/projects/edit/:projectId"
+            element={
+              <IsPrivate>
+                {" "}
+                <EditProjectPage />{" "}
+              </IsPrivate>
+            }
+          />
+
+          <Route
+            path="/signup"
+            element={
+              <IsAnon>
+                {" "}
+                <SignupPage />{" "}
+              </IsAnon>
+            }
+          />
+          <Route
+            path="/login"
+            element={
+              <IsAnon>
+                {" "}
+                <LoginPage />{" "}
+              </IsAnon>
+            }
+          />
+
+          <Route
+            path="/therapist/signup"
+            element={
+              <IsAnon>
+                {" "}
+                <TherapistSignupPage />{" "}
+              </IsAnon>
+            }
+          />
+          <Route
+            path="/therapist/login"
+            element={
+              <IsAnon>
+                {" "}
+                <TherapistLoginPage />{" "}
+              </IsAnon>
+            }
+          />
+          <Route
+            path="/therapist/dashboard"
+            element={
+              <IsTherapist>
+                {" "}
+                <TherapistDashboard />{" "}
+              </IsTherapist>
+            }
+          />
+        </Routes>
+      </FluentProvider>
     </div>
   );
 }

src/components/AddProject.jsx → src/components/AddProject/index.jsx

@@ -1,27 +1,24 @@
 import { useState } from "react";
 import axios from "axios";
 
-const API_URL = "http://localhost:5005";
+const API_URL = import.meta.env.VITE_LIVE_SERVER;
 
 function AddProject(props) {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
 
-
   const handleSubmit = (e) => {
     e.preventDefault();
     const requestBody = { title, description };
 
     // Get the token from the localStorage
-    const storedToken = localStorage.getItem('authToken');
+    const storedToken = localStorage.getItem("authToken");
 
     // Send the token through the request "Authorization" Headers
     axios
-      .post(
-        `${API_URL}/api/projects`,
-        requestBody,
-        { headers: { Authorization: `Bearer ${storedToken}` } }
-      )
+      .post(`${API_URL}/api/projects`, requestBody, {
+        headers: { Authorization: `Bearer ${storedToken}` },
+      })
       .then((response) => {
         // Reset the state
         setTitle("");
@@ -31,7 +28,6 @@ function AddProject(props) {
       .catch((error) => console.log(error));
   };
 
-
   return (
     <div className="AddProject">
       <h3>Add Project</h3>
@@ -59,4 +55,4 @@ function AddProject(props) {
   );
 }
 
-export default AddProject;
+export default AddProject;

src/components/AddTask.jsx → src/components/AddTask/index.jsx

@@ -1,49 +1,44 @@
 import { useState } from "react";
 import axios from "axios";
 
-const API_URL = "http://localhost:5005";
-
+const API_URL = import.meta.env.VITE_LIVE_SERVER;
 
 function AddTask(props) {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
 
-
   const handleSubmit = (e) => {
-    e.preventDefault(); 
+    e.preventDefault();
 
     // We need the project id when creating the new task
     const { projectId } = props;
     // Create an object representing the body of the POST request
     const requestBody = { title, description, projectId };
 
     // Get the token from the localStorage
-    const storedToken = localStorage.getItem('authToken');
+    const storedToken = localStorage.getItem("authToken");
 
-    // Send the token through the request "Authorization" Headers   
+    // Send the token through the request "Authorization" Headers
     axios
-      .post(
-        `${API_URL}/api/tasks`,
-        requestBody,
-        { headers: { Authorization: `Bearer ${storedToken}` } }        
-      )
+      .post(`${API_URL}/api/tasks`, requestBody, {
+        headers: { Authorization: `Bearer ${storedToken}` },
+      })
       .then((response) => {
         // Reset the state to clear the inputs
         setTitle("");
         setDescription("");
-      
+
         // Invoke the callback function coming through the props
         // from the ProjectDetailsPage, to refresh the project details
         props.refreshProject();
       })
       .catch((error) => console.log(error));
   };
 
-
   return (
     <div className="AddTask">
       <h3>Add New Task</h3>
-      
+
       <form onSubmit={handleSubmit}>
         <label>Title:</label>
         <input
@@ -67,4 +62,4 @@ function AddTask(props) {
   );
 }
 
-export default AddTask;
+export default AddTask;

src/components/IsAnon.jsx → src/components/IsAnon/index.jsx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { AuthContext } from "../context/auth.context";
+import { AuthContext } from "../../context/auth.context";
 import { Navigate } from "react-router-dom";
 
 function IsAnon({ children }) {
@@ -9,12 +9,12 @@ function IsAnon({ children }) {
   if (isLoading) return <p>Loading ...</p>;
 
   if (isLoggedIn) {
-    // If the user is logged in, navigate to home page ❌    
+    // If the user is logged in, navigate to home page ❌
     return <Navigate to="/" />;
   } else {
     // If the user is not logged in, allow to see the page ✅
     return children;
   }
 }
 
-export default IsAnon;
+export default IsAnon;

src/components/IsPrivate.jsx → src/components/IsPrivate/index.jsx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { AuthContext } from "../context/auth.context";
+import { AuthContext } from "../../context/auth.context";
 import { Navigate } from "react-router-dom";
 
 function IsPrivate({ children }) {
@@ -9,12 +9,12 @@ function IsPrivate({ children }) {
   if (isLoading) return <p>Loading ...</p>;
 
   if (!isLoggedIn) {
-  // If the user is not logged in ❌
+    // If the user is not logged in ❌
     return <Navigate to="/login" />;
   } else {
-  // If the user is logged in, allow to see the page ✅
+    // If the user is logged in, allow to see the page ✅
     return children;
   }
 }
 
-export default IsPrivate;
+export default IsPrivate;

src/components/IsTherapist/index.jsx

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+import { TherapistAuthContext } from "../../context/therapistAuth.context";
+import { Navigate } from "react-router-dom";
+
+function IsTherapist({ children }) {
+  const { isLoggedIn, isLoading } = useContext(TherapistAuthContext);
+
+  if (isLoading) return <p>Loading ...</p>;
+
+  if (!isLoggedIn) {
+    return <Navigate to="/therapist/login" />;
+  } else {
+    return children;
+  }
+}
+
+export default IsTherapist;

src/components/Navbar.jsx → src/components/Navbar/index.jsx

@@ -1,6 +1,7 @@
+import { Button } from "@fluentui/react-components";
 import { Link } from "react-router-dom";
 import { useContext } from "react";
-import { AuthContext } from "../context/auth.context";
+import { AuthContext } from "../../context/auth.context";
 
 function Navbar() {
   // Subscribe to the AuthContext to gain access to
@@ -10,16 +11,16 @@ function Navbar() {
   return (
     <nav>
       <Link to="/">
-        <button>Home</button>
+        <Button>Home</Button>
       </Link>
 
       {isLoggedIn && (
         <>
           <Link to="/projects">
-            <button>Projects</button>
+            <Button>Projects</Button>
           </Link>
 
-          <button onClick={logOutUser}>Logout</button>
+          <Button onClick={logOutUser}>Logout</Button>
           <span>{user && user.name}</span>
         </>
       )}
@@ -28,11 +29,18 @@ function Navbar() {
         <>
           <Link to="/signup">
             {" "}
-            <button>Sign Up</button>{" "}
+            <Button>Sign Up</Button>{" "}
           </Link>
           <Link to="/login">
             {" "}
-            <button>Login</button>{" "}
+            <Button>Login</Button>{" "}
+          </Link>
+          <Link to="/therapist/signup">
+            <Button>Sign Up Therapist</Button>
+          </Link>
+          <Link to="therapist/login">
+            {" "}
+            <Button>TherapistLogin</Button>{" "}
           </Link>
         </>
       )}