login page

react/src/pages/Login.js

@@ -0,0 +1,186 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const Page = styled.div`
+	width: 360px;
+	padding: 10% 0 0;
+	margin: auto;
+`;
+
+const Form = styled.form`
+	position: relative;
+	z-index: 1;
+	background: #ff6666;
+	max-width: 360px;
+	margin: 0 auto 100px;
+	padding: 45px;
+	text-align: center;
+
+	input {
+		font-family: "Roboto", sans-serif;
+		outline: 1;
+		background: #f2f2f2;
+		width: 100%;
+		border: 0;
+		margin: 0 0 15px;
+		padding: 15px;
+		box-sizing: border-box;
+		font-size: 14px;
+	}
+
+	button {
+		font-family: "Roboto", sans-serif;
+		text-transform: uppercase;
+		outline: 0;
+		background: #ffcc66;
+		width: 100%;
+		border: 0;
+		padding: 15px;
+		color: #ffffff;
+		font-size: 14;
+		cursor: pointer;
+	}
+`;
+
+const LinkButton = styled.button`
+	background: none !important;
+	padding: 0 !important;
+	margin: 0 !important;
+	border: 0 !important;
+	text-decoration: none !important;
+	color: inherit;
+`;
+
+function RegisterForm({ showLogin }) {
+	const [username, setUsername] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState("");
+
+	const registerUser = async e => {
+		e.preventDefault();
+
+		try {
+			const response = await fetch(
+				"https://mkr.thefeathers.in/register",
+				{
+					method: "POST",
+					headers: new Headers({
+						"content-type": "application/json",
+					}),
+					body: JSON.stringify({
+						username: username,
+						email: email,
+						password: password,
+					}),
+				},
+			);
+
+			const data = await response.json();
+
+			if (data.success) showLogin();
+			setError("Register failed. " + data.msg || "");
+		} catch (e) {
+			setError(e.message);
+		}
+	};
+
+	return (
+		<Form>
+			{error ? <p>{error}</p> : ""}
+			<input
+				type="text"
+				placeholder="username"
+				onInput={e => setUsername(e.target.value)}
+				required
+			/>
+			<input
+				type="password"
+				placeholder="password"
+				onInput={e => setPassword(e.target.value)}
+				required
+			/>
+			<input
+				type="text"
+				placeholder="email id"
+				onInput={e => setEmail(e.target.value)}
+				required
+			/>
+			<button type="submit" onClick={registerUser}>
+				Create
+			</button>
+			<p>
+				Already Registered?
+				<LinkButton onClick={showLogin}>Login</LinkButton>
+			</p>
+		</Form>
+	);
+}
+
+function LoginForm({ showRegister }) {
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState("");
+
+	const loginUser = async e => {
+		e.preventDefault();
+		try {
+			const response = await fetch("https://mkr.thefeathers.in/login", {
+				method: "POST",
+				headers: new Headers({ "content-type": "application/json" }),
+				body: JSON.stringify({
+					username: username,
+					password: password,
+				}),
+			});
+			const data = await response.json();
+			window.localStorage.setItem("Token", data.token);
+
+			alert("Successfully logged in with the token " + data.token);
+			// TODO:
+		} catch (e) {
+			setError(e.message);
+		}
+	};
+
+	return (
+		<Form>
+			{error ? <p>{error}</p> : ""}
+			<input
+				type="text"
+				placeholder="username"
+				onInput={e => setUsername(e.target.value)}
+				required
+			/>
+			<input
+				type="password"
+				placeholder="password"
+				onInput={e => setPassword(e.target.value)}
+				required
+			/>
+			<button type="submit" onClick={loginUser}>
+				Login
+			</button>
+			<p className="message">
+				Not Registered?
+				<LinkButton onClick={showRegister}>Register</LinkButton>
+			</p>
+		</Form>
+	);
+}
+
+function Login() {
+	const [show, setShow] = useState("login");
+
+	return (
+		<Page>
+			{show === "register" ? (
+				<RegisterForm showLogin={() => setShow("login")} />
+			) : (
+				<LoginForm showRegister={() => setShow("register")} />
+			)}
+		</Page>
+	);
+}
+
+export default Login;