From a441c3e78b8dd4bb3f59b6111a3f67435a3dba9a Mon Sep 17 00:00:00 2001
From: IbrahimKo95 <ibrahkonate95@gmail.com>
Date: Thu, 7 Dec 2023 20:09:33 +0100
Subject: [PATCH] adding Router and starting the login page

---
 webapp/src/App.js                   | 25 -----------
 webapp/src/index.js                 | 13 +++---
 webapp/src/pages/login/index.jsx    | 67 +++++++++++++++++++++++++++++
 webapp/src/pages/register/index.jsx | 11 +++++
 webapp/tailwind.config.js           | 10 ++++-
 5 files changed, 94 insertions(+), 32 deletions(-)
 delete mode 100644 webapp/src/App.js
 create mode 100644 webapp/src/pages/login/index.jsx
 create mode 100644 webapp/src/pages/register/index.jsx

diff --git a/webapp/src/App.js b/webapp/src/App.js
deleted file mode 100644
index 3784575..0000000
--- a/webapp/src/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
diff --git a/webapp/src/index.js b/webapp/src/index.js
index 8994ac3..f935abc 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -1,15 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import Login from "./pages/login";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+      <BrowserRouter>
+          <Routes>
+              <Route path="/login" element={<Login />}/>
+          </Routes>
+      </BrowserRouter>
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
\ No newline at end of file
diff --git a/webapp/src/pages/login/index.jsx b/webapp/src/pages/login/index.jsx
new file mode 100644
index 0000000..48e6b87
--- /dev/null
+++ b/webapp/src/pages/login/index.jsx
@@ -0,0 +1,67 @@
+
+
+function Login() {
+    return (
+        <section className="bg-gray-50 dark:bg-gray-900">
+            <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+                <a href="#" className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
+                    <img className="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
+                         alt="logo"/>
+                    Debate
+                </a>
+                <div
+                    className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+                    <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
+                        <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+                            Sign in to your account
+                        </h1>
+                        <form className="space-y-4 md:space-y-6" action="#">
+                            <div>
+                                <label htmlFor="email"
+                                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your
+                                    email</label>
+                                <input type="email" name="email" id="email"
+                                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                                       placeholder="name@company.com" required=""/>
+                            </div>
+                            <div>
+                                <label htmlFor="password"
+                                       className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
+                                <input type="password" name="password" id="password" placeholder="••••••••"
+                                       className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                                       required=""/>
+                            </div>
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-start">
+                                    <div className="flex items-center h-5">
+                                        <input id="remember" aria-describedby="remember" type="checkbox"
+                                               className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
+                                               required=""/>
+                                    </div>
+                                    <div className="ml-3 text-sm">
+                                        <label htmlFor="remember" className="text-gray-500 dark:text-gray-300">Remember
+                                            me</label>
+                                    </div>
+                                </div>
+                                <a href="#"
+                                   className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">Forgot
+                                    password?</a>
+                            </div>
+                            <button type="submit"
+                                    className="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Sign
+                                in
+                            </button>
+                            <p className="text-sm font-light text-gray-500 dark:text-gray-400">
+                                Don’t have an account yet? <a href="#"
+                                                              className="font-medium text-blue-600 hover:underline dark:text-blue-500">Sign
+                                up</a>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default Login
\ No newline at end of file
diff --git a/webapp/src/pages/register/index.jsx b/webapp/src/pages/register/index.jsx
new file mode 100644
index 0000000..7de5649
--- /dev/null
+++ b/webapp/src/pages/register/index.jsx
@@ -0,0 +1,11 @@
+
+
+function Register() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default Register
\ No newline at end of file
diff --git a/webapp/tailwind.config.js b/webapp/tailwind.config.js
index a807a58..bef004f 100644
--- a/webapp/tailwind.config.js
+++ b/webapp/tailwind.config.js
@@ -5,7 +5,15 @@ module.exports = {
     "./node_modules/flowbite/**/*.js"
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'darkGreen': '#4dab7f',
+        'mainBlue': '#047385',
+        'mainOrange': '#d76d1e',
+        'darkBlue': '#043743',
+
+      }
+    },
   },
   plugins: [
     require('flowbite/plugin')