adding Router and starting the login page
This commit is contained in:
@@ -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;
|
||||
@@ -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
|
||||
67
webapp/src/pages/login/index.jsx
Normal file
67
webapp/src/pages/login/index.jsx
Normal file
@@ -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
|
||||
11
webapp/src/pages/register/index.jsx
Normal file
11
webapp/src/pages/register/index.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
function Register() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Register
|
||||
@@ -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')
|
||||
|
||||
Reference in New Issue
Block a user