fix: auth flow (#43)

* otp bypass token

* otp bypass token

* fix: simplify page components

* comment out unused lines

* add router components

* simplified text fields

* clean up utils

* rename to schema

* fix import

* fix import

* fix import

* create router utils

* delete index

* fix paths

* fix props

* do not set default value

* comment out broken imports

* comment out broken import

* support helper text

* fix auth factor type

* add otp field

* login path props

* fix: hooks page auth flow

* pass in session metadata

* add placeholders

* first name field

* decode cookie value

* add user type

* set session user type

* fix use session required

* remove duplicate logic

* fix imports

* feedback

src/api/index.ts

@@ -3,6 +3,7 @@ import endpoints from "./endpoints"
 import type {
   AuthFactor,
   Class,
+  OtpBypassToken,
   School,
   Student,
   Teacher,
@@ -18,6 +19,7 @@ export {
   urls,
   type AuthFactor,
   type Class,
+  type OtpBypassToken,
   type School,
   type Student,
   type Teacher,

src/api/models.ts

@@ -1,5 +1,5 @@
+import type { Model } from "../utils/api"
 import type { CountryIsoCodes, UkCounties } from "../utils/general"
-import type { Model } from "../utils/rtkQuery"
 
 export type User = Model<
   number,
@@ -63,3 +63,11 @@ export type AuthFactor = Model<
     type: "otp"
   }
 >
+
+export type OtpBypassToken = Model<
+  number,
+  {
+    user: number
+    token: string
+  }
+>

src/components/ClickableTooltip.tsx

@@ -1,7 +1,7 @@
 import { Tooltip, type TooltipProps } from "@mui/material"
 import React from "react"
 
-import { wrap } from "../utils"
+import { wrap } from "../utils/general"
 
 export interface ClickableTooltipProps extends TooltipProps {}
 

src/components/Image.tsx

@@ -1,7 +1,7 @@
 import { Box, type BoxProps } from "@mui/material"
 import type React from "react"
 
-import { openInNewTab } from "../utils"
+import { openInNewTab } from "../utils/general"
 
 export interface ImageProps extends Omit<BoxProps, "component"> {
   alt: string

src/components/form/AutocompleteField.tsx

@@ -13,7 +13,7 @@ import React from "react"
 import { flushSync } from "react-dom"
 import { string as YupString, ValidationError as YupValidationError } from "yup"
 
-import { wrap } from "../../utils"
+import { wrap } from "../../utils/general"
 import ClickableTooltip from "../ClickableTooltip"
 
 export interface AutocompleteFieldProps<

src/components/form/CheckboxField.tsx

@@ -16,7 +16,7 @@ import React from "react"
 import { BooleanSchema, ValidationError, bool as YupBool } from "yup"
 
 import { form as formTypography } from "../../theme/typography"
-import { wrap } from "../../utils"
+import { wrap } from "../../utils/general"
 import ClickableTooltip from "../ClickableTooltip"
 
 export interface CheckboxFieldProps

src/components/form/EmailField.tsx

@@ -1,25 +1,27 @@
-import type React from "react"
-import { InputAdornment } from "@mui/material"
 import { EmailOutlined as EmailOutlinedIcon } from "@mui/icons-material"
+import { InputAdornment } from "@mui/material"
+import type { FC } from "react"
 import { string as YupString } from "yup"
 
 import TextField, { type TextFieldProps } from "./TextField"
 
-export interface EmailFieldProps extends Omit<TextFieldProps, "type" | "name"> {
-  name?: string
-}
+export type EmailFieldProps = Omit<TextFieldProps, "type" | "name" | "schema"> &
+  Partial<Pick<TextFieldProps, "name">>
 
-const EmailField: React.FC<EmailFieldProps> = ({
+const EmailField: FC<EmailFieldProps> = ({
   name = "email",
+  label = "Email address",
+  placeholder = "Enter your email address",
   InputProps = {},
-  validate = YupString().email(),
   ...otherTextFieldProps
 }) => {
   return (
     <TextField
       type="email"
+      schema={YupString().email()}
       name={name}
-      validate={validate}
+      label={label}
+      placeholder={placeholder}
       InputProps={{
         endAdornment: (
           <InputAdornment position="end">

src/components/form/FirstNameField.tsx

@@ -0,0 +1,29 @@
+import type { FC } from "react"
+import { string as YupString } from "yup"
+
+import TextField, { type TextFieldProps } from "./TextField"
+
+export type FirstNameFieldProps = Omit<
+  TextFieldProps,
+  "type" | "name" | "schema"
+> &
+  Partial<Pick<TextFieldProps, "name">>
+
+const FirstNameField: FC<FirstNameFieldProps> = ({
+  name = "first_name",
+  label = "First name",
+  placeholder = "Enter your first name",
+  ...otherTextFieldProps
+}) => {
+  return (
+    <TextField
+      schema={YupString().max(150)}
+      name={name}
+      label={label}
+      placeholder={placeholder}
+      {...otherTextFieldProps}
+    />
+  )
+}
+
+export default FirstNameField

src/components/form/Form.tsx

@@ -1,31 +1,27 @@
-import { Stack, type StackProps } from "@mui/material"
 import {
   Formik,
   Form as FormikForm,
   type FormikConfig,
+  type FormikErrors,
   type FormikValues,
 } from "formik"
 
-export interface FormProps<Values> extends FormikConfig<Values> {
-  stackProps?: Omit<StackProps, "children">
-}
+export interface FormProps<Values> extends FormikConfig<Values> {}
 
 const Form = <Values extends FormikValues = FormikValues>({
-  stackProps,
   children,
   ...otherFormikProps
 }: FormProps<Values>): JSX.Element => {
   return (
     <Formik {...otherFormikProps}>
       {formik => (
         <FormikForm>
-          <Stack {...stackProps}>
-            {typeof children === "function" ? children(formik) : children}
-          </Stack>
+          {typeof children === "function" ? children(formik) : children}
         </FormikForm>
       )}
     </Formik>
   )
 }
 
 export default Form
+export { type FormikErrors as FormErrors }