Login Page, Navbar, AccountPage

package.json

@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "^3.0.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"

src/App.tsx

@@ -1,24 +1,34 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Login from './Login/Login';
+import Account from './ModuleAccess/Account';
+import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
+
+
+const NavBar = () => {
+  return (<nav>
+    <ul>
+      <li>
+        <a href='/login'>Login</a>
+      </li>
+      <li>
+        <a href='/account'>Account</a>
+      </li>
+    </ul>
+  </nav>)
+}
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          testing react with eDigital
-        </a>
-      </header>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<NavBar />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/account" element={<Account />} />
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

src/Login/Login.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import axios from 'axios'
+
+const Login = () => {
+    const [email, setEmail] = React.useState('')
+    const [password, setPassword] = React.useState('')
+
+    const handleSubmit = () => {
+        console.error("PostDATA")
+
+        const postData = async () => {
+            const data = { email, password };
+            const request = await fetch('http://10.0.1.25:9999/api-auth/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            })
+            const response = await request.json()
+            const token = response.token
+            localStorage.setItem('token', token);
+        }
+        postData()
+    }
+
+
+    return (
+        <div className='row'>
+            <h2>Login</h2>
+            <label>Email</label>
+            <input type="email" id="email" onChange={e => setEmail(e.target.value)} value={email} />
+            <label>Password</label>
+            <input type="password" id="password" onChange={e => setPassword(e.target.value)} value={password} />
+            <button type="submit" onClick={handleSubmit}>Login</button>
+        </div>
+    )
+}
+
+export default Login

src/ModuleAccess/Account.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react'
+
+const Account = () => {
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const token = localStorage.getItem('token')
+            const request = await fetch('http://10.0.1.25:9999/api-auth/account', {
+                headers: {
+                    "Authorization": `Token ${token}`
+                }
+            })
+            const response = await request.json()
+            console.log(response)
+        }
+        fetchData()
+    }, [])
+
+    return (
+        <div>
+            Account
+        </div>
+    )
+}
+
+export default Account

src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 import './index.css';
-import { store } from "./store";
+// import { store } from "./store";
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
@@ -11,9 +11,9 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <Provider store={store}>
+    {/* <Provider store={store}> */}
       <App />
-    </Provider>
+    {/* </Provider> */}
   </React.StrictMode>
 );
 

src/routes/config.tsx

@@ -1,45 +1,47 @@
-import { INav } from "../models/INav";
+// import { INav } from "../models/INav";
 
-import { SignInPage } from "../pages/SignInPage";
-import { HomePage } from "../pages/HomePage";
-import { AProtectedPage } from "../pages/AProtectedPage";
-import { AnotherProtectedPage } from "../pages/AnotherProtectedPage";
+// import { SignInPage } from "../pages/SignInPage";
+// import { HomePage } from "../pages/HomePage";
+// import { AProtectedPage } from "../pages/AProtectedPage";
+// import { AnotherProtectedPage } from "../pages/AnotherProtectedPage";
 
 
-export const GLOBAL_APP_ROUTES: INav[] = [
-    {
-        id: "1",
-        title: "DNA Map",
-        path: "/dna-map",
-        element: <HomePage />,
-        icon: "home",
-        authorities: ["admin", "guest", "user"],
-    },
-    {
-        id: "2",
-        title: "Seewiz",
-        path: "/seewiz",
-        element: <AProtectedPage />,
-        icon: "video-recorder",
-        authorities: ["admin", "has_protected_page"],
-    },
-    {
-        id: "3",
-        title: "Live Map",
-        path: "/live-map",
-        element: <AnotherProtectedPage />,
-        icon: "map",
-        authorities: ["admin", "has_another_protected_page"],
-    },
-];
+// export const GLOBAL_APP_ROUTES: INav[] = [
+//     {
+//         id: "1",
+//         title: "DNA Map",
+//         path: "/dna-map",
+//         element: <HomePage />,
+//         icon: "home",
+//         authorities: ["admin", "guest", "user"],
+//     },
+//     {
+//         id: "2",
+//         title: "Seewiz",
+//         path: "/seewiz",
+//         element: <AProtectedPage />,
+//         icon: "video-recorder",
+//         authorities: ["admin", "has_protected_page"],
+//     },
+//     {
+//         id: "3",
+//         title: "Live Map",
+//         path: "/live-map",
+//         element: <AnotherProtectedPage />,
+//         icon: "map",
+//         authorities: ["admin", "has_another_protected_page"],
+//     },
+// ];
 
-const defaultAuthRoutes = [
-    {
-        id: "1",
-        title: "Login",
-        path: "/login",
-        element: <SignInPage />,
-    },
-];
+// const defaultAuthRoutes = [
+//     {
+//         id: "1",
+//         title: "Login",
+//         path: "/login",
+//         element: <SignInPage />,
+//     },
+// ];
 
-export const AUTH_ROUTES: INav[] = defaultAuthRoutes;
+// export const AUTH_ROUTES: INav[] = defaultAuthRoutes;
+
+export {}

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "src"