Signin page in class

src/Routes/SignIn.tsx

@@ -1,72 +1,84 @@
-import * as React from "react"
+import { Component } from "react"
 import Button from "@mui/material/Button"
 import TextField from "@mui/material/TextField"
 import Link from "@mui/material/Link"
-import { useSnackbar } from "notistack"
 import { dispatch } from "../socialvoid"
+import { RouteProps } from "../types"
+import { z } from "zod"
+import { Password } from "../specifications"
+import { useSnackbar } from "notistack"
 import { useNavigate } from "react-router"
 
-export default function SignIn() {
-  const navigate = useNavigate()
-  const snackbar = useSnackbar()
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+class SignInC extends Component<RouteProps> {
+  submit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault() // prevent the browser from reloading the page
 
     const data = new FormData(event.currentTarget)
-    const username = data.get("username") as string,
-      password = data.get("password") as string
 
-    if (!username || !password) {
-      snackbar.enqueueSnackbar("Invalid username or password.", {
-        variant: "warning",
-        preventDuplicate: true,
+    const { username, password } = z
+      .object({
+        username: z.string().nonempty(),
+        password: Password,
       })
-      return
-    }
+      .parse({ username: data.get("username"), password: data.get("password") })
 
     dispatch(
       async (client) => {
         await client.newSession()
         await client.session.authenticateUser(username, password)
-        navigate("/")
+        this.props.navigate("/")
       },
-      { navigate, snackbar }
+      { ...this.props }
     )
   }
 
-  dispatch(() => {}, {
-    navigate,
-    snackbar,
-    requireToBeNotAuthenticated: true,
-  })
+  componentDidMount() {
+    dispatch(() => {}, {
+      ...this.props,
+      requireToBeNotAuthenticated: true,
+    })
+  }
 
-  return (
-    <form noValidate onSubmit={handleSubmit}>
-      <TextField
-        required
-        fullWidth
-        id="username"
-        label="Username"
-        name="username"
-        autoComplete="off"
-        autoFocus
-        sx={{ mb: 3 }}
-      />
-      <TextField
-        required
-        fullWidth
-        id="password"
-        label="Password"
-        name="password"
-        type="password"
-      />
-      <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
-        Sign In
-      </Button>
-      <Link href="/signup" variant="body2" sx={{ float: "right" }}>
-        Don’t have an account?
-      </Link>
-    </form>
-  )
+  render() {
+    return (
+      <form noValidate onSubmit={(event) => this.submit(event)}>
+        <TextField
+          required
+          fullWidth
+          id="username"
+          label="Username"
+          name="username"
+          autoComplete="off"
+          autoFocus
+          sx={{ mb: 3 }}
+        />
+        <TextField
+          required
+          fullWidth
+          id="password"
+          label="Password"
+          name="password"
+          type="password"
+        />
+        <Button
+          type="submit"
+          fullWidth
+          variant="contained"
+          sx={{ mt: 3, mb: 2 }}
+        >
+          Sign In
+        </Button>
+        <Link href="/signup" variant="body2" sx={{ float: "right" }}>
+          Don’t have an account?
+        </Link>
+      </form>
+    )
+  }
+}
+
+export default function SignUp() {
+  const navigate = useNavigate()
+  const snackbar = useSnackbar()
+
+  return <SignInC navigate={navigate} snackbar={snackbar} />
 }

src/utils/errors.ts

@@ -1,5 +1,4 @@
 import { ZodError, setErrorMap, defaultErrorMap } from "zod"
-import { withSnackbar } from "notistack"
 import { RouteProps } from "../types"
 
 setErrorMap((issue, _ctx) => {