Feat(frontend): Styled Form Components

- Updated README.md

frontend/src/Router.tsx

@@ -1,9 +1,9 @@
 import { BrowserRouter, Routes } from "react-router-dom";
 
-const Router = () => {
+const Router = () => (
   <BrowserRouter>
     <Routes>{}</Routes>
-  </BrowserRouter>;
-};
+  </BrowserRouter>
+);
 
 export default Router;

frontend/src/components/CheckboxField.tsx

@@ -0,0 +1,38 @@
+import Checkbox from "@mui/material/Checkbox";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormHelperText from "@mui/material/FormHelperText";
+import { FieldHookConfig, useField } from "formik";
+
+import { combineHelperText } from "src/utils";
+
+type IProps = FieldHookConfig<boolean> & {
+  fullWidth?: boolean;
+  helperText?: string;
+  label: string;
+  required?: boolean;
+};
+
+const CheckboxField = (props: IProps) => {
+  const [field, meta] = useField<boolean>(props);
+
+  return (
+    <FormControl
+      component="fieldset"
+      error={Boolean(meta.error) && meta.touched}
+      fullWidth={props.fullWidth}
+      margin="normal"
+      required={props.required}
+    >
+      <FormControlLabel
+        control={<Checkbox {...field} checked={field.value} />}
+        label={props.label}
+      />
+      <FormHelperText>
+        {combineHelperText(props.helperText, meta)}
+      </FormHelperText>
+    </FormControl>
+  );
+};
+
+export default CheckboxField;

frontend/src/components/DateField.tsx

@@ -0,0 +1,30 @@
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { FieldHookConfig, useField } from "formik";
+
+import { combineHelperText } from "src/utils";
+
+const DateField = (props: FieldHookConfig<Date | null> & TextFieldProps) => {
+  const [field, meta, helpers] = useField<Date | null>(props);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DatePicker
+        label={props.label}
+        value={field.value}
+        onChange={(newValue) => helpers.setValue(newValue)}
+        renderInput={(params) => (
+          <TextField
+            fullWidth={props.fullWidth}
+            {...params}
+            helperText={combineHelperText(props.helperText, meta)}
+          />
+        )}
+      />
+    </LocalizationProvider>
+  );
+};
+
+export default DateField;

frontend/src/components/EmailField.tsx

@@ -0,0 +1,22 @@
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+import { FieldHookConfig, useField } from "formik";
+
+import { combineHelperText } from "src/utils";
+
+const EmailField = (props: FieldHookConfig<string> & TextFieldProps) => {
+  const [field, meta] = useField<string>(props);
+
+  return (
+    <TextField
+      {...props}
+      autoComplete="email"
+      error={Boolean(meta.error) && meta.touched}
+      helperText={combineHelperText(props.helperText, meta)}
+      margin="normal"
+      type="email"
+      {...field}
+    />
+  );
+};
+
+export default EmailField;

frontend/src/components/FormActions.tsx

@@ -0,0 +1,43 @@
+import Button from "@mui/material/Button";
+import LoadingButton from "@mui/lab/LoadingButton";
+import Stack from "@mui/material/Stack";
+import { Link } from "react-router-dom";
+
+interface ILink {
+  label: string;
+  to: string;
+  state?: any;
+}
+
+interface IProps {
+  disabled: boolean;
+  isSubmitting: boolean;
+  label: string;
+  links?: ILink[];
+}
+
+const FormActions = ({ disabled, isSubmitting, label, links }: IProps) => (
+  <Stack direction="row" spacing={1} sx={{ marginTop: 2 }}>
+    <LoadingButton
+      disabled={disabled}
+      loading={isSubmitting}
+      type="submit"
+      variant="contained"
+    >
+      {label}
+    </LoadingButton>
+    {(links ?? []).map(({ label, to, state }) => (
+      <Button
+        component={Link}
+        key={to}
+        state={state}
+        to={to}
+        variant="outlined"
+      >
+        {label}
+      </Button>
+    ))}
+  </Stack>
+);
+
+export default FormActions;

frontend/src/components/LazyPasswordWithStrengthField.tsx

@@ -0,0 +1,19 @@
+import { TextFieldProps } from "@mui/material/TextField";
+import { lazy, Suspense } from "react";
+import { FieldHookConfig } from "formik";
+
+import PasswordField from "src/components/PasswordField";
+
+const PasswordWithStrengthField = lazy(
+  () => import("src/components/PasswordWithStrengthField"),
+);
+
+const LazyPasswordWithStrengthField = (
+  props: FieldHookConfig<string> & TextFieldProps,
+) => (
+  <Suspense fallback={<PasswordField {...props} />}>
+    <PasswordWithStrengthField {...props} />
+  </Suspense>
+);
+
+export default LazyPasswordWithStrengthField;

frontend/src/components/PasswordField.tsx

@@ -0,0 +1,39 @@
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import { FieldHookConfig, useField } from "formik";
+import { useState } from "react";
+
+import { combineHelperText } from "src/utils";
+
+const PasswordField = (props: FieldHookConfig<string> & TextFieldProps) => {
+  const [field, meta] = useField<string>(props);
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <TextField
+      {...props}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton
+              onClick={() => setShowPassword((value) => !value)}
+              tabIndex={-1}
+            >
+              {showPassword ? <Visibility /> : <VisibilityOff />}
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+      error={Boolean(meta.error) && meta.touched}
+      helperText={combineHelperText(props.helperText, meta)}
+      margin="normal"
+      type={showPassword ? "text" : "password"}
+      {...field}
+    />
+  );
+};
+
+export default PasswordField;

frontend/src/components/PasswordWithStrengthField.tsx

@@ -0,0 +1,58 @@
+import LinearProgress from "@mui/material/LinearProgress";
+import { TextFieldProps } from "@mui/material/TextField";
+import { FieldHookConfig, useField } from "formik";
+import zxcvbn from "zxcvbn";
+
+import PasswordField from "src/components/PasswordField";
+
+const scoreToDisplay = (score: number) => {
+  let progressColor = "other.red";
+  let helperText = "Weak";
+
+  switch (score) {
+    case 25:
+      progressColor = "other.pink";
+      break;
+    case 50:
+      progressColor = "other.orange";
+      break;
+    case 75:
+      progressColor = "other.yellow";
+      helperText = "Good";
+      break;
+    case 100:
+      progressColor = "other.green";
+      helperText = "Strong";
+      break;
+  }
+  return [progressColor, helperText];
+};
+
+const PasswordWithStrengthField = (
+  props: FieldHookConfig<string> & TextFieldProps,
+) => {
+  const [field] = useField<string>(props);
+  const result = zxcvbn(field.value ?? "");
+  const score = (result.score * 100) / 4;
+
+  const [progressColor, helperText] = scoreToDisplay(score);
+
+  return (
+    <>
+      <PasswordField {...props} helperText={helperText} />
+      <LinearProgress
+        sx={{
+          "& .MuiLinearProgress-barColorPrimary": {
+            backgroundColor: progressColor,
+          },
+          backgroundColor: "action.selected",
+          margin: "0 4px 24px 4px",
+        }}
+        value={score}
+        variant="determinate"
+      />
+    </>
+  );
+};
+
+export default PasswordWithStrengthField;

frontend/src/components/RequireAuth.tsx

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { Navigate, useLocation } from "react-router-dom";
+
 import { AuthContext } from "src/AuthContext";
 
 interface IProps {
@@ -8,13 +9,11 @@ interface IProps {
 
 const RequireAuth = ({ children }: IProps) => {
   const { authenticated } = useContext(AuthContext);
-
   const location = useLocation();
 
   if (authenticated) {
     return <>{children}</>;
   } else {
-    // re-route user back to login page if not logged in
     return <Navigate state={{ from: location }} to="/login/" />;
   }
 };

frontend/src/components/ScrollToTop.tsx

@@ -4,8 +4,6 @@ import { useLocation } from "react-router";
 const ScrollToTop = () => {
   const { pathname } = useLocation();
 
-  // pathname changes => scroll to top
-  // scrolling only on navigation
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);

frontend/src/components/TextField.tsx

@@ -0,0 +1,21 @@
+import MUITextField, { TextFieldProps } from "@mui/material/TextField";
+import { FieldHookConfig, useField } from "formik";
+
+import { combineHelperText } from "src/utils";
+
+const TextField = (props: FieldHookConfig<string> & TextFieldProps) => {
+  const [field, meta] = useField<string>(props);
+
+  return (
+    <MUITextField
+      {...props}
+      error={Boolean(meta.error) && meta.touched}
+      helperText={combineHelperText(props.helperText, meta)}
+      margin="normal"
+      type="text"
+      {...field}
+    />
+  );
+};
+
+export default TextField;

frontend/src/components/Title.tsx

@@ -8,7 +8,7 @@ interface IProps {
 const Title = ({ title }: IProps) => (
   <>
     <Helmet>
-      <title>Todo | {title}</title>
+      <title>Tozo | {title}</title>
     </Helmet>
     <Typography component="h1" variant="h5">
       {title}

frontend/src/utils.tsx

@@ -0,0 +1,21 @@
+import { FieldMetaProps } from "formik";
+import React from "react";
+
+export const combineHelperText = <T,>(
+  helperText: React.ReactNode | string | undefined,
+  meta: FieldMetaProps<T>,
+) => {
+  if (Boolean(meta.error) && meta.touched) {
+    if (typeof helperText === "string") {
+      return `${meta.error}. ${helperText ?? ""}`;
+    } else {
+      return (
+        <>
+          {meta.error}. {helperText}
+        </>
+      );
+    }
+  } else {
+    return helperText;
+  }
+};