Merge branch '23' into 'dev'

added register form

See merge request !25

frontend/src/components/Layout.tsx

@@ -3,12 +3,13 @@ import {NavLink, Outlet} from 'react-router-dom';
 
 const Layout: FunctionComponent = (): ReactElement => {
 	return (
-		<div className="container mx-auto ">
-			<div className="flex justify-between">
+		<div className="bg-gray-50 dark:bg-gray-900">
+			<div className="flex justify-between container mx-auto">
 				<a href="#">Add Post</a>
 				<div>
-					<NavLink to={'register'}>Register</NavLink>
-					<NavLink to={'login'}>Login</NavLink>
+					<NavLink className={'mr-3'} to={'register'}>
+						Login or Register
+					</NavLink>
 				</div>
 			</div>
 			<Outlet />

frontend/src/containers/HomePage.tsx

@@ -2,7 +2,11 @@ import {FunctionComponent, ReactElement, useEffect} from 'react';
 import {shallowEqual, useDispatch} from 'react-redux';
 
 const HomePage: FunctionComponent = (): ReactElement => {
-	return <div>homepage</div>;
+	return (
+		<div className="bg-gray-50 dark:bg-gray-900 h-screen w-full container mx-auto">
+			homepage
+		</div>
+	);
 };
 
 export default HomePage;

frontend/src/containers/Register.tsx

@@ -28,64 +28,105 @@ const Register = () => {
 	// }
 
 	return (
-		<div className="w-full max-w-xs m-auto h-screen mt-[200px]">
-			<form
-				onSubmit={handleSubmit}
-				className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
-			>
-				<div className="mb-4">
+		<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+			<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">
+						Create and account
+					</h1>
+					<form className="space-y-4 md:space-y-6" action="#">
+						<div>
 							<label
-						className="block text-gray-700 text-sm font-bold mb-2"
 								htmlFor="username"
+								className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
 							>
-						Username
+								Your username
 							</label>
 							<input
-						onChange={handleUserInput}
-						className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-						id="username"
 								type="text"
-						placeholder="Username"
 								name="username"
+								id="username"
+								className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-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="username"
+								required
 							/>
 						</div>
-				<div className="mb-6">
+						<div>
 							<label
-						className="block text-gray-700 text-sm font-bold mb-2"
 								htmlFor="password"
+								className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
 							>
 								Password
 							</label>
 							<input
-						onChange={handleUserInput}
-						className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
-						id="password"
 								type="password"
-						placeholder="Password"
 								name="password"
+								id="password"
+								placeholder="••••••••"
+								className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-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">
-					<button
-						className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
-						type="button"
-						onClick={handleRegister}
+						<div>
+							<label
+								htmlFor="confirm-password"
+								className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
 							>
-						Register
-					</button>
+								Confirm password
+							</label>
+							<input
+								type="confirm-password"
+								name="confirm-password"
+								id="confirm-password"
+								placeholder="••••••••"
+								className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-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-start">
+							<div className="flex items-center h-5">
+								<input
+									id="terms"
+									aria-describedby="terms"
+									type="checkbox"
+									className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
+									required
+								/>
+							</div>
+							<div className="ml-3 text-sm">
+								<label
+									htmlFor="terms"
+									className="font-light text-gray-500 dark:text-gray-300"
+								>
+									I accept the{' '}
+									<a
+										className="font-medium text-primary-600 hover:underline dark:text-primary-500"
+										href="#"
+									>
+										Terms and Conditions
+									</a>
+								</label>
+							</div>
+						</div>
 						<button
-						className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
 							type="submit"
+							className="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
 						>
-						Sign In
+							Create an account
 						</button>
-				</div>
-			</form>
-			<p className="text-center text-gray-500 text-xs">
-				&copy;2020 Acme Corp. All rights reserved.
+						<p className="text-sm font-light text-gray-500 dark:text-gray-400">
+							Already have an account?{' '}
+							<a
+								href="#"
+								className="font-medium text-primary-600 hover:underline dark:text-primary-500"
+							>
+								Login here
+							</a>
 						</p>
+					</form>
+				</div>
+			</div>
 		</div>
 	);
 };
-
 export default Register;

frontend/src/index.css

@@ -4,6 +4,10 @@
 	font-weight: 400;
 }
 
+* {
+	color: white;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;