Signup page conversion to chakra

frontend/package.json

@@ -3,6 +3,9 @@
 	"version": "3.0.0",
 	"private": true,
 	"dependencies": {
+		"@chakra-ui/react": "^1.6.12",
+		"@emotion/react": "^11",
+		"@emotion/styled": "^11",
 		"@testing-library/jest-dom": "5.14.1",
 		"@testing-library/react": "12.0.0",
 		"@types/humps": "^2.0.0",
@@ -28,6 +31,7 @@
 		"eslint-plugin-prettier": "^3.4.0",
 		"eslint-plugin-react": "^7.24.0",
 		"eslint-plugin-react-hooks": "^4.2.0",
+		"framer-motion": "^4",
 		"humps": "^2.0.1",
 		"jest-date-mock": "1.0.8",
 		"jest-fetch-mock": "3.0.3",

frontend/public/index.html

@@ -47,14 +47,6 @@
 			content="/images/favicon/browserconfig.xml"
 		/>
 		<meta name="theme-color" content="#ffffff" />
-		<link
-			rel="stylesheet"
-			href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext"
-		/>
-		<link
-			rel="stylesheet"
-			href="https://unpkg.com/@tabler/core@1.0.0-beta3/dist/css/tabler.min.css"
-		/>
 		<link
 			rel="stylesheet"
 			href="https://unpkg.com/@tabler/core@1.0.0-beta3/dist/css/tabler-flags.min.css"

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 
+import { ChakraProvider } from "@chakra-ui/react";
 import Router from "components/Router";
 import { AuthProvider, HealthProvider, LocaleProvider } from "context";
 import { intl } from "locale";
@@ -9,11 +10,13 @@ function App() {
 	return (
 		<RawIntlProvider value={intl}>
 			<LocaleProvider>
+				<ChakraProvider>
 					<HealthProvider>
 						<AuthProvider>
 							<Router />
 						</AuthProvider>
 					</HealthProvider>
+				</ChakraProvider>
 			</LocaleProvider>
 		</RawIntlProvider>
 	);

frontend/src/components/LocalePicker.tsx

@@ -1,82 +1,71 @@
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 
-import { Button, Dropdown, Flag } from "components";
+import {
+	Button,
+	Box,
+	Menu,
+	MenuButton,
+	MenuList,
+	MenuItem,
+} from "@chakra-ui/react";
+import { Flag } from "components";
 import { useLocaleState } from "context";
 import { changeLocale, getFlagCodeForLocale, intl } from "locale";
 
 export interface LocalPickerProps {
 	/**
-	 * On click handler
+	 * On change handler
 	 */
 	onChange?: any;
+	/**
+	 * Class
+	 */
+	className?: string;
 }
 
 export const LocalePicker: React.FC<LocalPickerProps> = ({
 	onChange,
-	...rest
+	className,
 }) => {
-	const dropRef = useRef(null);
 	const { locale, setLocale } = useLocaleState();
-	const [localeShown, setLocaleShown] = useState(false);
 
 	const options = [
 		["us", "en-US"],
 		["de", "de-DE"],
-		["ir", "fa-IR"],
+		["fa", "fa-IR"],
 	];
 
-	const handleOnChange = (e: any) => {
-		changeLocale(e.currentTarget.rel);
-		setLocale(e.currentTarget.rel);
-		setLocaleShown(false);
+	const changeTo = (lang: string) => {
+		changeLocale(lang);
+		setLocale(lang);
 		onChange && onChange(locale);
 	};
 
-	const handleClickOutside = (event: any) => {
-		if (
-			dropRef.current &&
-			// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-			!dropRef.current.contains(event.target)
-		) {
-			setLocaleShown(false);
-		}
-	};
-
-	useEffect(() => {
-		document.addEventListener("mousedown", handleClickOutside);
-		return () => document.removeEventListener("mousedown", handleClickOutside);
-	}, []);
-
 	return (
-		<div className="dropdown" {...rest} ref={dropRef}>
-			<Button
-				type="button"
-				shape="ghost"
-				onClick={(e: any) => {
-					setLocaleShown(!localeShown);
-					e.preventDefault();
-				}}
-				iconOnly>
+		<Box className={className}>
+			<Menu>
+				<MenuButton as={Button}>
 					<Flag country={getFlagCodeForLocale(locale)} />
-			</Button>
-			<Dropdown
-				className="dropdown-menu-end dropdown-menu-card"
-				show={localeShown}>
+				</MenuButton>
+				<MenuList>
 					{options.map((item) => {
 						return (
-						<Dropdown.Item
-							key={`locale-${item[0]}`}
-							rel={item[1]}
+							<MenuItem
 								icon={<Flag country={item[0]} />}
-							onClick={handleOnChange}>
+								onClick={() => changeTo(item[0])}
+								rel={item[1]}
+								key={`locale-${item[0]}`}>
+								<span>
 									{intl.formatMessage({
 										id: `locale-${item[1]}`,
 										defaultMessage: item[1],
 									})}
-						</Dropdown.Item>
+								</span>
+							</MenuItem>
 						);
 					})}
-			</Dropdown>
-		</div>
+				</MenuList>
+			</Menu>
+		</Box>
 	);
 };

frontend/src/index.scss

@@ -17,59 +17,3 @@ body {
 .text-right {
 	text-align: right;
 }
-
-// Hide the dropdown arrow when it is inlined in the mobile menu
-@media (max-width: 767.98px) {
-	.navbar-collapse .dropdown-menu-arrow::before {
-  	display: none;
- 	}
-}
-
-/*
-.btn {
-	text-transform: none;
-}
-
-.btn-loading {
-	color: transparent !important;
-	pointer-events: none;
-	position: relative;
-
-	&:after {
-		content: "";
-		-webkit-animation: loader 500ms infinite linear;
-		animation: loader 500ms infinite linear;
-		border: 2px solid #fff;
-		border-radius: 50%;
-		border-right-color: transparent !important;
-		border-top-color: transparent !important;
-		display: block;
-		height: 1.4em;
-		width: 1.4em;
-		position: absolute;
-		left: calc(50% - (1.4em / 2));
-		top: calc(50% - (1.4em / 2));
-		-webkit-transform-origin: center;
-		transform-origin: center;
-		position: absolute !important;
-	}
-}
-
-.footer {
-	background: #fff;
-	border-top: 1px solid rgba(0, 40, 100, 0.12);
-	font-size: 0.875rem;
-	padding: 1.25rem 0;
-	color: #9aa0ac;
-
-	a:not(.btn) {
-		color: #6e7687;
-		text-decoration: none;
-		background-color: initial;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}
-*/

frontend/src/pages/Login/index.tsx

@@ -1,17 +1,27 @@
 import React, { useEffect, useRef, useState, ChangeEvent } from "react";
 
-import { Alert, Button } from "components";
+import {
+	Flex,
+	Box,
+	FormControl,
+	FormLabel,
+	Input,
+	Stack,
+	Button,
+	useColorModeValue,
+	useToast,
+} from "@chakra-ui/react";
 import { LocalePicker } from "components";
 import { useAuthState } from "context";
 import { intl } from "locale";
 
-import logo from "../../img/logo-text-vertical-grey.png";
+import logo from "../../img/logo-256.png";
 
 function Login() {
+	const toast = useToast();
 	const emailRef = useRef(null);
 	const { login } = useAuthState();
 	const [loading, setLoading] = useState(false);
-	const [errorMessage, setErrorMessage] = useState("");
 	const [formData, setFormData] = useState({
 		email: "",
 		password: "",
@@ -20,12 +30,18 @@ function Login() {
 	const onSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
 		setLoading(true);
-		setErrorMessage("");
 
 		try {
 			await login(formData.email, formData.password);
 		} catch (err: any) {
-			setErrorMessage(err.message);
+			toast({
+				title: "Login Error",
+				description: err.message,
+				status: "error",
+				position: "top",
+				duration: 3000,
+				isClosable: true,
+			});
 			setLoading(false);
 		}
 	};
@@ -40,35 +56,34 @@ function Login() {
 	}, []);
 
 	return (
-		<div className="container-tight py-4">
-			<div className="text-center mb-4">
-				<img src={logo} alt="Logo" />
-			</div>
-			<form
-				className="card card-md"
-				method="post"
-				autoComplete="off"
-				onSubmit={onSubmit}>
-				<div className="card-body">
-					<div className="row mb-4">
-						<div className="col" />
-						<div className="col col-md-2">
-							<LocalePicker />
-						</div>
-					</div>
-					{errorMessage ? <Alert type="danger">{errorMessage}</Alert> : null}
-					<div className="mb-3">
-						<label className="form-label">
+		<Flex
+			minH={"100vh"}
+			align={"center"}
+			justify={"center"}
+			bg={useColorModeValue("gray.50", "gray.800")}>
+			<Stack spacing={8} mx={"auto"} maxW={"lg"} py={12} px={6}>
+				<Stack align={"center"}>
+					<img src={logo} width={100} alt="Logo" />
+				</Stack>
+				<Box
+					rounded={"lg"}
+					bg={useColorModeValue("white", "gray.700")}
+					boxShadow={"lg"}
+					p={8}>
+					<LocalePicker className="text-right" />
+					<Stack spacing={4}>
+						<form onSubmit={onSubmit}>
+							<FormControl id="email">
+								<FormLabel>
 									{intl.formatMessage({
 										id: "user.email",
 										defaultMessage: "Email",
 									})}
-						</label>
-						<input
+								</FormLabel>
+								<Input
 									ref={emailRef}
 									type="email"
 									onChange={onChange}
-							className="form-control"
 									name="email"
 									value={formData.email}
 									disabled={loading}
@@ -79,19 +94,17 @@ function Login() {
 									maxLength={150}
 									required
 								/>
-					</div>
-					<div className="mb-2">
-						<label className="form-label">
+							</FormControl>
+							<FormControl id="password">
+								<FormLabel>
 									{intl.formatMessage({
 										id: "user.password",
 										defaultMessage: "Password",
 									})}
-						</label>
-						<div className="input-group input-group-flat">
-							<input
+								</FormLabel>
+								<Input
 									type="password"
 									onChange={onChange}
-								className="form-control"
 									name="password"
 									value={formData.password}
 									disabled={loading}
@@ -99,28 +112,36 @@ function Login() {
 										id: "user.password",
 										defaultMessage: "Password",
 									})}
-								minLength={8}
 									maxLength={100}
 									autoComplete="off"
 									required
 								/>
-						</div>
-					</div>
-					<div className="form-footer">
+							</FormControl>
+							<Stack spacing={10}>
+								<Stack
+									direction={{ base: "column", sm: "row" }}
+									align={"start"}
+									justify={"space-between"}
+								/>
 								<Button
-							color="cyan"
+									type="submit"
 									loading={loading}
-							className="w-100"
-							type="submit">
+									bg={"blue.400"}
+									color={"white"}
+									_hover={{
+										bg: "blue.500",
+									}}>
 									{intl.formatMessage({
 										id: "login.login",
 										defaultMessage: "Sign in",
 									})}
 								</Button>
-					</div>
-				</div>
+							</Stack>
 						</form>
-		</div>
+					</Stack>
+				</Box>
+			</Stack>
+		</Flex>
 	);
 }