Feat(backend): update deps

backend/pyproject.toml

@@ -13,7 +13,7 @@ dependencies = [
     "bcrypt>=4.0.1",
     "itsdangerous>=2.1.2",
     "quart-rate-limiter>=0.7.0",
-    "pydantic[email]==1.10.11",
+    "pydantic[email]",
     "quart-schema>=0.14.3",
     "quart-db[postgresql]>=0.4.1",
     "httpx>=0.23.1",

backend/src/backend/blueprints/control.py

@@ -7,4 +7,7 @@ blueprint = Blueprint("control", __name__)
 @blueprint.get("/control/ping/")
 @rate_exempt
 async def ping() -> ResponseReturnValue:
+    """Ping the server
+    Check if server is up and running.
+    """
     return {"ping": "pong"}

frontend/package-lock.json

@@ -15,6 +15,7 @@
         "@mui/lab": "^5.0.0-alpha.91",
         "@mui/material": "^5.9.1",
         "@mui/x-date-pickers": "^5.0.0-beta.2",
+        "@tanstack/react-query": "^4.33.0",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
@@ -22,6 +23,7 @@
         "@types/node": "^16.11.45",
         "@types/react": "^18.0.15",
         "@types/react-dom": "^18.0.6",
+        "axios": "^0.27.2",
         "date-fns": "^2.29.1",
         "formik": "^2.2.9",
         "react": "^18.2.0",
@@ -3953,6 +3955,41 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.33.0.tgz",
+      "integrity": "sha512-qYu73ptvnzRh6se2nyBIDHGBQvPY1XXl3yR769B7B6mIDD7s+EZhdlWHQ67JI6UOTFRaI7wupnTnwJ3gE0Mr/g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "4.33.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.33.0.tgz",
+      "integrity": "sha512-97nGbmDK0/m0B86BdiXzx3EW9RcDYKpnyL2+WwyuLHEgpfThYAnXFaMMmnTDuAO4bQJXEhflumIEUfKmP7ESGA==",
+      "dependencies": {
+        "@tanstack/query-core": "4.33.0",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
@@ -5379,6 +5416,28 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -15914,6 +15973,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
     "@mui/lab": "^5.0.0-alpha.91",
     "@mui/material": "^5.9.1",
     "@mui/x-date-pickers": "^5.0.0-beta.2",
+    "@tanstack/react-query": "^4.33.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
@@ -17,6 +18,7 @@
     "@types/node": "^16.11.45",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "axios": "^0.27.2",
     "date-fns": "^2.29.1",
     "formik": "^2.2.9",
     "react": "^18.2.0",
@@ -77,5 +79,5 @@
   "prettier": {
     "trailingComma": "all"
   },
-  "proxy": "http://localhost:5050"
+  "proxy": "http://127.0.0.1:5050"
 }

frontend/src/App.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import "./App.css";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 // Roboto font and its weights
 import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
@@ -22,21 +24,32 @@ import { AuthContextProvider } from "./AuthContext";
 // React router
 import Router from "./Router";
 
-function App() {
+// Toasts
+import Toasts from "./components/Toasts";
+import { ToastContextProvider } from "./ToastContext";
+
+const queryClient = new QueryClient();
+
+const App = () => {
   return (
+    <QueryClientProvider client={queryClient}>
       <AuthContextProvider>
         <HelmetProvider>
           <Helmet>
             <title>Todo</title>
           </Helmet>
           <ThemeProvider>
+            <ToastContextProvider>
               <Container maxWidth="md">
+                <Toasts />
                 <Router />
               </Container>
+            </ToastContextProvider>
           </ThemeProvider>
         </HelmetProvider>
       </AuthContextProvider>
+    </QueryClientProvider>
   );
-}
+};
 
 export default App;

frontend/src/Router.tsx

@@ -1,8 +1,63 @@
-import { BrowserRouter, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+
+import ScrollToTop from "./components/ScrollToTop";
+import TopBar from "./components/TopBar";
+
+import Register from "./pages/Register";
+import ConfirmEmail from "./pages/ConfirmEmail";
+import Login from "./pages/Login";
+import RequireAuth from "./components/RequireAuth";
+import ChangePassword from "./pages/ChangePassword";
+import ForgottenPassword from "./pages/ForgottenPassword";
+import ResetPassword from "./pages/ResetPassword";
+
+import CreateTodo from "./pages/CreateTodo";
+import EditTodo from "./pages/EditTodo";
+import Todos from "./pages/Todos";
 
 const Router = () => (
   <BrowserRouter>
-    <Routes>{}</Routes>
+    <ScrollToTop />
+    <TopBar />
+    <Routes>
+      <Route path="/register/" element={<Register />} />
+      <Route path="/confirm-email/:token/" element={<ConfirmEmail />} />
+      <Route path="/login/" element={<Login />} />
+      <Route
+        path="/change-password/"
+        element={
+          <RequireAuth>
+            <ChangePassword />
+          </RequireAuth>
+        }
+      />
+      <Route path="/forgotten-password/" element={<ForgottenPassword />} />
+      <Route path="/reset-password/:token/" element={<ResetPassword />} />
+      <Route
+        path="/"
+        element={
+          <RequireAuth>
+            <Todos />
+          </RequireAuth>
+        }
+      />
+      <Route
+        path="/todos/new/"
+        element={
+          <RequireAuth>
+            <CreateTodo />
+          </RequireAuth>
+        }
+      />
+      <Route
+        path="/todos/:id/"
+        element={
+          <RequireAuth>
+            <EditTodo />
+          </RequireAuth>
+        }
+      />
+    </Routes>
   </BrowserRouter>
 );
 

frontend/src/ToastContext.tsx

@@ -0,0 +1,49 @@
+import { AlertColor } from "@mui/material/Alert";
+
+import React, { createContext, useState } from "react";
+
+export interface IToast {
+  category?: AlertColor;
+  key: number;
+  message: string;
+}
+
+interface IToastContext {
+  addToast: (message: string, category: AlertColor | undefined) => void;
+  setToasts: React.Dispatch<React.SetStateAction<IToast[]>>;
+  toasts: IToast[];
+}
+
+export const ToastContext = createContext<IToastContext>({
+  addToast: () => {},
+  setToasts: () => {},
+  toasts: [],
+});
+
+interface IProps {
+  children?: React.ReactNode;
+}
+
+export const ToastContextProvider = ({ children }: IProps) => {
+  const [toasts, setToasts] = useState<IToast[]>([]);
+
+  const addToast = (
+    message: string,
+    category: AlertColor | undefined = undefined,
+  ) => {
+    setToasts((prev) => [
+      ...prev,
+      {
+        category,
+        key: new Date().getTime(),
+        message,
+      },
+    ]);
+  };
+
+  return (
+    <ToastContext.Provider value={{ addToast, setToasts, toasts }}>
+      {children}
+    </ToastContext.Provider>
+  );
+};

frontend/src/components/AccountMenu.tsx

@@ -0,0 +1,67 @@
+import axios from "axios";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import { useQueryClient } from "@tanstack/react-query";
+import React, { useContext, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { AuthContext } from "src/AuthContext";
+import { useMutation } from "src/query";
+
+const useLogout = () => {
+  const { setAuthenticated } = useContext(AuthContext);
+  const queryClient = useQueryClient();
+  const { mutate: logout } = useMutation(
+    async () => await axios.delete("/sessions/"),
+    {
+      onSuccess: () => {
+        setAuthenticated(false);
+        queryClient.clear();
+      },
+    },
+  );
+  return logout;
+};
+
+const AccountMenu = () => {
+  const logout = useLogout();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const onMenuOpen = (event: React.MouseEvent<HTMLElement>) =>
+    setAnchorEl(event.currentTarget);
+  const onMenuClose = () => setAnchorEl(null);
+
+  return (
+    <>
+      <IconButton color="inherit" onClick={onMenuOpen}>
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{ horizontal: "right", vertical: "top" }}
+        keepMounted
+        onClose={onMenuClose}
+        open={Boolean(anchorEl)}
+        transformOrigin={{ horizontal: "right", vertical: "top" }}
+      >
+        <MenuItem component={Link} onClick={onMenuClose} to="/change-password/">
+          Change password
+        </MenuItem>
+        <Divider />
+        <MenuItem
+          onClick={() => {
+            logout();
+            onMenuClose();
+          }}
+        >
+          Logout
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default AccountMenu;

frontend/src/components/Title.tsx

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

frontend/src/components/Toasts.tsx

@@ -0,0 +1,47 @@
+import Alert from "@mui/material/Alert";
+import Snackbar from "@mui/material/Snackbar";
+import React, { useContext, useEffect, useState } from "react";
+
+import { ToastContext, IToast } from "src/ToastContext";
+
+const Toasts = () => {
+  const { toasts, setToasts } = useContext(ToastContext);
+  const [open, setOpen] = useState(false);
+  const [currentToast, setCurrentToast] = useState<IToast | undefined>();
+
+  useEffect(() => {
+    if (!open && toasts.length) {
+      setCurrentToast(toasts[0]);
+      setToasts((prev) => prev.slice(1));
+      setOpen(true);
+    }
+  }, [open, setCurrentToast, setOpen, setToasts, toasts]);
+
+  const onClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason !== "clickaway") {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Snackbar
+      anchorOrigin={{
+        horizontal: "center",
+        vertical: "top",
+      }}
+      autoHideDuration={6000}
+      key={currentToast?.key}
+      onClose={onClose}
+      open={open}
+      TransitionProps={{
+        onExited: () => setCurrentToast(undefined),
+      }}
+    >
+      <Alert onClose={onClose} severity={currentToast?.category}>
+        {currentToast?.message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default Toasts;

frontend/src/components/Todo.tsx

@@ -0,0 +1,61 @@
+import Checkbox from "@mui/material/Checkbox";
+import IconButton from "@mui/material/IconButton";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Skeleton from "@mui/material/Skeleton";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { format } from "date-fns";
+import { Link } from "react-router-dom";
+
+import { Todo as TodoModel } from "../models";
+import { useDeleteTodoMutation } from "../queries";
+
+interface IProps {
+  todo?: TodoModel;
+}
+
+const Todo = ({ todo }: IProps) => {
+  const { mutateAsync: deleteTodo } = useDeleteTodoMutation();
+  let secondary;
+  if (todo === undefined) {
+    secondary = <Skeleton width="200px" />;
+  } else if (todo.due !== null) {
+    secondary = format(todo.due, "P");
+  }
+  return (
+    <ListItem
+      secondaryAction={
+        <IconButton
+          disabled={todo === undefined}
+          edge="end"
+          onClick={() => deleteTodo(todo?.id!)}
+        >
+          <DeleteIcon />
+        </IconButton>
+      }
+    >
+      <ListItemButton
+        component={Link}
+        disabled={todo === undefined}
+        to={`/todos/${todo?.id}/`}
+      >
+        <ListItemIcon>
+          <Checkbox
+            checked={todo?.complete ?? false}
+            disabled
+            disableRipple
+            edge="start"
+            tabIndex={-1}
+          />
+        </ListItemIcon>
+        <ListItemText
+          primary={todo?.task ?? <Skeleton />}
+          secondary={secondary}
+        />
+      </ListItemButton>
+    </ListItem>
+  );
+};
+export default Todo;

frontend/src/components/TodoForm.tsx

@@ -0,0 +1,44 @@
+import { Form, Formik } from "formik";
+import * as yup from "yup";
+
+import CheckboxField from "../components/CheckboxField";
+import DateField from "../components/DateField";
+import FormActions from "../components/FormActions";
+import TextField from "../components/TextField";
+import type { ITodoData } from "../queries";
+
+interface IProps {
+  initialValues: ITodoData;
+  label: string;
+  onSubmit: (data: ITodoData) => Promise<any>;
+}
+
+const validationSchema = yup.object({
+  complete: yup.boolean(),
+  due: yup.date().nullable(),
+  task: yup.string().required("Required"),
+});
+
+const TodoForm = ({ initialValues, label, onSubmit }: IProps) => (
+  <Formik<ITodoData>
+    initialValues={initialValues}
+    onSubmit={onSubmit}
+    validationSchema={validationSchema}
+  >
+    {({ dirty, isSubmitting }) => (
+      <Form>
+        <TextField fullWidth label="Task" name="task" required />
+        <DateField fullWidth label="Due" name="due" />
+        <CheckboxField fullWidth label="Complete" name="complete" />
+        <FormActions
+          disabled={!dirty}
+          isSubmitting={isSubmitting}
+          label={label}
+          links={[{ label: "Back", to: "/" }]}
+        />
+      </Form>
+    )}
+  </Formik>
+);
+
+export default TodoForm;

frontend/src/components/TopBar.tsx

@@ -0,0 +1,37 @@
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Toolbar from "@mui/material/Toolbar";
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+
+import { AuthContext } from "src/AuthContext";
+import AccountMenu from "src/components/AccountMenu";
+
+const sxToolbar = {
+  paddingLeft: "env(safe-area-inset-left)",
+  paddingRight: "env(safe-area-inset-right)",
+  paddingTop: "env(safe-area-inset-top)",
+};
+
+const TopBar = () => {
+  const { authenticated } = useContext(AuthContext);
+
+  return (
+    <>
+      <AppBar position="fixed">
+        <Toolbar sx={sxToolbar}>
+          <Box sx={{ flexGrow: 1 }}>
+            <Button color="inherit" component={Link} to="/">
+              Todo
+            </Button>
+          </Box>
+          {authenticated ? <AccountMenu /> : null}
+        </Toolbar>
+      </AppBar>
+      <Toolbar sx={{ ...sxToolbar, marginBottom: 2 }} />
+    </>
+  );
+};
+
+export default TopBar;

frontend/src/models.tsx

@@ -0,0 +1,36 @@
+import { formatISO } from "date-fns";
+import * as yup from "yup";
+
+const todoSchema = yup.object({
+  complete: yup.boolean().required(),
+  due: yup.date().nullable(),
+  id: yup.number().required().positive().integer(),
+  task: yup.string().trim().min(1).defined().strict(true),
+});
+
+export class Todo {
+  complete: boolean;
+  due: Date | null;
+  id: number;
+  task: string;
+
+  constructor(data: any) {
+    const validatedData = todoSchema.validateSync(data);
+    this.complete = validatedData.complete;
+    this.due = validatedData.due ?? null;
+    this.id = validatedData.id;
+    this.task = validatedData.task;
+  }
+
+  toJSON(): any {
+    return {
+      complete: this.complete,
+      due:
+        this.due !== null
+          ? formatISO(this.due, { representation: "date" })
+          : null,
+      id: this.id,
+      task: this.task,
+    };
+  }
+}

frontend/src/pages/ChangePassword.tsx

@@ -0,0 +1,90 @@
+import axios from "axios";
+import { Form, Formik, FormikHelpers } from "formik";
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import * as yup from "yup";
+
+import FormActions from "src/components/FormActions";
+import LazyPasswordWithStrengthField from "src/components/LazyPasswordWithStrengthField";
+import PasswordField from "src/components/PasswordField";
+import Title from "src/components/Title";
+import { ToastContext } from "src/ToastContext";
+import { useMutation } from "src/query";
+
+interface IForm {
+  currentPassword: string;
+  newPassword: string;
+}
+
+const useChangePassword = () => {
+  const { addToast } = useContext(ToastContext);
+  const { mutateAsync: changePassword } = useMutation(
+    async (data: IForm) => await axios.put("/members/password/", data),
+  );
+  const navigate = useNavigate();
+
+  return async (data: IForm, { setFieldError }: FormikHelpers<IForm>) => {
+    try {
+      await changePassword(data);
+      addToast("Changed", "success");
+      navigate("/");
+    } catch (error: any) {
+      if (axios.isAxiosError(error)) {
+        if (error.response?.status === 400) {
+          setFieldError("newPassword", "Password is too weak");
+        } else if (error.response?.status === 401) {
+          setFieldError("currentPassword", "Incorrect password");
+        }
+      } else {
+        addToast("Try again", "error");
+      }
+    }
+  };
+};
+
+const validationSchema = yup.object({
+  currentPassword: yup.string().required("Required"),
+  newPassword: yup.string().required("Required"),
+});
+
+const ChangePassword = () => {
+  const onSubmit = useChangePassword();
+
+  return (
+    <>
+      <Title title="Change Password" />
+      <Formik<IForm>
+        initialValues={{ currentPassword: "", newPassword: "" }}
+        onSubmit={onSubmit}
+        validationSchema={validationSchema}
+      >
+        {({ dirty, isSubmitting }) => (
+          <Form>
+            <PasswordField
+              autoComplete="current-password"
+              fullWidth
+              label="Current password"
+              name="currentPassword"
+              required
+            />
+            <LazyPasswordWithStrengthField
+              autoComplete="new-password"
+              fullWidth
+              label="New password"
+              name="newPassword"
+              required
+            />
+            <FormActions
+              disabled={!dirty}
+              isSubmitting={isSubmitting}
+              label="Change"
+              links={[{ label: "Back", to: "/" }]}
+            />
+          </Form>
+        )}
+      </Formik>
+    </>
+  );
+};
+
+export default ChangePassword;

frontend/src/pages/ConfirmEmail.tsx

@@ -0,0 +1,44 @@
+import LinearProgress from "@mui/material/LinearProgress";
+import axios from "axios";
+import { useContext } from "react";
+import { useParams } from "react-router";
+import { Navigate } from "react-router-dom";
+
+import { useQuery } from "../query";
+import { ToastContext } from "../ToastContext";
+
+interface IParams {
+  token?: string;
+}
+
+const ConfirmEmail = () => {
+  const { addToast } = useContext(ToastContext);
+  const params = useParams() as IParams;
+  const token = params.token ?? "";
+  const { isLoading } = useQuery(
+    ["Email"],
+    async () => await axios.put("/members/email/", { token }),
+    {
+      onError: (error: any) => {
+        if (error.response?.status === 400) {
+          if (error.response?.data.code === "TOKEN_INVALID") {
+            addToast("Invalid token", "error");
+          } else if (error.response?.data.code === "TOKEN_EXPIRED") {
+            addToast("Token expired", "error");
+          }
+        } else {
+          addToast("Try again", "error");
+        }
+      },
+      onSuccess: () => addToast("Thanks", "success"),
+    },
+  );
+
+  if (isLoading) {
+    return <LinearProgress />;
+  } else {
+    return <Navigate to="/" />;
+  }
+};
+
+export default ConfirmEmail;

frontend/src/pages/CreateTodo.tsx

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+
+import TodoForm from "../components/TodoForm";
+import Title from "../components/Title";
+import type { ITodoData } from "../queries";
+import { useCreateTodoMutation } from "../queries";
+import { ToastContext } from "../ToastContext";
+
+const CreateTodo = () => {
+  const navigate = useNavigate();
+  const { addToast } = useContext(ToastContext);
+  const { mutateAsync: createTodo } = useCreateTodoMutation();
+
+  const onSubmit = async (data: ITodoData) => {
+    try {
+      await createTodo(data);
+      navigate("/");
+    } catch {
+      addToast("Try Again", "error");
+    }
+  };
+
+  return (
+    <>
+      <Title title="Create a Todo" />
+      <TodoForm
+        initialValues={{ complete: false, due: null, task: "" }}
+        label="Create"
+        onSubmit={onSubmit}
+      />
+    </>
+  );
+};
+
+export default CreateTodo;

frontend/src/pages/EditTodo.tsx

@@ -0,0 +1,52 @@
+import Skeleton from "@mui/material/Skeleton";
+import { useContext } from "react";
+import { useNavigate, useParams } from "react-router";
+
+import TodoForm from "../components/TodoForm";
+import Title from "../components/Title";
+import type { ITodoData } from "../queries";
+import { useEditTodoMutation, useTodoQuery } from "../queries";
+import { ToastContext } from "../ToastContext";
+
+interface Iparams {
+  id: string;
+}
+
+const EditTodo = () => {
+  const navigate = useNavigate();
+  const params = useParams<keyof Iparams>() as Iparams;
+  const todoId = parseInt(params.id, 10);
+  const { addToast } = useContext(ToastContext);
+  const { data: todo } = useTodoQuery(todoId);
+  const { mutateAsync: editTodo } = useEditTodoMutation(todoId);
+
+  const onSubmit = async (data: ITodoData) => {
+    try {
+      await editTodo(data);
+      navigate("/");
+    } catch {
+      addToast("Try again", "error");
+    }
+  };
+
+  return (
+    <>
+      <Title title="Edit todo" />
+      {todo === undefined ? (
+        <Skeleton height="80px" />
+      ) : (
+        <TodoForm
+          initialValues={{
+            complete: todo.complete,
+            due: todo.due,
+            task: todo.task,
+          }}
+          label="Edit"
+          onSubmit={onSubmit}
+        />
+      )}
+    </>
+  );
+};
+
+export default EditTodo;

frontend/src/pages/ForgottenPassword.tsx

@@ -0,0 +1,82 @@
+import axios from "axios";
+import { Form, Formik } from "formik";
+import { useContext } from "react";
+import { useLocation, useNavigate } from "react-router";
+import * as yup from "yup";
+
+import EmailField from "src/components/EmailField";
+import FormActions from "src/components/FormActions";
+import Title from "src/components/Title";
+import { useMutation } from "src/query";
+import { ToastContext } from "src/ToastContext";
+
+interface IForm {
+  email: string;
+}
+
+const useForgottenPassword = () => {
+  const navigate = useNavigate();
+  const { addToast } = useContext(ToastContext);
+
+  const { mutateAsync: forgottenPassword } = useMutation(
+    async (data: IForm) =>
+      await axios.post("/members/forgotten-password/", data),
+  );
+
+  return async (data: IForm) => {
+    try {
+      await forgottenPassword(data);
+      addToast("Reset link sent to your email", "success");
+      navigate("/login/");
+    } catch {
+      addToast("Try again", "error");
+    }
+  };
+};
+
+const validationSchema = yup.object({
+  email: yup.string().email("Email invalid").required("Required"),
+});
+
+const ForgottenPassword = () => {
+  const onSubmit = useForgottenPassword();
+  const location = useLocation();
+
+  return (
+    <>
+      <Title title="Forgotten password" />
+      <Formik<IForm>
+        initialValues={{
+          email: (location.state as any)?.email ?? "",
+        }}
+        onSubmit={onSubmit}
+        validationSchema={validationSchema}
+      >
+        {({ dirty, isSubmitting, values }) => (
+          <Form>
+            <EmailField fullWidth label="Email" name="email" required />
+            <FormActions
+              disabled={!dirty}
+              isSubmitting={isSubmitting}
+              label="Send email"
+              links={[
+                {
+                  label: "Login",
+                  to: "/login/",
+                  state: { email: values.email },
+                },
+                {
+                  label: "Register",
+                  to: "/register/",
+                  state: { email: values.email },
+                },
+              ]}
+            />
+          </Form>
+        )}
+      </Formik>
+    </>
+  );
+};
+
+export default ForgottenPassword;

frontend/src/pages/Login.tsx

@@ -0,0 +1,99 @@
+import axios from "axios";
+import { Form, Formik, FormikHelpers } from "formik";
+import { useContext } from "react";
+import { useLocation, useNavigate } from "react-router";
+import * as yup from "yup";
+
+import { AuthContext } from "../AuthContext";
+import EmailField from "../components/EmailField";
+import FormActions from "../components/FormActions";
+import PasswordField from "../components/PasswordField";
+import Title from "../components/Title";
+import { ToastContext } from "../ToastContext";
+import { useMutation } from "../query";
+
+interface IForm {
+  email: string;
+  password: string;
+}
+
+const useLogin = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { addToast } = useContext(ToastContext);
+  const { setAuthenticated } = useContext(AuthContext);
+  const { mutateAsync: login } = useMutation(
+    async (data: IForm) => await axios.post("/sessions/", data),
+  );
+
+  return async (data: IForm, { setFieldError }: FormikHelpers<IForm>) => {
+    try {
+      await login(data);
+      setAuthenticated(true);
+      navigate((location.state as any)?.from ?? "/");
+    } catch (error: any) {
+      if (error.response?.status === 401) {
+        setFieldError("email", "Invalid credentials");
+        setFieldError("password", "Invalid credentials");
+      } else {
+        addToast("Try again", "error");
+      }
+    }
+  };
+};
+
+const validationSchema = yup.object({
+  email: yup.string().email("Email invalid").required("Required"),
+  password: yup.string().required("Required"),
+});
+
+const Login = () => {
+  const onSubmit = useLogin();
+  const location = useLocation();
+
+  return (
+    <>
+      <Title title="Login" />
+      <Formik<IForm>
+        initialValues={{
+          email: (location.state as any)?.email ?? "",
+          password: "",
+        }}
+        onSubmit={onSubmit}
+        validationSchema={validationSchema}
+      >
+        {({ dirty, isSubmitting, values }) => (
+          <Form>
+            <EmailField fullWidth label="Email" name="email" required />
+            <PasswordField
+              autoComplete="password"
+              fullWidth
+              label="Password"
+              name="password"
+              required
+            />
+            <FormActions
+              disabled={!dirty}
+              isSubmitting={isSubmitting}
+              label="Login"
+              links={[
+                {
+                  label: "Reset password",
+                  to: "/forgotten-password/",
+                  state: { email: values.email },
+                },
+                {
+                  label: "Register",
+                  to: "/register/",
+                  state: { email: values.email },
+                },
+              ]}
+            />
+          </Form>
+        )}
+      </Formik>
+    </>
+  );
+};
+
+export default Login;

frontend/src/pages/Register.tsx

@@ -0,0 +1,99 @@
+import axios from "axios";
+import { Form, Formik, FormikHelpers } from "formik";
+import { useContext } from "react";
+import { useNavigate } from "react-router";
+import { useLocation } from "react-router-dom";
+import * as yup from "yup";
+
+import EmailField from "src/components/EmailField";
+import FormActions from "src/components/FormActions";
+import LazyPasswordWithStrengthField from "src/components/LazyPasswordWithStrengthField";
+import Title from "src/components/Title";
+import { ToastContext } from "src/ToastContext";
+import { useMutation } from "src/query";
+
+interface IForm {
+  email: string;
+  password: string;
+}
+
+const useRegister = () => {
+  const navigate = useNavigate();
+  const { addToast } = useContext(ToastContext);
+  const { mutateAsync: register } = useMutation(
+    async (data: IForm) => await axios.post("/members/", data),
+  );
+
+  return async (data: IForm, { setFieldError }: FormikHelpers<IForm>) => {
+    try {
+      await register(data);
+      addToast("Registered", "success");
+      navigate("/login/", { state: { email: data.email } });
+    } catch (error: any) {
+      if (
+        error.response?.status === 400 &&
+        error.response?.data.code === "WEAK_PASSWORD"
+      ) {
+        setFieldError("password", "Password is too weak");
+      } else {
+        addToast("Try again", "error");
+      }
+    }
+  };
+};
+
+const validationSchema = yup.object({
+  email: yup.string().email("Email invalid").required("Required"),
+  password: yup.string().required("Required"),
+});
+
+const Register = () => {
+  const location = useLocation();
+  const onSubmit = useRegister();
+
+  return (
+    <>
+      <Title title="Register" />
+      <Formik<IForm>
+        initialValues={{
+          email: (location.state as any)?.email ?? "",
+          password: "",
+        }}
+        onSubmit={onSubmit}
+        validationSchema={validationSchema}
+      >
+        {({ dirty, isSubmitting, values }) => (
+          <Form>
+            <EmailField fullWidth label="Email" name="email" required />
+            <LazyPasswordWithStrengthField
+              autoComplete="new-password"
+              fullWidth
+              label="Password"
+              name="password"
+              required
+            />
+            <FormActions
+              disabled={!dirty}
+              isSubmitting={isSubmitting}
+              label="Register"
+              links={[
+                {
+                  label: "Login",
+                  to: "/login/",
+                  state: { email: values.email },
+                },
+                {
+                  label: "Reset password",
+                  to: "/forgotten-password/",
+                  state: { email: values.email },
+                },
+              ]}
+            />
+          </Form>
+        )}
+      </Formik>
+    </>
+  );
+};
+
+export default Register;

frontend/src/pages/ResetPassword.tsx

@@ -0,0 +1,90 @@
+import axios from "axios";
+import { Form, Formik, FormikHelpers } from "formik";
+import { useContext } from "react";
+import { useNavigate, useParams } from "react-router";
+import * as yup from "yup";
+
+import LazyPasswordWithStrengthField from "src/components/LazyPasswordWithStrengthField";
+import FormActions from "src/components/FormActions";
+import Title from "src/components/Title";
+import { useMutation } from "src/query";
+import { ToastContext } from "src/ToastContext";
+
+interface IForm {
+  password: string;
+}
+
+interface IParams {
+  token?: string;
+}
+
+const useResetPassword = () => {
+  const navigate = useNavigate();
+  const params = useParams() as IParams;
+  const token = params.token ?? "";
+  const { addToast } = useContext(ToastContext);
+
+  const { mutateAsync: reset } = useMutation(
+    async (password: string) =>
+      await axios.put("/members/reset-password/", { password, token }),
+  );
+
+  return async (data: IForm, { setFieldError }: FormikHelpers<IForm>) => {
+    try {
+      await reset(data.password);
+      addToast("Success", "success");
+      navigate("/login/");
+    } catch (error: any) {
+      if (error.response?.status === 400) {
+        if (error.response?.data.code === "WEAK_PASSWORD") {
+          setFieldError("newPassword", "Password is too weak");
+        } else if (error.response?.data.code === "TOKEN_INVALID") {
+          addToast("Invalid token", "error");
+        } else if (error.response?.data.code === "TOKEN_EXPIRED") {
+          addToast("Token expired", "error");
+        }
+      } else {
+        addToast("Try again", "error");
+      }
+    }
+  };
+};
+
+const validationSchema = yup.object({
+  email: yup.string().email("Email invalid").required("Required"),
+});
+
+const ResetPassword = () => {
+  const onSubmit = useResetPassword();
+
+  return (
+    <>
+      <Title title="Reset password" />
+      <Formik<IForm>
+        initialValues={{ password: "" }}
+        onSubmit={onSubmit}
+        validationSchema={validationSchema}
+      >
+        {({ dirty, isSubmitting, values }) => (
+          <Form>
+            <LazyPasswordWithStrengthField
+              autoComplete="new-password"
+              fullWidth
+              label="Password"
+              name="password"
+              required
+            />
+            <FormActions
+              disabled={!dirty}
+              isSubmitting={isSubmitting}
+              label="Reset password"
+              links={[{ label: "Login", to: "/login/" }]}
+            />
+          </Form>
+        )}
+      </Formik>
+    </>
+  );
+};
+
+export default ResetPassword;

frontend/src/pages/Todos.tsx

@@ -0,0 +1,38 @@
+import Fab from "@mui/material/Fab";
+import List from "@mui/material/List";
+import AddIcon from "@mui/icons-material/Add";
+import { Link, Navigate } from "react-router-dom";
+
+import Todo from "../components/Todo";
+import { useTodosQuery } from "../queries";
+
+const Todos = () => {
+  const { data: todos } = useTodosQuery();
+
+  if (todos?.length === 0) {
+    return <Navigate to="/todos/new/" />;
+  } else {
+    return (
+      <>
+        <List>
+          {todos !== undefined
+            ? todos.map((todo) => <Todo key={todo.id} todo={todo} />)
+            : [1, 2, 3].map((id) => <Todo key={-id} />)}
+        </List>
+        <Fab
+          component={Link}
+          sx={{
+            bottom: (theme) => theme.spacing(2),
+            position: "fixed",
+            right: (theme) => theme.spacing(2),
+          }}
+          to="/todos/new/"
+        >
+          <AddIcon />
+        </Fab>
+      </>
+    );
+  }
+};
+
+export default Todos;

frontend/src/queries.ts

@@ -0,0 +1,72 @@
+import axios from "axios";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { Todo } from "./models";
+import { useMutation, useQuery } from "./query";
+
+export const STALE_TIME = 1000 * 60 * 5; // 5 mins
+
+export const useTodosQuery = () =>
+  useQuery<Todo[]>(
+    ["todos"],
+    async () => {
+      const response = await axios.get("/todos/");
+      return response.data.todos.map((json: any) => new Todo(json));
+    },
+    { staleTime: STALE_TIME },
+  );
+
+export const useTodoQuery = (id: number) => {
+  const queryClient = useQueryClient();
+  return useQuery<Todo>(
+    ["todos", id.toString()],
+    async () => {
+      const response = await axios.get(`/todos/${id}/`);
+      return new Todo(response.data);
+    },
+    {
+      initialData: () => {
+        return queryClient
+          .getQueryData<Todo[]>(["todos"])
+          ?.filter((todo: Todo) => todo.id === id)[0];
+      },
+      staleTime: STALE_TIME,
+    },
+  );
+};
+
+export interface ITodoData {
+  complete: boolean;
+  due: Date | null;
+  task: string;
+}
+
+export const useCreateTodoMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async (data: ITodoData) => await axios.post("/todos/", data),
+    {
+      onSuccess: () => queryClient.invalidateQueries(["todos"]),
+    },
+  );
+};
+
+export const useEditTodoMutation = (id: number) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async (data: ITodoData) => await axios.put(`/todos/${id}/`, data),
+    {
+      onSuccess: () => queryClient.invalidateQueries(["todos"]),
+    },
+  );
+};
+
+export const useDeleteTodoMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async (id: number) => await axios.delete(`/todos/${id}/`),
+    {
+      onSuccess: () => queryClient.invalidateQueries(["todos"]),
+    },
+  );
+};

frontend/src/query.ts

@@ -0,0 +1,80 @@
+import axios, { AxiosError } from "axios";
+import { useContext } from "react";
+import {
+  MutationFunction,
+  QueryFunction,
+  QueryFunctionContext,
+  QueryKey,
+  useMutation as useReactMutation,
+  UseMutationOptions,
+  UseMutationResult,
+  useQuery as useReactQuery,
+  UseQueryOptions,
+  UseQueryResult,
+} from "@tanstack/react-query";
+
+import { AuthContext } from "src/AuthContext";
+
+const MAX_FAILURES = 2;
+
+export function useQuery<
+  TQueryFnData = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options?: UseQueryOptions<TQueryFnData, AxiosError, TData, TQueryKey>,
+): UseQueryResult<TData, AxiosError> {
+  const { setAuthenticated } = useContext(AuthContext);
+
+  return useReactQuery<TQueryFnData, AxiosError, TData, TQueryKey>(
+    queryKey,
+    async (context: QueryFunctionContext<TQueryKey>) => {
+      try {
+        return await queryFn(context);
+      } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === 401) {
+          setAuthenticated(false);
+        }
+        throw error;
+      }
+    },
+    {
+      retry: (failureCount: number, error: AxiosError) =>
+        failureCount < MAX_FAILURES &&
+        (!error.response || error.response.status >= 500),
+      ...options,
+    },
+  );
+}
+
+export function useMutation<
+  TData = unknown,
+  TVariables = void,
+  TContext = unknown,
+>(
+  mutationFn: MutationFunction<TData, TVariables>,
+  options?: UseMutationOptions<TData, AxiosError, TVariables, TContext>,
+): UseMutationResult<TData, AxiosError, TVariables, TContext> {
+  const { setAuthenticated } = useContext(AuthContext);
+
+  return useReactMutation<TData, AxiosError, TVariables, TContext>(
+    async (variables: TVariables) => {
+      try {
+        return await mutationFn(variables);
+      } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === 401) {
+          setAuthenticated(false);
+        }
+        throw error;
+      }
+    },
+    {
+      retry: (failureCount: number, error: AxiosError) =>
+        failureCount < MAX_FAILURES &&
+        (!error.response || error.response.status >= 500),
+      ...options,
+    },
+  );
+}