Signup page conversion to chakra

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>
-				<HealthProvider>
-					<AuthProvider>
-						<Router />
-					</AuthProvider>
-				</HealthProvider>
+				<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>
-				<Flag country={getFlagCodeForLocale(locale)} />
-			</Button>
-			<Dropdown
-				className="dropdown-menu-end dropdown-menu-card"
-				show={localeShown}>
-				{options.map((item) => {
-					return (
-						<Dropdown.Item
-							key={`locale-${item[0]}`}
-							rel={item[1]}
-							icon={<Flag country={item[0]} />}
-							onClick={handleOnChange}>
-							{intl.formatMessage({
-								id: `locale-${item[1]}`,
-								defaultMessage: item[1],
-							})}
-						</Dropdown.Item>
-					);
-				})}
-			</Dropdown>
-		</div>
+		<Box className={className}>
+			<Menu>
+				<MenuButton as={Button}>
+					<Flag country={getFlagCodeForLocale(locale)} />
+				</MenuButton>
+				<MenuList>
+					{options.map((item) => {
+						return (
+							<MenuItem
+								icon={<Flag country={item[0]} />}
+								onClick={() => changeTo(item[0])}
+								rel={item[1]}
+								key={`locale-${item[0]}`}>
+								<span>
+									{intl.formatMessage({
+										id: `locale-${item[1]}`,
+										defaultMessage: item[1],
+									})}
+								</span>
+							</MenuItem>
+						);
+					})}
+				</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,87 +56,92 @@ 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">
-							{intl.formatMessage({
-								id: "user.email",
-								defaultMessage: "Email",
-							})}
-						</label>
-						<input
-							ref={emailRef}
-							type="email"
-							onChange={onChange}
-							className="form-control"
-							name="email"
-							value={formData.email}
-							disabled={loading}
-							placeholder={intl.formatMessage({
-								id: "user.email",
-								defaultMessage: "Email",
-							})}
-							maxLength={150}
-							required
-						/>
-					</div>
-					<div className="mb-2">
-						<label className="form-label">
-							{intl.formatMessage({
-								id: "user.password",
-								defaultMessage: "Password",
-							})}
-						</label>
-						<div className="input-group input-group-flat">
-							<input
-								type="password"
-								onChange={onChange}
-								className="form-control"
-								name="password"
-								value={formData.password}
-								disabled={loading}
-								placeholder={intl.formatMessage({
-									id: "user.password",
-									defaultMessage: "Password",
-								})}
-								minLength={8}
-								maxLength={100}
-								autoComplete="off"
-								required
-							/>
-						</div>
-					</div>
-					<div className="form-footer">
-						<Button
-							color="cyan"
-							loading={loading}
-							className="w-100"
-							type="submit">
-							{intl.formatMessage({
-								id: "login.login",
-								defaultMessage: "Sign in",
-							})}
-						</Button>
-					</div>
-				</div>
-			</form>
-		</div>
+		<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",
+									})}
+								</FormLabel>
+								<Input
+									ref={emailRef}
+									type="email"
+									onChange={onChange}
+									name="email"
+									value={formData.email}
+									disabled={loading}
+									placeholder={intl.formatMessage({
+										id: "user.email",
+										defaultMessage: "Email",
+									})}
+									maxLength={150}
+									required
+								/>
+							</FormControl>
+							<FormControl id="password">
+								<FormLabel>
+									{intl.formatMessage({
+										id: "user.password",
+										defaultMessage: "Password",
+									})}
+								</FormLabel>
+								<Input
+									type="password"
+									onChange={onChange}
+									name="password"
+									value={formData.password}
+									disabled={loading}
+									placeholder={intl.formatMessage({
+										id: "user.password",
+										defaultMessage: "Password",
+									})}
+									maxLength={100}
+									autoComplete="off"
+									required
+								/>
+							</FormControl>
+							<Stack spacing={10}>
+								<Stack
+									direction={{ base: "column", sm: "row" }}
+									align={"start"}
+									justify={"space-between"}
+								/>
+								<Button
+									type="submit"
+									loading={loading}
+									bg={"blue.400"}
+									color={"white"}
+									_hover={{
+										bg: "blue.500",
+									}}>
+									{intl.formatMessage({
+										id: "login.login",
+										defaultMessage: "Sign in",
+									})}
+								</Button>
+							</Stack>
+						</form>
+					</Stack>
+				</Box>
+			</Stack>
+		</Flex>
 	);
 }