Setup page converted to chakra

Fixed locale js error
Setup and login forms consistent

frontend/src/components/Footer.tsx

@@ -59,17 +59,7 @@ function Footer() {
 										defaultMessage: "Copyright © {year} jc21.com",
 									},
 									{ year: new Date().getFullYear() },
-								)}{" "}
-								<a
-									className="link-secondary"
-									href="https://preview.tabler.io/"
-									target="_blank"
-									rel="noreferrer">
-									{intl.formatMessage({
-										id: "footer.theme",
-										defaultMessage: "Theme by Tabler",
-									})}
-								</a>
+								)}
 							</li>
 							<li className="list-inline-item">
 								<a

frontend/src/components/LocalePicker.tsx

@@ -29,8 +29,10 @@ export const LocalePicker: React.FC<LocalPickerProps> = ({
 }) => {
 	const { locale, setLocale } = useLocaleState();
 
+	// first item of each array should be the language code,
+	// not the country code
 	const options = [
-		["us", "en-US"],
+		["en", "en-US"],
 		["de", "de-DE"],
 		["fa", "fa-IR"],
 	];

frontend/src/locale/src/en.json

@@ -41,9 +41,6 @@
 	"footer.github": {
 		"defaultMessage": "Github"
 	},
-	"footer.theme": {
-		"defaultMessage": "Theme by Tabler"
-	},
 	"footer.userguide": {
 		"defaultMessage": "User Guide"
 	},

frontend/src/locale/src/fa.json

@@ -26,9 +26,6 @@
 	"footer.copyright": {
 		"defaultMessage": "حق چاپ © حق چاپ © {year} jc21.com"
 	},
-	"footer.theme": {
-		"defaultMessage": "قالب توسط Tabler"
-	},
 	"footer.userguide": {
 		"defaultMessage": "راهنمای کاربر"
 	},

frontend/src/pages/Login/index.tsx

@@ -126,15 +126,24 @@ function Login() {
 								</FormControl>
 								<Stack spacing={10}>
 									<Box textAlign={"end"}>
-										<Link color={"blue.400"}>Forgot password?</Link>
+										<Link color={"blue.400"}>
+											{intl.formatMessage({
+												id: "login.forgot",
+												defaultMessage: "Forgot password?",
+											})}
+										</Link>
 									</Box>
 									<Button
 										type="submit"
-										loading={loading}
-										bg={"blue.400"}
+										fontFamily={"heading"}
+										mt={8}
+										w={"full"}
+										bgGradient="linear(to-r, red.400,pink.400)"
 										color={"white"}
+										disabled={loading}
 										_hover={{
-											bg: "blue.500",
+											bgGradient: "linear(to-r, red.400,pink.400)",
+											boxShadow: "xl",
 										}}>
 										{intl.formatMessage({
 											id: "login.login",

frontend/src/pages/Setup/index.tsx

@@ -1,19 +1,29 @@
 import React, { useEffect, useRef, useState, ChangeEvent } from "react";
 
+import {
+	Box,
+	Flex,
+	Stack,
+	Heading,
+	Input,
+	Button,
+	useColorModeValue,
+	useToast,
+} from "@chakra-ui/react";
 import { createUser } from "api/npm";
-import { Alert, Button } from "components";
 import { LocalePicker } from "components";
 import { useAuthState, useHealthState } from "context";
 import { intl } from "locale";
 
-import logo from "../../img/logo-text-vertical-grey.png";
+import { ThemeSwitcher } from "../../components/ThemeSwitcher";
+import logo from "../../img/logo-256.png";
 
 function Setup() {
+	const toast = useToast();
 	const nameRef = useRef(null);
 	const { refreshHealth } = useHealthState();
 	const { login } = useAuthState();
 	const [loading, setLoading] = useState(false);
-	const [errorMessage, setErrorMessage] = useState("");
 
 	const [formData, setFormData] = useState({
 		name: "",
@@ -23,9 +33,9 @@ function Setup() {
 	});
 
 	const onSubmit = async (e: React.FormEvent) => {
+		console.log("HERE");
 		e.preventDefault();
 		setLoading(true);
-		setErrorMessage("");
 
 		const { password, ...payload } = {
 			...formData,
@@ -39,6 +49,17 @@ function Setup() {
 			},
 		};
 
+		const showErr = (msg: string) => {
+			toast({
+				title: "Signup Error",
+				description: msg,
+				status: "error",
+				position: "top",
+				duration: 3000,
+				isClosable: true,
+			});
+		};
+
 		try {
 			const response = await createUser({ payload });
 			if (response && typeof response.id !== "undefined" && response.id) {
@@ -49,14 +70,14 @@ function Setup() {
 					refreshHealth();
 					// window.location.reload();
 				} catch (err: any) {
-					setErrorMessage(err.message);
+					showErr(err.message);
 					setLoading(false);
 				}
 			} else {
-				setErrorMessage("Unable to create user!");
+				showErr("Unable to create user!");
 			}
 		} catch (err: any) {
-			setErrorMessage(err.message);
+			showErr(err.message);
 		}
 		setLoading(false);
 	};
@@ -71,136 +92,117 @@ function Setup() {
 	}, []);
 
 	return (
-		<div className="page page-center">
-			<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">
-								<h2 className="card-title">
+		<Flex
+			minH={"100vh"}
+			w={"100vw"}
+			flexDir={"column"}
+			bg={useColorModeValue("gray.50", "gray.800")}>
+			<Stack h={10} m={4} justify={"end"} direction={"row"}>
+				<ThemeSwitcher />
+				<LocalePicker className="text-right" />
+			</Stack>
+
+			<Flex align={"center"} justify={"center"} flex={"1"}>
+				<Stack spacing={8} mx={"auto"} maxW={"md"} w={"full"} py={4} px={6}>
+					<Box align={"center"}>
+						<img src={logo} width={100} alt="Logo" />
+					</Box>
+					<Box
+						rounded={"lg"}
+						bg={useColorModeValue("white", "gray.700")}
+						boxShadow={"lg"}
+						p={8}>
+						<Stack spacing={4}>
+							<Heading
+								color={useColorModeValue("gray.800", "gray.300")}
+								lineHeight={1.1}
+								fontSize={{ base: "1xl", sm: "2xl", md: "3xl" }}>
+								{intl.formatMessage({
+									id: "setup.title",
+									defaultMessage: "Create your first Account",
+								})}
+							</Heading>
+						</Stack>
+						<Box mt={10}>
+							<form onSubmit={onSubmit}>
+								<Stack spacing={4}>
+									<Input
+										ref={nameRef}
+										onChange={onChange}
+										name="name"
+										value={formData.name}
+										disabled={loading}
+										placeholder={intl.formatMessage({
+											id: "user.name",
+											defaultMessage: "Name",
+										})}
+										maxLength={50}
+										required
+									/>
+									<Input
+										onChange={onChange}
+										name="nickname"
+										value={formData.nickname}
+										disabled={loading}
+										placeholder={intl.formatMessage({
+											id: "user.nickname",
+											defaultMessage: "Nickname",
+										})}
+										maxLength={50}
+										required
+									/>
+									<Input
+										type="email"
+										onChange={onChange}
+										name="email"
+										value={formData.email}
+										disabled={loading}
+										placeholder={intl.formatMessage({
+											id: "user.email",
+											defaultMessage: "Email",
+										})}
+										maxLength={150}
+										required
+									/>
+									<Input
+										type="password"
+										onChange={onChange}
+										name="password"
+										value={formData.password}
+										disabled={loading}
+										placeholder={intl.formatMessage({
+											id: "user.password",
+											defaultMessage: "Password",
+										})}
+										minLength={8}
+										maxLength={100}
+										required
+									/>
+								</Stack>
+								<Button
+									type="submit"
+									fontFamily={"heading"}
+									mt={8}
+									w={"full"}
+									bgGradient="linear(to-r, red.400,pink.400)"
+									color={"white"}
+									disabled={loading}
+									_hover={{
+										bgGradient: "linear(to-r, red.400,pink.400)",
+										boxShadow: "xl",
+									}}>
 									{intl.formatMessage({
-										id: "setup.title",
-										defaultMessage: "Create your first Account",
+										id: "setup.create",
+										defaultMessage: "Create Account",
 									})}
-								</h2>
-							</div>
-							<div className="col col-md-2">
-								<LocalePicker />
-							</div>
-						</div>
-
-						{errorMessage ? (
-							<Alert type="danger" className="text-center">
-								{errorMessage}
-							</Alert>
-						) : null}
-
-						<div className="mb-3">
-							<label className="form-label">
-								{intl.formatMessage({
-									id: "user.name",
-									defaultMessage: "Name",
-								})}
-							</label>
-							<input
-								ref={nameRef}
-								onChange={onChange}
-								className="form-control"
-								name="name"
-								value={formData.name}
-								disabled={loading}
-								placeholder={intl.formatMessage({
-									id: "user.name",
-									defaultMessage: "Name",
-								})}
-								required
-							/>
-						</div>
-						<div className="mb-3">
-							<label className="form-label">
-								{intl.formatMessage({
-									id: "user.nickname",
-									defaultMessage: "Nickname",
-								})}
-							</label>
-							<input
-								onChange={onChange}
-								className="form-control"
-								name="nickname"
-								value={formData.nickname}
-								disabled={loading}
-								placeholder={intl.formatMessage({
-									id: "user.nickname",
-									defaultMessage: "Nickname",
-								})}
-								required
-							/>
-						</div>
-						<div className="mb-3">
-							<label className="form-label">
-								{intl.formatMessage({
-									id: "user.email",
-									defaultMessage: "Email",
-								})}
-							</label>
-							<input
-								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-3">
-							<label className="form-label">
-								{intl.formatMessage({
-									id: "user.password",
-									defaultMessage: "Password",
-								})}
-							</label>
-							<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 className="form-footer">
-							<Button color="cyan" loading={loading} className="w-100">
-								{intl.formatMessage({
-									id: "setup.create",
-									defaultMessage: "Create Account",
-								})}
-							</Button>
-						</div>
-					</div>
-				</form>
-			</div>
-		</div>
+								</Button>
+							</form>
+						</Box>
+					</Box>
+				</Stack>
+			</Flex>
+			<Box h={10} m={4} />
+		</Flex>
 	);
 }