quick save

.env

@@ -1 +1 @@
-VITE_API_BASE_URL=REPLACE_ME
+VITE_API_BASE_URL=http://localhost:8000/

package.json

@@ -20,7 +20,7 @@
   },
   "//": "🚫 Don't add `dependencies` below that are inherited from the CFL package.",
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.0.0"
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#auth_flow"
   },
   "//": "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package.",
   "devDependencies": {

src/App.tsx

@@ -1,67 +1,15 @@
-import "./App.css"
-import { Counter } from "./features/counter/Counter"
-import { Quotes } from "./features/quotes/Quotes"
-import logo from "./logo.svg"
+import { CssBaseline, ThemeProvider } from "@mui/material"
+import type { FC } from "react"
 
-const App = () => {
+import theme from "./app/theme"
+import Router from "./router"
+
+const App: FC = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Counter />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <Quotes />
-        <span>
-          <span>Learn </span>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux.js.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux-toolkit.js.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux Toolkit
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://react-redux.js.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React Redux
-          </a>
-          ,<span> and </span>
-          <a
-            className="App-link"
-            href="https://reselect.js.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Reselect
-          </a>
-        </span>
-      </header>
-    </div>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Router />
+    </ThemeProvider>
   )
 }
 

src/api/sso.ts

@@ -0,0 +1,73 @@
+// TODO: rename this file to session.ts and move to codeforlife-sso-frontend.
+
+import { type Class, type OtpBypassToken, type User } from "codeforlife/api"
+import { type SessionMetadata } from "codeforlife/hooks"
+import { type Arg } from "codeforlife/utils/api"
+
+import api from "."
+
+const baseUrl = "sso/session/"
+
+const ssoApi = api.injectEndpoints({
+  endpoints: build => ({
+    loginWithEmail: build.mutation<
+      SessionMetadata,
+      Arg<User, "email" | "password">
+    >({
+      query: body => ({
+        url: baseUrl + "login-with-email/",
+        method: "POST",
+        body,
+      }),
+    }),
+    loginWithOtp: build.mutation<null, { otp: number }>({
+      query: body => ({
+        url: baseUrl + "otp/",
+        method: "POST",
+        body,
+      }),
+    }),
+    loginWithOtpBypassToken: build.mutation<
+      SessionMetadata,
+      Arg<OtpBypassToken, "token">
+    >({
+      query: body => ({
+        url: baseUrl + "login-with-otp-bypass-token/",
+        method: "POST",
+        body,
+      }),
+    }),
+    loginAsStudent: build.mutation<
+      SessionMetadata,
+      Arg<User, "first_name" | "password"> & { class_id: Class["id"] }
+    >({
+      query: body => ({
+        url: baseUrl + "login-as-student/",
+        method: "POST",
+        body,
+      }),
+    }),
+    autoLoginAsStudent: build.mutation<
+      SessionMetadata,
+      {
+        user_id: User["id"]
+        auto_gen_password: string
+      }
+    >({
+      query: body => ({
+        url: baseUrl + "auto-login-as-student/",
+        method: "POST",
+        body,
+      }),
+    }),
+  }),
+})
+
+export default ssoApi
+export const {
+  useLoginWithEmailMutation,
+  useLoginWithOtpMutation,
+  useLoginWithOtpBypassTokenMutation,
+  useLoginAsStudentMutation,
+  useAutoLoginAsStudentMutation,
+} = ssoApi

src/app/schemas.ts

@@ -0,0 +1,36 @@
+import * as yup from "yup"
+
+export const accessCodeSchema = yup
+  .string()
+  .matches(/^[A-Z0-9]{5}$/, "Invalid access code")
+
+const passwordSchema = yup.string().required("required")
+
+export const teacherPasswordSchema = passwordSchema.test({
+  message: "too-weak",
+  test: password =>
+    password.length >= 10 &&
+    !(
+      password.search(/[A-Z]/) === -1 ||
+      password.search(/[a-z]/) === -1 ||
+      password.search(/[0-9]/) === -1 ||
+      password.search(/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/) === -1
+    ),
+})
+
+export const studentPasswordSchema = passwordSchema.test({
+  message: "too-weak",
+  test: password => password.length >= 6,
+})
+
+// TODO: make indy password schema the same as teacher's.
+export const indyPasswordSchema = passwordSchema.test({
+  message: "too-weak",
+  test: password =>
+    password.length >= 8 &&
+    !(
+      password.search(/[A-Z]/) === -1 ||
+      password.search(/[a-z]/) === -1 ||
+      password.search(/[0-9]/) === -1
+    ),
+})

src/app/store.ts

@@ -1,38 +1,21 @@
 import type { Action, ThunkAction } from "@reduxjs/toolkit"
-import { combineSlices, configureStore } from "@reduxjs/toolkit"
-import { setupListeners } from "@reduxjs/toolkit/query"
-import { counterSlice } from "../features/counter/counterSlice"
-import { quotesApiSlice } from "../features/quotes/quotesApiSlice"
+import { combineSlices } from "@reduxjs/toolkit"
+
+import { makeStore } from "codeforlife/utils/store"
+
+import api from "../api"
 
 // `combineSlices` automatically combines the reducers using
 // their `reducerPath`s, therefore we no longer need to call `combineReducers`.
-const rootReducer = combineSlices(counterSlice, quotesApiSlice)
-// Infer the `RootState` type from the root reducer
-export type RootState = ReturnType<typeof rootReducer>
+const reducer = combineSlices(api)
 
-// The store setup is wrapped in `makeStore` to allow reuse
-// when setting up tests that need the same store config
-export const makeStore = (preloadedState?: Partial<RootState>) => {
-  const store = configureStore({
-    reducer: rootReducer,
-    // Adding the api middleware enables caching, invalidation, polling,
-    // and other useful features of `rtk-query`.
-    middleware: getDefaultMiddleware => {
-      return getDefaultMiddleware().concat(quotesApiSlice.middleware)
-    },
-    preloadedState,
-  })
-  // configure listeners using the provided defaults
-  // optional, but required for `refetchOnFocus`/`refetchOnReconnect` behaviors
-  setupListeners(store.dispatch)
-  return store
-}
+// Infer the `RootState` type from the root reducer
+export type RootState = ReturnType<typeof reducer>
 
-export const store = makeStore()
+const store = makeStore({ reducer, middlewares: [api.middleware] })
 
-// Infer the type of `store`
+export default store
 export type AppStore = typeof store
-// Infer the `AppDispatch` type from the store itself
 export type AppDispatch = AppStore["dispatch"]
 export type AppThunk<ThunkReturnType = void> = ThunkAction<
   ThunkReturnType,