From 59af02d4e277b51162ad7358d32f0b68083f001d Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 01:50:04 +0000
Subject: [PATCH 01/22] Add join button to desktop nav

---
 ui/src/components/Header.tsx | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 569558bb..41ac4301 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -4,6 +4,7 @@ import {
   Home,
   Menu,
   Notifications,
+  Person,
 } from "@mui/icons-material";
 import {
   AppBar,
@@ -230,31 +231,46 @@ function Desktop() {
               justifyContent: "center",
               textDecoration: "none",
               textTransform: "uppercase",
-              "&:hover": { color: "#ccc" },
               mx: 1,
             }}
             onClick={() => analytics.nav.notificationsClicked()}
           >
             <Button
               variant="outlined"
-              // color="info"
               startIcon={<Notifications />}
               sx={{
                 borderRadius: 8,
                 backgroundColor: "white",
-                "&:hover": {
-                  borderColor: "#a2d1cf",
-                  backgroundColor: "#efefef",
-                },
-                "&:focus": {
-                  borderColor: "#a2d1cf",
-                  backgroundColor: "#efefef",
-                },
               }}
             >
               Get notified
             </Button>
           </Link>
+          <Link
+            href="/join"
+            title="Join Orcasound"
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              textDecoration: "none",
+              textTransform: "uppercase",
+              mx: 1,
+            }}
+            // TODO(@paulcretu): Add analytics event
+            // onClick={() => analytics.nav.joinClicked()}
+          >
+            <Button
+              variant="outlined"
+              startIcon={<Person />}
+              sx={{
+                borderRadius: 8,
+                backgroundColor: "white",
+              }}
+            >
+              Join
+            </Button>
+          </Link>
         </Box>
       </Box>
     </Box>

From 13ce58b40f8d16b92542f390d92c3839f77586d2 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 03:32:16 +0000
Subject: [PATCH 02/22] Refactor unnecessary styles

---
 ui/src/components/Header.tsx | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 41ac4301..e44f3ba8 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -211,11 +211,11 @@ function Desktop() {
               href={page.url}
               target="_blank"
               key={page.label}
+              variant="text"
               sx={{
                 my: 2,
                 mx: 1,
                 color: "base.contrastText",
-                display: "block",
               }}
             >
               {page.label}
@@ -226,11 +226,7 @@ function Desktop() {
             title="Get notified when there's whale activity."
             target="_blank"
             sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              textDecoration: "none",
-              textTransform: "uppercase",
+              my: 2,
               mx: 1,
             }}
             onClick={() => analytics.nav.notificationsClicked()}
@@ -250,22 +246,18 @@ function Desktop() {
             href="/join"
             title="Join Orcasound"
             sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              textDecoration: "none",
-              textTransform: "uppercase",
+              my: 2,
               mx: 1,
             }}
             // TODO(@paulcretu): Add analytics event
             // onClick={() => analytics.nav.joinClicked()}
           >
             <Button
-              variant="outlined"
+              variant="contained"
+              color="primary"
               startIcon={<Person />}
               sx={{
                 borderRadius: 8,
-                backgroundColor: "white",
               }}
             >
               Join

From 0aeb4e7921fb6844703ca5215cf0975e51aaeb0a Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 03:44:07 +0000
Subject: [PATCH 03/22] Change colors

---
 ui/src/components/Header.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index e44f3ba8..338528c0 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -232,11 +232,11 @@ function Desktop() {
             onClick={() => analytics.nav.notificationsClicked()}
           >
             <Button
-              variant="outlined"
-              startIcon={<Notifications />}
+              variant="contained"
+              color="primary"
+              startIcon={<Notifications sx={{ color: "gold" }} />}
               sx={{
                 borderRadius: 8,
-                backgroundColor: "white",
               }}
             >
               Get notified

From e0e41ff4c8c7fb6bee0bc6c5aa894a0314a5b8f2 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 03:52:16 +0000
Subject: [PATCH 04/22] Add mobile join link

---
 ui/src/components/Header.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 338528c0..0feb7df0 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -107,6 +107,25 @@ function Mobile({
           {menuIsOpen ? <Close /> : <Menu />}
         </IconButton>
         <Brand onClick={onBrandClick} />
+        <Link
+          href="/join"
+          title="Join Orcasound"
+          sx={{
+            marginLeft: "auto",
+            paddingLeft: 1,
+          }}
+        >
+          <Button
+            variant="contained"
+            startIcon={<Person />}
+            color="primary"
+            sx={{
+              borderRadius: 8,
+            }}
+          >
+            Join
+          </Button>
+        </Link>
       </Box>
       <nav>
         <Drawer
@@ -281,6 +300,7 @@ function Brand({ onClick }: { onClick?: () => void }) {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
+          px: 4,
         }}
         onClick={() => {
           if (onClick) onClick();

From 71123b49778efd1633c149f1fb7c4185c57dd4b4 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 03:52:54 +0000
Subject: [PATCH 05/22] Add nowrap to nav items

---
 ui/src/components/Header.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 0feb7df0..42b4551f 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -235,6 +235,7 @@ function Desktop() {
                 my: 2,
                 mx: 1,
                 color: "base.contrastText",
+                textWrap: "nowrap",
               }}
             >
               {page.label}
@@ -247,6 +248,7 @@ function Desktop() {
             sx={{
               my: 2,
               mx: 1,
+              textWrap: "nowrap",
             }}
             onClick={() => analytics.nav.notificationsClicked()}
           >
@@ -267,6 +269,7 @@ function Desktop() {
             sx={{
               my: 2,
               mx: 1,
+              textWrap: "nowrap",
             }}
             // TODO(@paulcretu): Add analytics event
             // onClick={() => analytics.nav.joinClicked()}

From 7bd5ba6143cfc6630724fe5096ab45f195bf5b75 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 04:51:30 +0000
Subject: [PATCH 06/22] Regenerate types

---
 ui/src/graphql/generated/index.ts | 85 +++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/ui/src/graphql/generated/index.ts b/ui/src/graphql/generated/index.ts
index 57a97f7e..06c4cdec 100644
--- a/ui/src/graphql/generated/index.ts
+++ b/ui/src/graphql/generated/index.ts
@@ -297,6 +297,37 @@ export type Bout = {
   startTime?: Maybe<Scalars["DateTime"]["output"]>;
 };
 
+/** Join table between Bout and FeedStream */
+export type BoutFeedStream = {
+  __typename?: "BoutFeedStream";
+  id: Scalars["ID"]["output"];
+};
+
+export type BoutFeedStreamFilterId = {
+  eq?: InputMaybe<Scalars["ID"]["input"]>;
+  greaterThan?: InputMaybe<Scalars["ID"]["input"]>;
+  greaterThanOrEqual?: InputMaybe<Scalars["ID"]["input"]>;
+  in?: InputMaybe<Array<Scalars["ID"]["input"]>>;
+  isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThan?: InputMaybe<Scalars["ID"]["input"]>;
+  lessThanOrEqual?: InputMaybe<Scalars["ID"]["input"]>;
+  notEq?: InputMaybe<Scalars["ID"]["input"]>;
+};
+
+export type BoutFeedStreamFilterInput = {
+  and?: InputMaybe<Array<BoutFeedStreamFilterInput>>;
+  id?: InputMaybe<BoutFeedStreamFilterId>;
+  not?: InputMaybe<Array<BoutFeedStreamFilterInput>>;
+  or?: InputMaybe<Array<BoutFeedStreamFilterInput>>;
+};
+
+export type BoutFeedStreamSortField = "ID";
+
+export type BoutFeedStreamSortInput = {
+  field: BoutFeedStreamSortField;
+  order?: InputMaybe<SortOrder>;
+};
+
 export type BoutFilterCategory = {
   eq?: InputMaybe<AudioCategory>;
   greaterThan?: InputMaybe<AudioCategory>;
@@ -1184,21 +1215,51 @@ export type FeedSortInput = {
 
 export type FeedStream = {
   __typename?: "FeedStream";
+  boutFeedStreams: Array<BoutFeedStream>;
+  bouts: Array<Bout>;
   bucket?: Maybe<Scalars["String"]["output"]>;
   bucketRegion?: Maybe<Scalars["String"]["output"]>;
   cloudfrontUrl?: Maybe<Scalars["String"]["output"]>;
   duration?: Maybe<Scalars["Decimal"]["output"]>;
   endTime?: Maybe<Scalars["DateTime"]["output"]>;
+  feed?: Maybe<Feed>;
+  feedId?: Maybe<Scalars["String"]["output"]>;
+  feedSegments: Array<FeedSegment>;
   id: Scalars["ID"]["output"];
+  nextFeedStream?: Maybe<FeedStream>;
+  nextFeedStreamId?: Maybe<Scalars["String"]["output"]>;
   /** S3 object path for playlist file (e.g. /rpi_orcasound_lab/hls/1541027406/live.m3u8) */
   playlistM3u8Path?: Maybe<Scalars["String"]["output"]>;
   /** S3 object path for playlist dir (e.g. /rpi_orcasound_lab/hls/1541027406/) */
   playlistPath?: Maybe<Scalars["String"]["output"]>;
   /** UTC Unix epoch for playlist start (e.g. 1541027406) */
   playlistTimestamp?: Maybe<Scalars["String"]["output"]>;
+  prevFeedStream?: Maybe<FeedStream>;
+  prevFeedStreamId?: Maybe<Scalars["String"]["output"]>;
   startTime?: Maybe<Scalars["DateTime"]["output"]>;
 };
 
+export type FeedStreamBoutFeedStreamsArgs = {
+  filter?: InputMaybe<BoutFeedStreamFilterInput>;
+  limit?: InputMaybe<Scalars["Int"]["input"]>;
+  offset?: InputMaybe<Scalars["Int"]["input"]>;
+  sort?: InputMaybe<Array<InputMaybe<BoutFeedStreamSortInput>>>;
+};
+
+export type FeedStreamBoutsArgs = {
+  filter?: InputMaybe<BoutFilterInput>;
+  limit?: InputMaybe<Scalars["Int"]["input"]>;
+  offset?: InputMaybe<Scalars["Int"]["input"]>;
+  sort?: InputMaybe<Array<InputMaybe<BoutSortInput>>>;
+};
+
+export type FeedStreamFeedSegmentsArgs = {
+  filter?: InputMaybe<FeedSegmentFilterInput>;
+  limit?: InputMaybe<Scalars["Int"]["input"]>;
+  offset?: InputMaybe<Scalars["Int"]["input"]>;
+  sort?: InputMaybe<Array<InputMaybe<FeedSegmentSortInput>>>;
+};
+
 export type FeedStreamFilterBucket = {
   eq?: InputMaybe<Scalars["String"]["input"]>;
   greaterThan?: InputMaybe<Scalars["String"]["input"]>;
@@ -1260,18 +1321,29 @@ export type FeedStreamFilterEndTime = {
   notEq?: InputMaybe<Scalars["DateTime"]["input"]>;
 };
 
+export type FeedStreamFilterFeedId = {
+  isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
+};
+
 export type FeedStreamFilterId = {
   isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
 };
 
 export type FeedStreamFilterInput = {
   and?: InputMaybe<Array<FeedStreamFilterInput>>;
+  boutFeedStreams?: InputMaybe<BoutFeedStreamFilterInput>;
+  bouts?: InputMaybe<BoutFilterInput>;
   bucket?: InputMaybe<FeedStreamFilterBucket>;
   bucketRegion?: InputMaybe<FeedStreamFilterBucketRegion>;
   cloudfrontUrl?: InputMaybe<FeedStreamFilterCloudfrontUrl>;
   duration?: InputMaybe<FeedStreamFilterDuration>;
   endTime?: InputMaybe<FeedStreamFilterEndTime>;
+  feed?: InputMaybe<FeedFilterInput>;
+  feedId?: InputMaybe<FeedStreamFilterFeedId>;
+  feedSegments?: InputMaybe<FeedSegmentFilterInput>;
   id?: InputMaybe<FeedStreamFilterId>;
+  nextFeedStream?: InputMaybe<FeedStreamFilterInput>;
+  nextFeedStreamId?: InputMaybe<FeedStreamFilterNextFeedStreamId>;
   not?: InputMaybe<Array<FeedStreamFilterInput>>;
   or?: InputMaybe<Array<FeedStreamFilterInput>>;
   /** S3 object path for playlist file (e.g. /rpi_orcasound_lab/hls/1541027406/live.m3u8) */
@@ -1280,9 +1352,15 @@ export type FeedStreamFilterInput = {
   playlistPath?: InputMaybe<FeedStreamFilterPlaylistPath>;
   /** UTC Unix epoch for playlist start (e.g. 1541027406) */
   playlistTimestamp?: InputMaybe<FeedStreamFilterPlaylistTimestamp>;
+  prevFeedStream?: InputMaybe<FeedStreamFilterInput>;
+  prevFeedStreamId?: InputMaybe<FeedStreamFilterPrevFeedStreamId>;
   startTime?: InputMaybe<FeedStreamFilterStartTime>;
 };
 
+export type FeedStreamFilterNextFeedStreamId = {
+  isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
+};
+
 export type FeedStreamFilterPlaylistM3u8Path = {
   eq?: InputMaybe<Scalars["String"]["input"]>;
   greaterThan?: InputMaybe<Scalars["String"]["input"]>;
@@ -1322,6 +1400,10 @@ export type FeedStreamFilterPlaylistTimestamp = {
   notEq?: InputMaybe<Scalars["String"]["input"]>;
 };
 
+export type FeedStreamFilterPrevFeedStreamId = {
+  isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
+};
+
 export type FeedStreamFilterStartTime = {
   eq?: InputMaybe<Scalars["DateTime"]["input"]>;
   greaterThan?: InputMaybe<Scalars["DateTime"]["input"]>;
@@ -1339,10 +1421,13 @@ export type FeedStreamSortField =
   | "CLOUDFRONT_URL"
   | "DURATION"
   | "END_TIME"
+  | "FEED_ID"
   | "ID"
+  | "NEXT_FEED_STREAM_ID"
   | "PLAYLIST_M3U8_PATH"
   | "PLAYLIST_PATH"
   | "PLAYLIST_TIMESTAMP"
+  | "PREV_FEED_STREAM_ID"
   | "START_TIME";
 
 export type FeedStreamSortInput = {

From 838c69360040089030e377419b1be9ec73ed35c2 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 04:52:26 +0000
Subject: [PATCH 07/22] Make username optional in gql request

---
 ui/src/graphql/generated/index.ts                     | 4 ++--
 ui/src/graphql/mutations/registerWithPassword.graphql | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/graphql/generated/index.ts b/ui/src/graphql/generated/index.ts
index 06c4cdec..bb56b4c7 100644
--- a/ui/src/graphql/generated/index.ts
+++ b/ui/src/graphql/generated/index.ts
@@ -2127,7 +2127,7 @@ export type RegisterWithPasswordMutationVariables = Exact<{
   firstName?: InputMaybe<Scalars["String"]["input"]>;
   lastName?: InputMaybe<Scalars["String"]["input"]>;
   email: Scalars["String"]["input"];
-  username: Scalars["String"]["input"];
+  username?: InputMaybe<Scalars["String"]["input"]>;
   password: Scalars["String"]["input"];
   passwordConfirmation: Scalars["String"]["input"];
 }>;
@@ -2655,7 +2655,7 @@ useNotifyConfirmedCandidateMutation.fetcher = (
   >(NotifyConfirmedCandidateDocument, variables, options);
 
 export const RegisterWithPasswordDocument = `
-    mutation registerWithPassword($firstName: String, $lastName: String, $email: String!, $username: String!, $password: String!, $passwordConfirmation: String!) {
+    mutation registerWithPassword($firstName: String, $lastName: String, $email: String!, $username: String, $password: String!, $passwordConfirmation: String!) {
   registerWithPassword(
     input: {email: $email, username: $username, password: $password, passwordConfirmation: $passwordConfirmation, firstName: $firstName, lastName: $lastName}
   ) {
diff --git a/ui/src/graphql/mutations/registerWithPassword.graphql b/ui/src/graphql/mutations/registerWithPassword.graphql
index 90433668..08171f3f 100644
--- a/ui/src/graphql/mutations/registerWithPassword.graphql
+++ b/ui/src/graphql/mutations/registerWithPassword.graphql
@@ -2,7 +2,7 @@ mutation registerWithPassword(
   $firstName: String
   $lastName: String
   $email: String!
-  $username: String!
+  $username: String
   $password: String!
   $passwordConfirmation: String!
 ) {

From 476edfe40cde22a97d8ac667a7a17346fa57fa64 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 04:52:48 +0000
Subject: [PATCH 08/22] Add initial join page

---
 ui/src/pages/join.tsx | 120 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 ui/src/pages/join.tsx

diff --git a/ui/src/pages/join.tsx b/ui/src/pages/join.tsx
new file mode 100644
index 00000000..8eb88f4b
--- /dev/null
+++ b/ui/src/pages/join.tsx
@@ -0,0 +1,120 @@
+import { Box, Button, Container, TextField, Typography } from "@mui/material";
+import Head from "next/head";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { getMapLayout } from "../components/layouts/MapLayout";
+import {
+  MutationError,
+  useRegisterWithPasswordMutation,
+} from "../graphql/generated";
+import type { NextPageWithLayout } from "./_app";
+
+const JoinPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const [step] = useState(1);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errors, setErrors] = useState<MutationError[]>([]);
+
+  const submitRegister = useRegisterWithPasswordMutation({
+    onMutate: () => {
+      setErrors([]);
+    },
+    onSuccess: ({ registerWithPassword }) => {
+      if (registerWithPassword) {
+        const { result: user, errors } = registerWithPassword;
+
+        if (errors) {
+          setErrors(
+            errors.filter((error): error is MutationError => error !== null),
+          );
+        }
+
+        if (user) {
+          // Will add more steps later
+          router.push("/");
+        }
+      }
+    },
+    onError: (error) => {
+      console.log("Register error", error);
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    submitRegister.mutate({
+      email,
+      password,
+      passwordConfirmation: password, // Required by API
+    });
+  };
+
+  return (
+    <div>
+      <Head>
+        <title>Join Orcasound</title>
+      </Head>
+
+      <main>
+        <Container maxWidth="sm">
+          <Box sx={{ mt: 4, mb: 6 }}>
+            <Typography variant="h4" gutterBottom>
+              Join Orcasound
+            </Typography>
+            <Typography variant="body1" color="text.secondary">
+              Step {step} of 3: Create your account
+            </Typography>
+          </Box>
+
+          <form onSubmit={handleSubmit}>
+            <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+              <TextField
+                label="Email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                fullWidth
+                error={errors.some((e) => e.fields?.includes("email"))}
+                helperText={
+                  errors.find((e) => e.fields?.includes("email"))?.message || ""
+                }
+              />
+
+              <TextField
+                label="Password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                fullWidth
+                error={errors.some((e) => e.fields?.includes("password"))}
+                helperText={
+                  errors.find((e) => e.fields?.includes("password"))?.message ||
+                  ""
+                }
+              />
+
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                size="large"
+                fullWidth
+                sx={{ mt: 2 }}
+              >
+                Continue
+              </Button>
+            </Box>
+          </form>
+        </Container>
+      </main>
+    </div>
+  );
+};
+
+JoinPage.getLayout = getMapLayout;
+
+export default JoinPage;

From fa81041e7272c000ba242015651d2086937c57ea Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 05:21:46 +0000
Subject: [PATCH 09/22] Add react-hook-form and zod

---
 ui/package-lock.json  | 39 ++++++++++++++++++++++++++-
 ui/package.json       |  5 +++-
 ui/src/pages/join.tsx | 61 +++++++++++++++++++++++++++++++------------
 3 files changed, 86 insertions(+), 19 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index cff8f577..dbbfb30a 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -14,6 +14,7 @@
         "@emotion/styled": "^11.13.0",
         "@fontsource/montserrat": "^5.1.0",
         "@fontsource/mukta": "^5.1.0",
+        "@hookform/resolvers": "^3.9.1",
         "@mui/icons-material": "^6.1.4",
         "@mui/material": "^6.1.0",
         "@mui/material-nextjs": "^6.1.4",
@@ -29,12 +30,14 @@
         "react-dom": "18.3.1",
         "react-fast-marquee": "^1.6.5",
         "react-ga4": "^2.1.0",
+        "react-hook-form": "^7.54.0",
         "react-leaflet": "^4.2.1",
         "react-vega": "^7.6.0",
         "sharp": "^0.33.5",
         "vega-lite": "^5.21.0",
         "video.js": "^8.18.1",
-        "videojs-offset": "^2.1.3"
+        "videojs-offset": "^2.1.3",
+        "zod": "^3.24.1"
       },
       "devDependencies": {
         "@graphql-codegen/add": "^5.0.3",
@@ -2269,6 +2272,15 @@
         "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.1.tgz",
+      "integrity": "sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -9459,6 +9471,22 @@
       "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
       "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
     },
+    "node_modules/react-hook-form": {
+      "version": "7.54.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.0.tgz",
+      "integrity": "sha512-PS05+UQy/IdSbJNojBypxAo9wllhHgGmyr8/dyGQcPoiMf3e7Dfb9PWYVRco55bLbxH9S+1yDDJeTdlYCSxO3A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -11812,6 +11840,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/ui/package.json b/ui/package.json
index b4e8d92e..6b06a71c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -22,6 +22,7 @@
     "@emotion/styled": "^11.13.0",
     "@fontsource/montserrat": "^5.1.0",
     "@fontsource/mukta": "^5.1.0",
+    "@hookform/resolvers": "^3.9.1",
     "@mui/icons-material": "^6.1.4",
     "@mui/material": "^6.1.0",
     "@mui/material-nextjs": "^6.1.4",
@@ -37,12 +38,14 @@
     "react-dom": "18.3.1",
     "react-fast-marquee": "^1.6.5",
     "react-ga4": "^2.1.0",
+    "react-hook-form": "^7.54.0",
     "react-leaflet": "^4.2.1",
     "react-vega": "^7.6.0",
     "sharp": "^0.33.5",
     "vega-lite": "^5.21.0",
     "video.js": "^8.18.1",
-    "videojs-offset": "^2.1.3"
+    "videojs-offset": "^2.1.3",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@graphql-codegen/add": "^5.0.3",
diff --git a/ui/src/pages/join.tsx b/ui/src/pages/join.tsx
index 8eb88f4b..9b1f062e 100644
--- a/ui/src/pages/join.tsx
+++ b/ui/src/pages/join.tsx
@@ -1,7 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Box, Button, Container, TextField, Typography } from "@mui/material";
 import Head from "next/head";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 import { getMapLayout } from "../components/layouts/MapLayout";
 import {
@@ -10,13 +13,33 @@ import {
 } from "../graphql/generated";
 import type { NextPageWithLayout } from "./_app";
 
+const joinSchema = z.object({
+  email: z.string().min(1, "Email is required").email("Invalid email address"),
+  password: z
+    .string()
+    .min(1, "Password is required")
+    .min(8, "Password must be at least 8 characters")
+    .regex(
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+      "Password must contain at least one uppercase letter, one lowercase letter, and one number",
+    ),
+});
+
+type JoinFormInputs = z.infer<typeof joinSchema>;
+
 const JoinPage: NextPageWithLayout = () => {
   const router = useRouter();
   const [step] = useState(1);
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
   const [errors, setErrors] = useState<MutationError[]>([]);
 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors: formErrors },
+  } = useForm<JoinFormInputs>({
+    resolver: zodResolver(joinSchema),
+  });
+
   const submitRegister = useRegisterWithPasswordMutation({
     onMutate: () => {
       setErrors([]);
@@ -42,12 +65,11 @@ const JoinPage: NextPageWithLayout = () => {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+  const onSubmit = (data: JoinFormInputs) => {
     submitRegister.mutate({
-      email,
-      password,
-      passwordConfirmation: password, // Required by API
+      email: data.email,
+      password: data.password,
+      passwordConfirmation: data.password,
     });
   };
 
@@ -68,30 +90,35 @@ const JoinPage: NextPageWithLayout = () => {
             </Typography>
           </Box>
 
-          <form onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit(onSubmit)} noValidate>
             <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
               <TextField
+                {...register("email")}
                 label="Email"
                 type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
                 fullWidth
-                error={errors.some((e) => e.fields?.includes("email"))}
+                error={
+                  !!formErrors.email ||
+                  errors.some((e) => e.fields?.includes("email"))
+                }
                 helperText={
-                  errors.find((e) => e.fields?.includes("email"))?.message || ""
+                  formErrors.email?.message ||
+                  errors.find((e) => e.fields?.includes("email"))?.message ||
+                  ""
                 }
               />
 
               <TextField
+                {...register("password")}
                 label="Password"
                 type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
                 fullWidth
-                error={errors.some((e) => e.fields?.includes("password"))}
+                error={
+                  !!formErrors.password ||
+                  errors.some((e) => e.fields?.includes("password"))
+                }
                 helperText={
+                  formErrors.password?.message ||
                   errors.find((e) => e.fields?.includes("password"))?.message ||
                   ""
                 }

From fb58e19ccaca994ad843cbc3ab4f6e3b49106551 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 16:13:13 +0000
Subject: [PATCH 10/22] Add multi-step join flow

---
 ui/src/pages/join.tsx                         | 147 ------------------
 ui/src/pages/join/components/AccountStep.tsx  | 110 +++++++++++++
 ui/src/pages/join/components/FormActions.tsx  |  24 +++
 .../pages/join/components/PreferencesStep.tsx |  68 ++++++++
 ui/src/pages/join/components/ProfileStep.tsx  |  74 +++++++++
 ui/src/pages/join/components/StepLayout.tsx   |  36 +++++
 ui/src/pages/join/components/SuccessStep.tsx  |  19 +++
 ui/src/pages/join/hooks/useSteps.ts           |  30 ++++
 ui/src/pages/join/index.tsx                   |  74 +++++++++
 ui/src/pages/join/utils.tsx                   |  36 +++++
 10 files changed, 471 insertions(+), 147 deletions(-)
 delete mode 100644 ui/src/pages/join.tsx
 create mode 100644 ui/src/pages/join/components/AccountStep.tsx
 create mode 100644 ui/src/pages/join/components/FormActions.tsx
 create mode 100644 ui/src/pages/join/components/PreferencesStep.tsx
 create mode 100644 ui/src/pages/join/components/ProfileStep.tsx
 create mode 100644 ui/src/pages/join/components/StepLayout.tsx
 create mode 100644 ui/src/pages/join/components/SuccessStep.tsx
 create mode 100644 ui/src/pages/join/hooks/useSteps.ts
 create mode 100644 ui/src/pages/join/index.tsx
 create mode 100644 ui/src/pages/join/utils.tsx

diff --git a/ui/src/pages/join.tsx b/ui/src/pages/join.tsx
deleted file mode 100644
index 9b1f062e..00000000
--- a/ui/src/pages/join.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Box, Button, Container, TextField, Typography } from "@mui/material";
-import Head from "next/head";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { getMapLayout } from "../components/layouts/MapLayout";
-import {
-  MutationError,
-  useRegisterWithPasswordMutation,
-} from "../graphql/generated";
-import type { NextPageWithLayout } from "./_app";
-
-const joinSchema = z.object({
-  email: z.string().min(1, "Email is required").email("Invalid email address"),
-  password: z
-    .string()
-    .min(1, "Password is required")
-    .min(8, "Password must be at least 8 characters")
-    .regex(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
-      "Password must contain at least one uppercase letter, one lowercase letter, and one number",
-    ),
-});
-
-type JoinFormInputs = z.infer<typeof joinSchema>;
-
-const JoinPage: NextPageWithLayout = () => {
-  const router = useRouter();
-  const [step] = useState(1);
-  const [errors, setErrors] = useState<MutationError[]>([]);
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors: formErrors },
-  } = useForm<JoinFormInputs>({
-    resolver: zodResolver(joinSchema),
-  });
-
-  const submitRegister = useRegisterWithPasswordMutation({
-    onMutate: () => {
-      setErrors([]);
-    },
-    onSuccess: ({ registerWithPassword }) => {
-      if (registerWithPassword) {
-        const { result: user, errors } = registerWithPassword;
-
-        if (errors) {
-          setErrors(
-            errors.filter((error): error is MutationError => error !== null),
-          );
-        }
-
-        if (user) {
-          // Will add more steps later
-          router.push("/");
-        }
-      }
-    },
-    onError: (error) => {
-      console.log("Register error", error);
-    },
-  });
-
-  const onSubmit = (data: JoinFormInputs) => {
-    submitRegister.mutate({
-      email: data.email,
-      password: data.password,
-      passwordConfirmation: data.password,
-    });
-  };
-
-  return (
-    <div>
-      <Head>
-        <title>Join Orcasound</title>
-      </Head>
-
-      <main>
-        <Container maxWidth="sm">
-          <Box sx={{ mt: 4, mb: 6 }}>
-            <Typography variant="h4" gutterBottom>
-              Join Orcasound
-            </Typography>
-            <Typography variant="body1" color="text.secondary">
-              Step {step} of 3: Create your account
-            </Typography>
-          </Box>
-
-          <form onSubmit={handleSubmit(onSubmit)} noValidate>
-            <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
-              <TextField
-                {...register("email")}
-                label="Email"
-                type="email"
-                fullWidth
-                error={
-                  !!formErrors.email ||
-                  errors.some((e) => e.fields?.includes("email"))
-                }
-                helperText={
-                  formErrors.email?.message ||
-                  errors.find((e) => e.fields?.includes("email"))?.message ||
-                  ""
-                }
-              />
-
-              <TextField
-                {...register("password")}
-                label="Password"
-                type="password"
-                fullWidth
-                error={
-                  !!formErrors.password ||
-                  errors.some((e) => e.fields?.includes("password"))
-                }
-                helperText={
-                  formErrors.password?.message ||
-                  errors.find((e) => e.fields?.includes("password"))?.message ||
-                  ""
-                }
-              />
-
-              <Button
-                type="submit"
-                variant="contained"
-                color="primary"
-                size="large"
-                fullWidth
-                sx={{ mt: 2 }}
-              >
-                Continue
-              </Button>
-            </Box>
-          </form>
-        </Container>
-      </main>
-    </div>
-  );
-};
-
-JoinPage.getLayout = getMapLayout;
-
-export default JoinPage;
diff --git a/ui/src/pages/join/components/AccountStep.tsx b/ui/src/pages/join/components/AccountStep.tsx
new file mode 100644
index 00000000..cbb6be93
--- /dev/null
+++ b/ui/src/pages/join/components/AccountStep.tsx
@@ -0,0 +1,110 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box, TextField } from "@mui/material";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  MutationError,
+  useRegisterWithPasswordMutation,
+} from "@/graphql/generated";
+
+import {
+  createFormSubmitHandler,
+  getFieldErrorProps,
+  StepFormProps,
+} from "../utils";
+import { FormActions } from "./FormActions";
+
+const accountSchema = z.object({
+  email: z.string().min(1, "Email is required").email("Invalid email address"),
+  password: z
+    .string()
+    .min(1, "Password is required")
+    .min(8, "Password must be at least 8 characters")
+    .regex(
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+      "Password must contain at least one uppercase letter, one lowercase letter, and one number",
+    ),
+});
+
+type AccountFormInputs = z.infer<typeof accountSchema>;
+
+const useAccountForm = (onSuccess: () => void) => {
+  const [errors, setErrors] = useState<MutationError[]>([]);
+  const form = useForm<AccountFormInputs>({
+    resolver: zodResolver(accountSchema),
+  });
+
+  const submitRegister = useRegisterWithPasswordMutation({
+    onMutate: () => {
+      setErrors([]);
+    },
+    onSuccess: ({ registerWithPassword }) => {
+      if (registerWithPassword) {
+        const { result: user, errors } = registerWithPassword;
+
+        if (errors) {
+          setErrors(
+            errors.filter((error): error is MutationError => error !== null),
+          );
+        }
+
+        if (user) {
+          onSuccess();
+        }
+      }
+    },
+    onError: (error) => {
+      console.log("Register error", error);
+    },
+  });
+
+  const onSubmit = (data: AccountFormInputs) => {
+    submitRegister.mutate({
+      email: data.email,
+      password: data.password,
+      passwordConfirmation: data.password,
+    });
+  };
+
+  return { form, errors, onSubmit };
+};
+
+type AccountStepProps = Omit<StepFormProps, "onSkip">;
+
+export const AccountStep = ({ onSuccess }: AccountStepProps) => {
+  const { form, errors, onSubmit } = useAccountForm(onSuccess);
+  const {
+    register,
+    formState: { errors: formErrors },
+  } = form;
+
+  return (
+    <form
+      onSubmit={createFormSubmitHandler(form, onSubmit)}
+      noValidate
+      name="account"
+    >
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+        <TextField
+          {...register("email")}
+          label="Email"
+          type="email"
+          fullWidth
+          {...getFieldErrorProps("email", formErrors.email, errors)}
+        />
+
+        <TextField
+          {...register("password")}
+          label="Password"
+          type="password"
+          fullWidth
+          {...getFieldErrorProps("password", formErrors.password, errors)}
+        />
+
+        <FormActions submitText="Create account" />
+      </Box>
+    </form>
+  );
+};
diff --git a/ui/src/pages/join/components/FormActions.tsx b/ui/src/pages/join/components/FormActions.tsx
new file mode 100644
index 00000000..380b5930
--- /dev/null
+++ b/ui/src/pages/join/components/FormActions.tsx
@@ -0,0 +1,24 @@
+import { Box, Button } from "@mui/material";
+
+type FormActionsProps = {
+  onSkip?: () => void;
+  submitText?: string;
+  skipText?: string;
+};
+
+export const FormActions = ({
+  onSkip,
+  submitText = "Continue",
+  skipText = "Skip for now",
+}: FormActionsProps) => (
+  <Box sx={{ display: "flex", gap: 2, mt: 2 }}>
+    {onSkip && (
+      <Button variant="outlined" onClick={onSkip} fullWidth>
+        {skipText}
+      </Button>
+    )}
+    <Button type="submit" variant="contained" color="primary" fullWidth>
+      {submitText}
+    </Button>
+  </Box>
+);
diff --git a/ui/src/pages/join/components/PreferencesStep.tsx b/ui/src/pages/join/components/PreferencesStep.tsx
new file mode 100644
index 00000000..f0ff2878
--- /dev/null
+++ b/ui/src/pages/join/components/PreferencesStep.tsx
@@ -0,0 +1,68 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box, FormControlLabel, Switch } from "@mui/material";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { createFormSubmitHandler, StepFormProps } from "../utils";
+import { FormActions } from "./FormActions";
+
+const preferencesSchema = z.object({
+  liveNotifications: z.boolean().default(false),
+  volunteering: z.boolean().default(false),
+  userTesting: z.boolean().default(false),
+  newsletter: z.boolean().default(false),
+});
+
+type PreferencesFormInputs = z.infer<typeof preferencesSchema>;
+
+const usePreferencesForm = (onSuccess: () => void) => {
+  const form = useForm<PreferencesFormInputs>({
+    resolver: zodResolver(preferencesSchema),
+    defaultValues: {
+      liveNotifications: false,
+      volunteering: false,
+      userTesting: false,
+      newsletter: false,
+    },
+  });
+
+  const onSubmit = (data: PreferencesFormInputs) => {
+    // TODO: Implement preferences update mutation
+    onSuccess();
+  };
+
+  return { form, onSubmit };
+};
+
+export const PreferencesStep = ({ onSuccess, onSkip }: StepFormProps) => {
+  const { form, onSubmit } = usePreferencesForm(onSuccess);
+  const { register } = form;
+
+  return (
+    <form onSubmit={createFormSubmitHandler(form, onSubmit)} name="preferences">
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+        <FormControlLabel
+          control={<Switch {...register("liveNotifications")} />}
+          label="Notify me when orcas are detected live"
+        />
+
+        <FormControlLabel
+          control={<Switch {...register("volunteering")} />}
+          label="I'm interested in volunteering with Orcasound"
+        />
+
+        <FormControlLabel
+          control={<Switch {...register("userTesting")} />}
+          label="I'd like to participate in website user testing"
+        />
+
+        <FormControlLabel
+          control={<Switch {...register("newsletter")} />}
+          label="Subscribe to the Orcasound newsletter"
+        />
+
+        <FormActions onSkip={onSkip} submitText="Complete setup" />
+      </Box>
+    </form>
+  );
+};
diff --git a/ui/src/pages/join/components/ProfileStep.tsx b/ui/src/pages/join/components/ProfileStep.tsx
new file mode 100644
index 00000000..a1784ab6
--- /dev/null
+++ b/ui/src/pages/join/components/ProfileStep.tsx
@@ -0,0 +1,74 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box, Checkbox, FormControlLabel, TextField } from "@mui/material";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { createFormSubmitHandler, StepFormProps } from "../utils";
+import { FormActions } from "./FormActions";
+
+const profileSchema = z.object({
+  username: z.string().optional(),
+  firstName: z.string().optional(),
+  lastName: z.string().optional(),
+  isMarineScientist: z.boolean().default(false),
+  organization: z.string().optional(),
+});
+
+type ProfileFormInputs = z.infer<typeof profileSchema>;
+
+const useProfileForm = (onSuccess: () => void) => {
+  const form = useForm<ProfileFormInputs>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      isMarineScientist: false,
+    },
+  });
+
+  const onSubmit = (data: ProfileFormInputs) => {
+    // TODO: Implement profile update mutation
+    onSuccess();
+  };
+
+  return { form, onSubmit };
+};
+
+export const ProfileStep = ({ onSuccess, onSkip }: StepFormProps) => {
+  const { form, onSubmit } = useProfileForm(onSuccess);
+  const { register, watch } = form;
+  const isMarineScientist = watch("isMarineScientist");
+
+  return (
+    <form onSubmit={createFormSubmitHandler(form, onSubmit)} name="profile">
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+        <TextField
+          {...register("username")}
+          label="Username"
+          fullWidth
+          helperText="Choose a unique username for the community"
+        />
+
+        <TextField {...register("firstName")} label="First name" fullWidth />
+
+        <TextField {...register("lastName")} label="Last name" fullWidth />
+
+        <FormControlLabel
+          control={
+            <Checkbox {...register("isMarineScientist")} color="primary" />
+          }
+          label="I am a professional marine scientist"
+        />
+
+        {isMarineScientist && (
+          <TextField
+            {...register("organization")}
+            label="Organization"
+            fullWidth
+            helperText="Your professional affiliation"
+          />
+        )}
+
+        <FormActions onSkip={onSkip} />
+      </Box>
+    </form>
+  );
+};
diff --git a/ui/src/pages/join/components/StepLayout.tsx b/ui/src/pages/join/components/StepLayout.tsx
new file mode 100644
index 00000000..4a385500
--- /dev/null
+++ b/ui/src/pages/join/components/StepLayout.tsx
@@ -0,0 +1,36 @@
+import { Box, Container, Typography } from "@mui/material";
+import Head from "next/head";
+
+export const StepLayout = ({
+  title,
+  description,
+  pageTitle,
+  children,
+}: {
+  title: string;
+  description?: string;
+  pageTitle: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <>
+      <Head>
+        <title>{pageTitle} | Orcasound</title>
+      </Head>
+
+      <Container maxWidth="sm">
+        <Box sx={{ mt: 4, mb: 6 }}>
+          <Typography variant="h4" gutterBottom>
+            {title}
+          </Typography>
+          {description && (
+            <Typography variant="body1" color="text.secondary">
+              {description}
+            </Typography>
+          )}
+        </Box>
+        {children}
+      </Container>
+    </>
+  );
+};
diff --git a/ui/src/pages/join/components/SuccessStep.tsx b/ui/src/pages/join/components/SuccessStep.tsx
new file mode 100644
index 00000000..a3901b33
--- /dev/null
+++ b/ui/src/pages/join/components/SuccessStep.tsx
@@ -0,0 +1,19 @@
+import { Box, Button } from "@mui/material";
+import { useRouter } from "next/navigation";
+
+export const SuccessStep = () => {
+  const router = useRouter();
+
+  return (
+    <Box sx={{ textAlign: "center" }}>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => router.push("/")}
+        size="large"
+      >
+        Start listening
+      </Button>
+    </Box>
+  );
+};
diff --git a/ui/src/pages/join/hooks/useSteps.ts b/ui/src/pages/join/hooks/useSteps.ts
new file mode 100644
index 00000000..0d3cd35f
--- /dev/null
+++ b/ui/src/pages/join/hooks/useSteps.ts
@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+export const steps = {
+  account: 1,
+  profile: 2,
+  preferences: 3,
+  success: 4,
+} as const;
+
+export type Step = (typeof steps)[keyof typeof steps];
+
+export const useSteps = () => {
+  const [currentStep, setCurrentStep] = useState<Step>(steps.account);
+
+  const goToNextStep = () => {
+    setCurrentStep((prev) =>
+      prev < steps.success ? ((prev + 1) as Step) : prev,
+    );
+  };
+
+  const skipToNextStep = () => {
+    goToNextStep();
+  };
+
+  return {
+    currentStep,
+    goToNextStep,
+    skipToNextStep,
+  };
+};
diff --git a/ui/src/pages/join/index.tsx b/ui/src/pages/join/index.tsx
new file mode 100644
index 00000000..bf2d6b82
--- /dev/null
+++ b/ui/src/pages/join/index.tsx
@@ -0,0 +1,74 @@
+import { getMapLayout } from "@/components/layouts/MapLayout";
+import type { NextPageWithLayout } from "@/pages/_app";
+
+import { AccountStep } from "./components/AccountStep";
+import { PreferencesStep } from "./components/PreferencesStep";
+import { ProfileStep } from "./components/ProfileStep";
+import { StepLayout } from "./components/StepLayout";
+import { SuccessStep } from "./components/SuccessStep";
+import { steps, useSteps } from "./hooks/useSteps";
+
+type StepConfig = {
+  pageTitle: string;
+  title: string;
+  description: string;
+};
+
+const stepConfigs: Record<keyof typeof steps, StepConfig> = {
+  account: {
+    pageTitle: "Create an Account",
+    title: "Create an account",
+    description:
+      "Join the Orcasound community to help track and protect marine life",
+  },
+  profile: {
+    pageTitle: "Complete Your Profile",
+    title: "Tell us about yourself",
+    description: "Help us personalize your experience (optional)",
+  },
+  preferences: {
+    pageTitle: "Set Your Preferences",
+    title: "Choose how to engage",
+    description:
+      "Select your preferences for participating in the Orcasound community",
+  },
+  success: {
+    pageTitle: "Welcome to Orcasound",
+    title: "You are all set!",
+    description:
+      "Welcome to the Orcasound community. You can now start listening for whales and helping protect marine life",
+  },
+};
+
+const JoinPage: NextPageWithLayout = () => {
+  const { currentStep, goToNextStep, skipToNextStep } = useSteps();
+  const currentConfig =
+    stepConfigs[Object.keys(steps)[currentStep - 1] as keyof typeof steps];
+
+  return (
+    <div>
+      <main>
+        <StepLayout
+          pageTitle={currentConfig.pageTitle}
+          title={currentConfig.title}
+          description={currentConfig.description}
+        >
+          {currentStep === steps.account && (
+            <AccountStep onSuccess={goToNextStep} />
+          )}
+          {currentStep === steps.profile && (
+            <ProfileStep onSuccess={goToNextStep} onSkip={skipToNextStep} />
+          )}
+          {currentStep === steps.preferences && (
+            <PreferencesStep onSuccess={goToNextStep} onSkip={skipToNextStep} />
+          )}
+          {currentStep === steps.success && <SuccessStep />}
+        </StepLayout>
+      </main>
+    </div>
+  );
+};
+
+JoinPage.getLayout = getMapLayout;
+
+export default JoinPage;
diff --git a/ui/src/pages/join/utils.tsx b/ui/src/pages/join/utils.tsx
new file mode 100644
index 00000000..08c99d2d
--- /dev/null
+++ b/ui/src/pages/join/utils.tsx
@@ -0,0 +1,36 @@
+import { FieldError, UseFormReturn } from "react-hook-form";
+
+import { MutationError } from "@/graphql/generated";
+
+export type StepFormProps = {
+  onSuccess: () => void;
+  onSkip?: () => void;
+};
+
+export const createFormSubmitHandler = <T extends object>(
+  form: UseFormReturn<T>,
+  onSubmit: (data: T) => void,
+) => {
+  return form.handleSubmit((data) => {
+    console.log("Form data:", data);
+    onSubmit(data);
+  });
+};
+
+export const getFieldErrorProps = (
+  field: string,
+  formError?: FieldError,
+  mutationErrors?: MutationError[],
+) => {
+  const hasError =
+    !!formError || mutationErrors?.some((e) => e.fields?.includes(field));
+  const errorMessage =
+    formError?.message ||
+    mutationErrors?.find((e) => e.fields?.includes(field))?.message ||
+    "";
+
+  return {
+    error: hasError,
+    helperText: errorMessage || "",
+  };
+};

From e029197156d497b56bd690a7a1bece0cbadab7b5 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 22:41:59 +0000
Subject: [PATCH 11/22] Refactor join module structure and consolidate imports

---
 .../join/components/AccountStep.tsx              |  0
 .../join/components/FormActions.tsx              |  0
 .../join/components/PreferencesStep.tsx          |  0
 .../join/components/ProfileStep.tsx              |  0
 .../join/components/StepLayout.tsx               |  0
 .../join/components/SuccessStep.tsx              |  0
 ui/src/{pages => modules}/join/hooks/useSteps.ts |  2 +-
 ui/src/modules/join/index.ts                     |  9 +++++++++
 ui/src/{pages => modules}/join/utils.tsx         |  0
 ui/src/pages/{join/index.tsx => join.tsx}        | 16 +++++++++-------
 10 files changed, 19 insertions(+), 8 deletions(-)
 rename ui/src/{pages => modules}/join/components/AccountStep.tsx (100%)
 rename ui/src/{pages => modules}/join/components/FormActions.tsx (100%)
 rename ui/src/{pages => modules}/join/components/PreferencesStep.tsx (100%)
 rename ui/src/{pages => modules}/join/components/ProfileStep.tsx (100%)
 rename ui/src/{pages => modules}/join/components/StepLayout.tsx (100%)
 rename ui/src/{pages => modules}/join/components/SuccessStep.tsx (100%)
 rename ui/src/{pages => modules}/join/hooks/useSteps.ts (90%)
 create mode 100644 ui/src/modules/join/index.ts
 rename ui/src/{pages => modules}/join/utils.tsx (100%)
 rename ui/src/pages/{join/index.tsx => join.tsx} (85%)

diff --git a/ui/src/pages/join/components/AccountStep.tsx b/ui/src/modules/join/components/AccountStep.tsx
similarity index 100%
rename from ui/src/pages/join/components/AccountStep.tsx
rename to ui/src/modules/join/components/AccountStep.tsx
diff --git a/ui/src/pages/join/components/FormActions.tsx b/ui/src/modules/join/components/FormActions.tsx
similarity index 100%
rename from ui/src/pages/join/components/FormActions.tsx
rename to ui/src/modules/join/components/FormActions.tsx
diff --git a/ui/src/pages/join/components/PreferencesStep.tsx b/ui/src/modules/join/components/PreferencesStep.tsx
similarity index 100%
rename from ui/src/pages/join/components/PreferencesStep.tsx
rename to ui/src/modules/join/components/PreferencesStep.tsx
diff --git a/ui/src/pages/join/components/ProfileStep.tsx b/ui/src/modules/join/components/ProfileStep.tsx
similarity index 100%
rename from ui/src/pages/join/components/ProfileStep.tsx
rename to ui/src/modules/join/components/ProfileStep.tsx
diff --git a/ui/src/pages/join/components/StepLayout.tsx b/ui/src/modules/join/components/StepLayout.tsx
similarity index 100%
rename from ui/src/pages/join/components/StepLayout.tsx
rename to ui/src/modules/join/components/StepLayout.tsx
diff --git a/ui/src/pages/join/components/SuccessStep.tsx b/ui/src/modules/join/components/SuccessStep.tsx
similarity index 100%
rename from ui/src/pages/join/components/SuccessStep.tsx
rename to ui/src/modules/join/components/SuccessStep.tsx
diff --git a/ui/src/pages/join/hooks/useSteps.ts b/ui/src/modules/join/hooks/useSteps.ts
similarity index 90%
rename from ui/src/pages/join/hooks/useSteps.ts
rename to ui/src/modules/join/hooks/useSteps.ts
index 0d3cd35f..f5442812 100644
--- a/ui/src/pages/join/hooks/useSteps.ts
+++ b/ui/src/modules/join/hooks/useSteps.ts
@@ -7,7 +7,7 @@ export const steps = {
   success: 4,
 } as const;
 
-export type Step = (typeof steps)[keyof typeof steps];
+type Step = (typeof steps)[keyof typeof steps];
 
 export const useSteps = () => {
   const [currentStep, setCurrentStep] = useState<Step>(steps.account);
diff --git a/ui/src/modules/join/index.ts b/ui/src/modules/join/index.ts
new file mode 100644
index 00000000..df360ac5
--- /dev/null
+++ b/ui/src/modules/join/index.ts
@@ -0,0 +1,9 @@
+// Components
+export { AccountStep } from "./components/AccountStep";
+export { PreferencesStep } from "./components/PreferencesStep";
+export { ProfileStep } from "./components/ProfileStep";
+export { StepLayout } from "./components/StepLayout";
+export { SuccessStep } from "./components/SuccessStep";
+
+// Hooks
+export { steps, useSteps } from "./hooks/useSteps";
diff --git a/ui/src/pages/join/utils.tsx b/ui/src/modules/join/utils.tsx
similarity index 100%
rename from ui/src/pages/join/utils.tsx
rename to ui/src/modules/join/utils.tsx
diff --git a/ui/src/pages/join/index.tsx b/ui/src/pages/join.tsx
similarity index 85%
rename from ui/src/pages/join/index.tsx
rename to ui/src/pages/join.tsx
index bf2d6b82..e9eda681 100644
--- a/ui/src/pages/join/index.tsx
+++ b/ui/src/pages/join.tsx
@@ -1,13 +1,15 @@
 import { getMapLayout } from "@/components/layouts/MapLayout";
+import {
+  AccountStep,
+  PreferencesStep,
+  ProfileStep,
+  StepLayout,
+  steps,
+  SuccessStep,
+  useSteps,
+} from "@/modules/join";
 import type { NextPageWithLayout } from "@/pages/_app";
 
-import { AccountStep } from "./components/AccountStep";
-import { PreferencesStep } from "./components/PreferencesStep";
-import { ProfileStep } from "./components/ProfileStep";
-import { StepLayout } from "./components/StepLayout";
-import { SuccessStep } from "./components/SuccessStep";
-import { steps, useSteps } from "./hooks/useSteps";
-
 type StepConfig = {
   pageTitle: string;
   title: string;

From 72aa0b23dee37c46fff9eb64bb0988df8e719564 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Thu, 12 Dec 2024 22:54:19 +0000
Subject: [PATCH 12/22] Removing password regex requirement

---
 ui/src/modules/join/components/AccountStep.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/ui/src/modules/join/components/AccountStep.tsx b/ui/src/modules/join/components/AccountStep.tsx
index cbb6be93..d9a91b1a 100644
--- a/ui/src/modules/join/components/AccountStep.tsx
+++ b/ui/src/modules/join/components/AccountStep.tsx
@@ -21,11 +21,7 @@ const accountSchema = z.object({
   password: z
     .string()
     .min(1, "Password is required")
-    .min(8, "Password must be at least 8 characters")
-    .regex(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
-      "Password must contain at least one uppercase letter, one lowercase letter, and one number",
-    ),
+    .min(8, "Password must be at least 8 characters"),
 });
 
 type AccountFormInputs = z.infer<typeof accountSchema>;

From 49fddc05d520395ad226a663fa3f2de25299290b Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Fri, 13 Dec 2024 08:35:28 +0000
Subject: [PATCH 13/22] Add user profile and preferences to backend

---
 server/lib/orcasite/accounts/user.ex          |  39 +++
 ...5_add_profile_and_preferences_to_users.exs |  13 +
 ui/src/graphql/generated/index.ts             | 290 ++++++++++++++++++
 .../mutations/updateUserPreferences.graphql   |  27 ++
 .../mutations/updateUserProfile.graphql       |  33 ++
 5 files changed, 402 insertions(+)
 create mode 100644 server/priv/repo/migrations/20241213011155_add_profile_and_preferences_to_users.exs
 create mode 100644 ui/src/graphql/mutations/updateUserPreferences.graphql
 create mode 100644 ui/src/graphql/mutations/updateUserProfile.graphql

diff --git a/server/lib/orcasite/accounts/user.ex b/server/lib/orcasite/accounts/user.ex
index 3bb9b9db..e4e9627c 100644
--- a/server/lib/orcasite/accounts/user.ex
+++ b/server/lib/orcasite/accounts/user.ex
@@ -30,6 +30,15 @@ defmodule Orcasite.Accounts.User do
       constraints allow_empty?: false, trim?: true
     end
 
+    # Profile fields
+    attribute :is_scientist, :boolean, default: false, allow_nil?: false, public?: true
+    attribute :organization, :string, allow_nil?: true, public?: true
+
+    # Preferences
+    attribute :volunteering, :boolean, default: false, allow_nil?: false, public?: true
+    attribute :user_testing, :boolean, default: false, allow_nil?: false, public?: true
+    attribute :newsletter, :boolean, default: false, allow_nil?: false, public?: true
+
     create_timestamp :inserted_at
     update_timestamp :updated_at
   end
@@ -92,6 +101,14 @@ defmodule Orcasite.Accounts.User do
     bypass action(:password_reset_with_password) do
       authorize_if always()
     end
+
+    policy action(:update_profile) do
+      authorize_if expr(id == ^actor(:id))
+    end
+
+    policy action(:update_preferences) do
+      authorize_if expr(id == ^actor(:id))
+    end
   end
 
   actions do
@@ -105,6 +122,24 @@ defmodule Orcasite.Accounts.User do
       get? true
       manual Orcasite.Accounts.Actions.CurrentUserRead
     end
+
+    update :update_profile do
+      accept [
+        :username,
+        :first_name,
+        :last_name,
+        :is_scientist,
+        :organization
+      ]
+    end
+
+    update :update_preferences do
+      accept [
+        :volunteering,
+        :user_testing,
+        :newsletter
+      ]
+    end
   end
 
   code_interface do
@@ -115,6 +150,8 @@ defmodule Orcasite.Accounts.User do
     define :by_email, args: [:email]
     define :request_password_reset_with_password
     define :password_reset_with_password
+    define :update_profile
+    define :update_preferences
   end
 
   admin do
@@ -142,6 +179,8 @@ defmodule Orcasite.Accounts.User do
 
     mutations do
       create :register_with_password, :register_with_password
+      update :update_user_profile, :update_profile
+      update :update_user_preferences, :update_preferences
     end
   end
 end
diff --git a/server/priv/repo/migrations/20241213011155_add_profile_and_preferences_to_users.exs b/server/priv/repo/migrations/20241213011155_add_profile_and_preferences_to_users.exs
new file mode 100644
index 00000000..29767964
--- /dev/null
+++ b/server/priv/repo/migrations/20241213011155_add_profile_and_preferences_to_users.exs
@@ -0,0 +1,13 @@
+defmodule Orcasite.Repo.Migrations.AddProfileAndPreferencesToUsers do
+  use Ecto.Migration
+
+  def change do
+    alter table(:users) do
+      add :is_scientist, :boolean, default: false, null: false
+      add :organization, :string
+      add :volunteering, :boolean, default: false, null: false
+      add :user_testing, :boolean, default: false, null: false
+      add :newsletter, :boolean, default: false, null: false
+    end
+  end
+end
diff --git a/ui/src/graphql/generated/index.ts b/ui/src/graphql/generated/index.ts
index bb56b4c7..5b40a8f2 100644
--- a/ui/src/graphql/generated/index.ts
+++ b/ui/src/graphql/generated/index.ts
@@ -1755,6 +1755,8 @@ export type RootMutationType = {
   signInWithPassword?: Maybe<SignInWithPasswordResult>;
   signOut?: Maybe<Scalars["Boolean"]["output"]>;
   submitDetection: SubmitDetectionResult;
+  updateUserPreferences: UpdateUserPreferencesResult;
+  updateUserProfile: UpdateUserProfileResult;
 };
 
 export type RootMutationTypeCancelCandidateNotificationsArgs = {
@@ -1800,6 +1802,16 @@ export type RootMutationTypeSubmitDetectionArgs = {
   input: SubmitDetectionInput;
 };
 
+export type RootMutationTypeUpdateUserPreferencesArgs = {
+  id: Scalars["ID"]["input"];
+  input?: InputMaybe<UpdateUserPreferencesInput>;
+};
+
+export type RootMutationTypeUpdateUserProfileArgs = {
+  id: Scalars["ID"]["input"];
+  input?: InputMaybe<UpdateUserProfileInput>;
+};
+
 export type RootQueryType = {
   __typename?: "RootQueryType";
   bouts?: Maybe<PageOfBout>;
@@ -1935,15 +1947,52 @@ export type SubmitDetectionResult = {
   result?: Maybe<Detection>;
 };
 
+export type UpdateUserPreferencesInput = {
+  newsletter?: InputMaybe<Scalars["Boolean"]["input"]>;
+  userTesting?: InputMaybe<Scalars["Boolean"]["input"]>;
+  volunteering?: InputMaybe<Scalars["Boolean"]["input"]>;
+};
+
+/** The result of the :update_user_preferences mutation */
+export type UpdateUserPreferencesResult = {
+  __typename?: "UpdateUserPreferencesResult";
+  /** Any errors generated, if the mutation failed */
+  errors: Array<MutationError>;
+  /** The successful result of the mutation */
+  result?: Maybe<User>;
+};
+
+export type UpdateUserProfileInput = {
+  firstName?: InputMaybe<Scalars["String"]["input"]>;
+  isScientist?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lastName?: InputMaybe<Scalars["String"]["input"]>;
+  organization?: InputMaybe<Scalars["String"]["input"]>;
+  username?: InputMaybe<Scalars["String"]["input"]>;
+};
+
+/** The result of the :update_user_profile mutation */
+export type UpdateUserProfileResult = {
+  __typename?: "UpdateUserProfileResult";
+  /** Any errors generated, if the mutation failed */
+  errors: Array<MutationError>;
+  /** The successful result of the mutation */
+  result?: Maybe<User>;
+};
+
 export type User = {
   __typename?: "User";
   admin: Scalars["Boolean"]["output"];
   email: Scalars["String"]["output"];
   firstName?: Maybe<Scalars["String"]["output"]>;
   id: Scalars["ID"]["output"];
+  isScientist: Scalars["Boolean"]["output"];
   lastName?: Maybe<Scalars["String"]["output"]>;
   moderator: Scalars["Boolean"]["output"];
+  newsletter: Scalars["Boolean"]["output"];
+  organization?: Maybe<Scalars["String"]["output"]>;
+  userTesting: Scalars["Boolean"]["output"];
   username?: Maybe<Scalars["String"]["output"]>;
+  volunteering: Scalars["Boolean"]["output"];
 };
 
 export type UserFilterAdmin = {
@@ -1998,11 +2047,27 @@ export type UserFilterInput = {
   email?: InputMaybe<UserFilterEmail>;
   firstName?: InputMaybe<UserFilterFirstName>;
   id?: InputMaybe<UserFilterId>;
+  isScientist?: InputMaybe<UserFilterIsScientist>;
   lastName?: InputMaybe<UserFilterLastName>;
   moderator?: InputMaybe<UserFilterModerator>;
+  newsletter?: InputMaybe<UserFilterNewsletter>;
   not?: InputMaybe<Array<UserFilterInput>>;
   or?: InputMaybe<Array<UserFilterInput>>;
+  organization?: InputMaybe<UserFilterOrganization>;
+  userTesting?: InputMaybe<UserFilterUserTesting>;
   username?: InputMaybe<UserFilterUsername>;
+  volunteering?: InputMaybe<UserFilterVolunteering>;
+};
+
+export type UserFilterIsScientist = {
+  eq?: InputMaybe<Scalars["Boolean"]["input"]>;
+  greaterThan?: InputMaybe<Scalars["Boolean"]["input"]>;
+  greaterThanOrEqual?: InputMaybe<Scalars["Boolean"]["input"]>;
+  in?: InputMaybe<Array<Scalars["Boolean"]["input"]>>;
+  isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThan?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThanOrEqual?: InputMaybe<Scalars["Boolean"]["input"]>;
+  notEq?: InputMaybe<Scalars["Boolean"]["input"]>;
 };
 
 export type UserFilterLastName = {
@@ -2029,6 +2094,41 @@ export type UserFilterModerator = {
   notEq?: InputMaybe<Scalars["Boolean"]["input"]>;
 };
 
+export type UserFilterNewsletter = {
+  eq?: InputMaybe<Scalars["Boolean"]["input"]>;
+  greaterThan?: InputMaybe<Scalars["Boolean"]["input"]>;
+  greaterThanOrEqual?: InputMaybe<Scalars["Boolean"]["input"]>;
+  in?: InputMaybe<Array<Scalars["Boolean"]["input"]>>;
+  isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThan?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThanOrEqual?: InputMaybe<Scalars["Boolean"]["input"]>;
+  notEq?: InputMaybe<Scalars["Boolean"]["input"]>;
+};
+
+export type UserFilterOrganization = {
+  eq?: InputMaybe<Scalars["String"]["input"]>;
+  greaterThan?: InputMaybe<Scalars["String"]["input"]>;
+  greaterThanOrEqual?: InputMaybe<Scalars["String"]["input"]>;
+  ilike?: InputMaybe<Scalars["String"]["input"]>;
+  in?: InputMaybe<Array<InputMaybe<Scalars["String"]["input"]>>>;
+  isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThan?: InputMaybe<Scalars["String"]["input"]>;
+  lessThanOrEqual?: InputMaybe<Scalars["String"]["input"]>;
+  like?: InputMaybe<Scalars["String"]["input"]>;
+  notEq?: InputMaybe<Scalars["String"]["input"]>;
+};
+
+export type UserFilterUserTesting = {
+  eq?: InputMaybe<Scalars["Boolean"]["input"]>;
+  greaterThan?: InputMaybe<Scalars["Boolean"]["input"]>;
+  greaterThanOrEqual?: InputMaybe<Scalars["Boolean"]["input"]>;
+  in?: InputMaybe<Array<Scalars["Boolean"]["input"]>>;
+  isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThan?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThanOrEqual?: InputMaybe<Scalars["Boolean"]["input"]>;
+  notEq?: InputMaybe<Scalars["Boolean"]["input"]>;
+};
+
 export type UserFilterUsername = {
   eq?: InputMaybe<Scalars["String"]["input"]>;
   greaterThan?: InputMaybe<Scalars["String"]["input"]>;
@@ -2042,6 +2142,17 @@ export type UserFilterUsername = {
   notEq?: InputMaybe<Scalars["String"]["input"]>;
 };
 
+export type UserFilterVolunteering = {
+  eq?: InputMaybe<Scalars["Boolean"]["input"]>;
+  greaterThan?: InputMaybe<Scalars["Boolean"]["input"]>;
+  greaterThanOrEqual?: InputMaybe<Scalars["Boolean"]["input"]>;
+  in?: InputMaybe<Array<Scalars["Boolean"]["input"]>>;
+  isNil?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThan?: InputMaybe<Scalars["Boolean"]["input"]>;
+  lessThanOrEqual?: InputMaybe<Scalars["Boolean"]["input"]>;
+  notEq?: InputMaybe<Scalars["Boolean"]["input"]>;
+};
+
 export type CancelCandidateNotificationsMutationVariables = Exact<{
   candidateId: Scalars["ID"]["input"];
 }>;
@@ -2279,6 +2390,64 @@ export type SubmitDetectionMutation = {
   };
 };
 
+export type UpdateUserPreferencesMutationVariables = Exact<{
+  id: Scalars["ID"]["input"];
+  volunteering?: InputMaybe<Scalars["Boolean"]["input"]>;
+  userTesting?: InputMaybe<Scalars["Boolean"]["input"]>;
+  newsletter?: InputMaybe<Scalars["Boolean"]["input"]>;
+}>;
+
+export type UpdateUserPreferencesMutation = {
+  __typename?: "RootMutationType";
+  updateUserPreferences: {
+    __typename?: "UpdateUserPreferencesResult";
+    result?: {
+      __typename?: "User";
+      id: string;
+      volunteering: boolean;
+      userTesting: boolean;
+      newsletter: boolean;
+    } | null;
+    errors: Array<{
+      __typename?: "MutationError";
+      message?: string | null;
+      code?: string | null;
+      fields?: Array<string> | null;
+    }>;
+  };
+};
+
+export type UpdateUserProfileMutationVariables = Exact<{
+  id: Scalars["ID"]["input"];
+  username?: InputMaybe<Scalars["String"]["input"]>;
+  firstName?: InputMaybe<Scalars["String"]["input"]>;
+  lastName?: InputMaybe<Scalars["String"]["input"]>;
+  isScientist?: InputMaybe<Scalars["Boolean"]["input"]>;
+  organization?: InputMaybe<Scalars["String"]["input"]>;
+}>;
+
+export type UpdateUserProfileMutation = {
+  __typename?: "RootMutationType";
+  updateUserProfile: {
+    __typename?: "UpdateUserProfileResult";
+    result?: {
+      __typename?: "User";
+      id: string;
+      username?: string | null;
+      firstName?: string | null;
+      lastName?: string | null;
+      isScientist: boolean;
+      organization?: string | null;
+    } | null;
+    errors: Array<{
+      __typename?: "MutationError";
+      message?: string | null;
+      code?: string | null;
+      fields?: Array<string> | null;
+    }>;
+  };
+};
+
 export type CandidateQueryVariables = Exact<{
   id: Scalars["ID"]["input"];
 }>;
@@ -3038,6 +3207,127 @@ useSubmitDetectionMutation.fetcher = (
     options,
   );
 
+export const UpdateUserPreferencesDocument = `
+    mutation updateUserPreferences($id: ID!, $volunteering: Boolean, $userTesting: Boolean, $newsletter: Boolean) {
+  updateUserPreferences(
+    id: $id
+    input: {volunteering: $volunteering, userTesting: $userTesting, newsletter: $newsletter}
+  ) {
+    result {
+      id
+      volunteering
+      userTesting
+      newsletter
+    }
+    errors {
+      message
+      code
+      fields
+    }
+  }
+}
+    `;
+
+export const useUpdateUserPreferencesMutation = <
+  TError = unknown,
+  TContext = unknown,
+>(
+  options?: UseMutationOptions<
+    UpdateUserPreferencesMutation,
+    TError,
+    UpdateUserPreferencesMutationVariables,
+    TContext
+  >,
+) => {
+  return useMutation<
+    UpdateUserPreferencesMutation,
+    TError,
+    UpdateUserPreferencesMutationVariables,
+    TContext
+  >({
+    mutationKey: ["updateUserPreferences"],
+    mutationFn: (variables?: UpdateUserPreferencesMutationVariables) =>
+      fetcher<
+        UpdateUserPreferencesMutation,
+        UpdateUserPreferencesMutationVariables
+      >(UpdateUserPreferencesDocument, variables)(),
+    ...options,
+  });
+};
+
+useUpdateUserPreferencesMutation.getKey = () => ["updateUserPreferences"];
+
+useUpdateUserPreferencesMutation.fetcher = (
+  variables: UpdateUserPreferencesMutationVariables,
+  options?: RequestInit["headers"],
+) =>
+  fetcher<
+    UpdateUserPreferencesMutation,
+    UpdateUserPreferencesMutationVariables
+  >(UpdateUserPreferencesDocument, variables, options);
+
+export const UpdateUserProfileDocument = `
+    mutation updateUserProfile($id: ID!, $username: String, $firstName: String, $lastName: String, $isScientist: Boolean, $organization: String) {
+  updateUserProfile(
+    id: $id
+    input: {username: $username, firstName: $firstName, lastName: $lastName, isScientist: $isScientist, organization: $organization}
+  ) {
+    result {
+      id
+      username
+      firstName
+      lastName
+      isScientist
+      organization
+    }
+    errors {
+      message
+      code
+      fields
+    }
+  }
+}
+    `;
+
+export const useUpdateUserProfileMutation = <
+  TError = unknown,
+  TContext = unknown,
+>(
+  options?: UseMutationOptions<
+    UpdateUserProfileMutation,
+    TError,
+    UpdateUserProfileMutationVariables,
+    TContext
+  >,
+) => {
+  return useMutation<
+    UpdateUserProfileMutation,
+    TError,
+    UpdateUserProfileMutationVariables,
+    TContext
+  >({
+    mutationKey: ["updateUserProfile"],
+    mutationFn: (variables?: UpdateUserProfileMutationVariables) =>
+      fetcher<UpdateUserProfileMutation, UpdateUserProfileMutationVariables>(
+        UpdateUserProfileDocument,
+        variables,
+      )(),
+    ...options,
+  });
+};
+
+useUpdateUserProfileMutation.getKey = () => ["updateUserProfile"];
+
+useUpdateUserProfileMutation.fetcher = (
+  variables: UpdateUserProfileMutationVariables,
+  options?: RequestInit["headers"],
+) =>
+  fetcher<UpdateUserProfileMutation, UpdateUserProfileMutationVariables>(
+    UpdateUserProfileDocument,
+    variables,
+    options,
+  );
+
 export const CandidateDocument = `
     query candidate($id: ID!) {
   candidate(id: $id) {
diff --git a/ui/src/graphql/mutations/updateUserPreferences.graphql b/ui/src/graphql/mutations/updateUserPreferences.graphql
new file mode 100644
index 00000000..30da96f5
--- /dev/null
+++ b/ui/src/graphql/mutations/updateUserPreferences.graphql
@@ -0,0 +1,27 @@
+mutation updateUserPreferences(
+  $id: ID!
+  $volunteering: Boolean
+  $userTesting: Boolean
+  $newsletter: Boolean
+) {
+  updateUserPreferences(
+    id: $id
+    input: {
+      volunteering: $volunteering
+      userTesting: $userTesting
+      newsletter: $newsletter
+    }
+  ) {
+    result {
+      id
+      volunteering
+      userTesting
+      newsletter
+    }
+    errors {
+      message
+      code
+      fields
+    }
+  }
+}
diff --git a/ui/src/graphql/mutations/updateUserProfile.graphql b/ui/src/graphql/mutations/updateUserProfile.graphql
new file mode 100644
index 00000000..44fc50c7
--- /dev/null
+++ b/ui/src/graphql/mutations/updateUserProfile.graphql
@@ -0,0 +1,33 @@
+mutation updateUserProfile(
+  $id: ID!
+  $username: String
+  $firstName: String
+  $lastName: String
+  $isScientist: Boolean
+  $organization: String
+) {
+  updateUserProfile(
+    id: $id
+    input: {
+      username: $username
+      firstName: $firstName
+      lastName: $lastName
+      isScientist: $isScientist
+      organization: $organization
+    }
+  ) {
+    result {
+      id
+      username
+      firstName
+      lastName
+      isScientist
+      organization
+    }
+    errors {
+      message
+      code
+      fields
+    }
+  }
+}

From 7e3a9f4ea04712f84e392c8f0b05959114d2e9d0 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Fri, 13 Dec 2024 19:22:27 +0000
Subject: [PATCH 14/22] Hook up preference and profile steps to backend

---
 server/lib/orcasite/accounts/user.ex          |  3 +
 ui/src/graphql/generated/index.ts             |  1 +
 .../join/components/PreferencesStep.tsx       | 23 ++++-
 .../modules/join/components/ProfileStep.tsx   | 91 +++++++++++++++----
 4 files changed, 99 insertions(+), 19 deletions(-)

diff --git a/server/lib/orcasite/accounts/user.ex b/server/lib/orcasite/accounts/user.ex
index e4e9627c..4931c970 100644
--- a/server/lib/orcasite/accounts/user.ex
+++ b/server/lib/orcasite/accounts/user.ex
@@ -134,11 +134,14 @@ defmodule Orcasite.Accounts.User do
     end
 
     update :update_preferences do
+      argument :live_notifications, :boolean, default: false, allow_nil?: false
       accept [
         :volunteering,
         :user_testing,
         :newsletter
       ]
+
+      # TODO: When live_notifications is true, create a subscription for the user
     end
   end
 
diff --git a/ui/src/graphql/generated/index.ts b/ui/src/graphql/generated/index.ts
index 5b40a8f2..3ac0de92 100644
--- a/ui/src/graphql/generated/index.ts
+++ b/ui/src/graphql/generated/index.ts
@@ -1948,6 +1948,7 @@ export type SubmitDetectionResult = {
 };
 
 export type UpdateUserPreferencesInput = {
+  liveNotifications?: InputMaybe<Scalars["Boolean"]["input"]>;
   newsletter?: InputMaybe<Scalars["Boolean"]["input"]>;
   userTesting?: InputMaybe<Scalars["Boolean"]["input"]>;
   volunteering?: InputMaybe<Scalars["Boolean"]["input"]>;
diff --git a/ui/src/modules/join/components/PreferencesStep.tsx b/ui/src/modules/join/components/PreferencesStep.tsx
index f0ff2878..5565312b 100644
--- a/ui/src/modules/join/components/PreferencesStep.tsx
+++ b/ui/src/modules/join/components/PreferencesStep.tsx
@@ -3,6 +3,11 @@ import { Box, FormControlLabel, Switch } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import {
+  useGetCurrentUserQuery,
+  useUpdateUserPreferencesMutation,
+} from "@/graphql/generated";
+
 import { createFormSubmitHandler, StepFormProps } from "../utils";
 import { FormActions } from "./FormActions";
 
@@ -16,6 +21,8 @@ const preferencesSchema = z.object({
 type PreferencesFormInputs = z.infer<typeof preferencesSchema>;
 
 const usePreferencesForm = (onSuccess: () => void) => {
+  const currentUser = useGetCurrentUserQuery().data?.currentUser;
+
   const form = useForm<PreferencesFormInputs>({
     resolver: zodResolver(preferencesSchema),
     defaultValues: {
@@ -26,9 +33,21 @@ const usePreferencesForm = (onSuccess: () => void) => {
     },
   });
 
+  const updatePreferences = useUpdateUserPreferencesMutation({
+    onSuccess: ({ updateUserPreferences }) => {
+      if (updateUserPreferences?.result) {
+        onSuccess();
+      }
+    },
+  });
+
   const onSubmit = (data: PreferencesFormInputs) => {
-    // TODO: Implement preferences update mutation
-    onSuccess();
+    if (!currentUser) return;
+
+    updatePreferences.mutate({
+      id: currentUser.id,
+      ...data,
+    });
   };
 
   return { form, onSubmit };
diff --git a/ui/src/modules/join/components/ProfileStep.tsx b/ui/src/modules/join/components/ProfileStep.tsx
index a1784ab6..e10c0b10 100644
--- a/ui/src/modules/join/components/ProfileStep.tsx
+++ b/ui/src/modules/join/components/ProfileStep.tsx
@@ -3,39 +3,81 @@ import { Box, Checkbox, FormControlLabel, TextField } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { createFormSubmitHandler, StepFormProps } from "../utils";
+import {
+  useGetCurrentUserQuery,
+  useUpdateUserProfileMutation,
+} from "@/graphql/generated";
+
+import {
+  createFormSubmitHandler,
+  getFieldErrorProps,
+  StepFormProps,
+} from "../utils";
 import { FormActions } from "./FormActions";
 
 const profileSchema = z.object({
   username: z.string().optional(),
   firstName: z.string().optional(),
   lastName: z.string().optional(),
-  isMarineScientist: z.boolean().default(false),
+  isScientist: z.boolean().default(false),
   organization: z.string().optional(),
 });
 
 type ProfileFormInputs = z.infer<typeof profileSchema>;
 
 const useProfileForm = (onSuccess: () => void) => {
+  const currentUser = useGetCurrentUserQuery().data?.currentUser;
+
   const form = useForm<ProfileFormInputs>({
     resolver: zodResolver(profileSchema),
     defaultValues: {
-      isMarineScientist: false,
+      isScientist: false,
+    },
+  });
+
+  const updateProfile = useUpdateUserProfileMutation({
+    onSuccess: ({ updateUserProfile }) => {
+      if (updateUserProfile?.result) {
+        onSuccess();
+      }
     },
   });
 
   const onSubmit = (data: ProfileFormInputs) => {
-    // TODO: Implement profile update mutation
-    onSuccess();
+    if (!currentUser) return;
+
+    updateProfile.mutate({
+      id: currentUser.id,
+      ...data,
+    });
   };
 
-  return { form, onSubmit };
+  return {
+    form,
+    onSubmit,
+    errors: updateProfile.data?.updateUserProfile?.errors,
+  };
 };
 
 export const ProfileStep = ({ onSuccess, onSkip }: StepFormProps) => {
-  const { form, onSubmit } = useProfileForm(onSuccess);
-  const { register, watch } = form;
-  const isMarineScientist = watch("isMarineScientist");
+  const { form, onSubmit, errors } = useProfileForm(onSuccess);
+  const {
+    register,
+    watch,
+    formState: { errors: formErrors },
+  } = form;
+  const isScientist = watch("isScientist");
+
+  const usernameProps = getFieldErrorProps(
+    "username",
+    formErrors.username,
+    errors,
+  );
+  const organizationProps = getFieldErrorProps(
+    "organization",
+    formErrors.organization,
+    errors,
+  );
 
   return (
     <form onSubmit={createFormSubmitHandler(form, onSubmit)} name="profile">
@@ -44,26 +86,41 @@ export const ProfileStep = ({ onSuccess, onSkip }: StepFormProps) => {
           {...register("username")}
           label="Username"
           fullWidth
-          helperText="Choose a unique username for the community"
+          error={usernameProps.error}
+          helperText={
+            usernameProps.helperText ||
+            "Choose a unique username for the community"
+          }
         />
 
-        <TextField {...register("firstName")} label="First name" fullWidth />
+        <TextField
+          {...register("firstName")}
+          label="First name"
+          fullWidth
+          {...getFieldErrorProps("firstName", formErrors.firstName, errors)}
+        />
 
-        <TextField {...register("lastName")} label="Last name" fullWidth />
+        <TextField
+          {...register("lastName")}
+          label="Last name"
+          fullWidth
+          {...getFieldErrorProps("lastName", formErrors.lastName, errors)}
+        />
 
         <FormControlLabel
-          control={
-            <Checkbox {...register("isMarineScientist")} color="primary" />
-          }
+          control={<Checkbox {...register("isScientist")} color="primary" />}
           label="I am a professional marine scientist"
         />
 
-        {isMarineScientist && (
+        {isScientist && (
           <TextField
             {...register("organization")}
             label="Organization"
             fullWidth
-            helperText="Your professional affiliation"
+            error={organizationProps.error}
+            helperText={
+              organizationProps.helperText || "Your professional affiliation"
+            }
           />
         )}
 

From 401cc54cc13b65e713182bfdc5a933bc45067c58 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Wed, 8 Jan 2025 18:23:05 +0000
Subject: [PATCH 15/22] Fix registration mutation so session cookie gets set
 correctly

---
 server/lib/orcasite/accounts/user.ex | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/server/lib/orcasite/accounts/user.ex b/server/lib/orcasite/accounts/user.ex
index 4931c970..d9ce684d 100644
--- a/server/lib/orcasite/accounts/user.ex
+++ b/server/lib/orcasite/accounts/user.ex
@@ -181,9 +181,18 @@ defmodule Orcasite.Accounts.User do
     end
 
     mutations do
-      create :register_with_password, :register_with_password
+      create :register_with_password, :register_with_password do
+        modify_resolution {__MODULE__, :after_registration, []}
+      end
       update :update_user_profile, :update_profile
       update :update_user_preferences, :update_preferences
     end
   end
+
+  def after_registration(resolution, _query, {:ok, user}) do
+    resolution
+    |> Map.update!(:context, fn ctx ->
+      Map.put(ctx, :current_user, user)
+    end)
+  end
 end

From f0d4523b0d51f94b05b57cb888aa0ade75032a10 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Fri, 10 Jan 2025 04:06:06 +0000
Subject: [PATCH 16/22] Implement auth hook and refactor join steps to use new
 auth logic

---
 ui/src/hooks/useAuth.ts                       | 74 +++++++++++++++++++
 .../modules/join/components/AccountStep.tsx   | 51 +++++--------
 .../join/components/PreferencesStep.tsx       | 12 ++-
 .../modules/join/components/ProfileStep.tsx   | 12 ++-
 ui/src/modules/join/hooks/useSteps.ts         | 51 ++++++++-----
 ui/src/modules/join/index.ts                  |  2 +-
 ui/src/pages/join.tsx                         | 45 ++++++++---
 7 files changed, 171 insertions(+), 76 deletions(-)
 create mode 100644 ui/src/hooks/useAuth.ts

diff --git a/ui/src/hooks/useAuth.ts b/ui/src/hooks/useAuth.ts
new file mode 100644
index 00000000..b67304bb
--- /dev/null
+++ b/ui/src/hooks/useAuth.ts
@@ -0,0 +1,74 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useCallback } from "react";
+
+import {
+  useGetCurrentUserQuery,
+  useRegisterWithPasswordMutation,
+  useSignInWithPasswordMutation,
+  useSignOutMutation,
+} from "@/graphql/generated";
+
+type SignInParams = {
+  email: string;
+  password: string;
+};
+
+type RegisterParams = {
+  email: string;
+  password: string;
+  passwordConfirmation: string;
+  firstName?: string;
+  lastName?: string;
+};
+
+export function useAuth() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const { data: { currentUser } = {}, isLoading: isLoadingUser } =
+    useGetCurrentUserQuery();
+  const { mutateAsync: signInMutation } = useSignInWithPasswordMutation();
+  const { mutateAsync: signOutMutation } = useSignOutMutation();
+  const { mutateAsync: registerMutation } = useRegisterWithPasswordMutation();
+
+  const refreshSession = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ["getCurrentUser"] });
+  }, [queryClient]);
+
+  const signIn = useCallback(
+    async (params: SignInParams) => {
+      const { signInWithPassword } = await signInMutation(params);
+      if (signInWithPassword?.errors) throw signInWithPassword.errors;
+      refreshSession();
+      return signInWithPassword?.user;
+    },
+    [signInMutation, refreshSession],
+  );
+
+  const signOut = useCallback(async () => {
+    await signOutMutation({});
+    queryClient.removeQueries();
+    router.push("/");
+  }, [signOutMutation, queryClient, router]);
+
+  const register = useCallback(
+    async (params: RegisterParams) => {
+      const { registerWithPassword } = await registerMutation(params);
+      if (registerWithPassword.errors.length > 0)
+        throw registerWithPassword.errors;
+      refreshSession();
+      return registerWithPassword.result;
+    },
+    [registerMutation, refreshSession],
+  );
+
+  return {
+    user: currentUser,
+    isLoadingUser,
+    isAuthenticated: !!currentUser,
+    signIn,
+    signOut,
+    register,
+  };
+}
diff --git a/ui/src/modules/join/components/AccountStep.tsx b/ui/src/modules/join/components/AccountStep.tsx
index d9a91b1a..21cf2dde 100644
--- a/ui/src/modules/join/components/AccountStep.tsx
+++ b/ui/src/modules/join/components/AccountStep.tsx
@@ -4,10 +4,8 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import {
-  MutationError,
-  useRegisterWithPasswordMutation,
-} from "@/graphql/generated";
+import { MutationError } from "@/graphql/generated";
+import { useAuth } from "@/hooks/useAuth";
 
 import {
   createFormSubmitHandler,
@@ -31,37 +29,26 @@ const useAccountForm = (onSuccess: () => void) => {
   const form = useForm<AccountFormInputs>({
     resolver: zodResolver(accountSchema),
   });
+  const { register: registerUser } = useAuth();
 
-  const submitRegister = useRegisterWithPasswordMutation({
-    onMutate: () => {
+  const onSubmit = async (data: AccountFormInputs) => {
+    try {
       setErrors([]);
-    },
-    onSuccess: ({ registerWithPassword }) => {
-      if (registerWithPassword) {
-        const { result: user, errors } = registerWithPassword;
-
-        if (errors) {
-          setErrors(
-            errors.filter((error): error is MutationError => error !== null),
-          );
-        }
-
-        if (user) {
-          onSuccess();
-        }
+      await registerUser({
+        email: data.email,
+        password: data.password,
+        passwordConfirmation: data.password,
+      });
+      onSuccess();
+    } catch (errors) {
+      if (Array.isArray(errors)) {
+        setErrors(
+          errors.filter((error): error is MutationError => error !== null),
+        );
+      } else {
+        console.error("Register error:", errors);
       }
-    },
-    onError: (error) => {
-      console.log("Register error", error);
-    },
-  });
-
-  const onSubmit = (data: AccountFormInputs) => {
-    submitRegister.mutate({
-      email: data.email,
-      password: data.password,
-      passwordConfirmation: data.password,
-    });
+    }
   };
 
   return { form, errors, onSubmit };
diff --git a/ui/src/modules/join/components/PreferencesStep.tsx b/ui/src/modules/join/components/PreferencesStep.tsx
index 5565312b..9c155489 100644
--- a/ui/src/modules/join/components/PreferencesStep.tsx
+++ b/ui/src/modules/join/components/PreferencesStep.tsx
@@ -3,10 +3,8 @@ import { Box, FormControlLabel, Switch } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import {
-  useGetCurrentUserQuery,
-  useUpdateUserPreferencesMutation,
-} from "@/graphql/generated";
+import { useUpdateUserPreferencesMutation } from "@/graphql/generated";
+import { useAuth } from "@/hooks/useAuth";
 
 import { createFormSubmitHandler, StepFormProps } from "../utils";
 import { FormActions } from "./FormActions";
@@ -21,7 +19,7 @@ const preferencesSchema = z.object({
 type PreferencesFormInputs = z.infer<typeof preferencesSchema>;
 
 const usePreferencesForm = (onSuccess: () => void) => {
-  const currentUser = useGetCurrentUserQuery().data?.currentUser;
+  const { user } = useAuth();
 
   const form = useForm<PreferencesFormInputs>({
     resolver: zodResolver(preferencesSchema),
@@ -42,10 +40,10 @@ const usePreferencesForm = (onSuccess: () => void) => {
   });
 
   const onSubmit = (data: PreferencesFormInputs) => {
-    if (!currentUser) return;
+    if (!user) return;
 
     updatePreferences.mutate({
-      id: currentUser.id,
+      id: user.id,
       ...data,
     });
   };
diff --git a/ui/src/modules/join/components/ProfileStep.tsx b/ui/src/modules/join/components/ProfileStep.tsx
index e10c0b10..c5a33b52 100644
--- a/ui/src/modules/join/components/ProfileStep.tsx
+++ b/ui/src/modules/join/components/ProfileStep.tsx
@@ -3,10 +3,8 @@ import { Box, Checkbox, FormControlLabel, TextField } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import {
-  useGetCurrentUserQuery,
-  useUpdateUserProfileMutation,
-} from "@/graphql/generated";
+import { useUpdateUserProfileMutation } from "@/graphql/generated";
+import { useAuth } from "@/hooks/useAuth";
 
 import {
   createFormSubmitHandler,
@@ -26,7 +24,7 @@ const profileSchema = z.object({
 type ProfileFormInputs = z.infer<typeof profileSchema>;
 
 const useProfileForm = (onSuccess: () => void) => {
-  const currentUser = useGetCurrentUserQuery().data?.currentUser;
+  const { user } = useAuth();
 
   const form = useForm<ProfileFormInputs>({
     resolver: zodResolver(profileSchema),
@@ -44,10 +42,10 @@ const useProfileForm = (onSuccess: () => void) => {
   });
 
   const onSubmit = (data: ProfileFormInputs) => {
-    if (!currentUser) return;
+    if (!user) return;
 
     updateProfile.mutate({
-      id: currentUser.id,
+      id: user.id,
       ...data,
     });
   };
diff --git a/ui/src/modules/join/hooks/useSteps.ts b/ui/src/modules/join/hooks/useSteps.ts
index f5442812..272c67dd 100644
--- a/ui/src/modules/join/hooks/useSteps.ts
+++ b/ui/src/modules/join/hooks/useSteps.ts
@@ -1,29 +1,44 @@
-import { useState } from "react";
+import { useRouter } from "next/router";
+import { useCallback } from "react";
 
-export const steps = {
-  account: 1,
-  profile: 2,
-  preferences: 3,
-  success: 4,
-} as const;
-
-type Step = (typeof steps)[keyof typeof steps];
+const steps = ["account", "profile", "preferences", "success"] as const;
+export type Step = (typeof steps)[number];
 
+/**
+ * Hook to manage the join steps
+ *
+ * Uses the query parameter `step` to track the current step
+ */
 export const useSteps = () => {
-  const [currentStep, setCurrentStep] = useState<Step>(steps.account);
+  const router = useRouter();
+  const step = router.query.step as Step | undefined;
 
-  const goToNextStep = () => {
-    setCurrentStep((prev) =>
-      prev < steps.success ? ((prev + 1) as Step) : prev,
-    );
-  };
+  const setStep = useCallback(
+    (newStep: Step, usePush = false) => {
+      const routerMethod = usePush ? router.push : router.replace;
+      routerMethod({ query: { step: newStep } }, undefined, {
+        shallow: true,
+      });
+    },
+    [router],
+  );
 
-  const skipToNextStep = () => {
+  const goToNextStep = useCallback(() => {
+    if (!step) return;
+    const currentIndex = steps.indexOf(step);
+    if (currentIndex < steps.length - 1) {
+      const nextStep = steps[currentIndex + 1];
+      setStep(nextStep, true);
+    }
+  }, [step, setStep]);
+
+  const skipToNextStep = useCallback(() => {
     goToNextStep();
-  };
+  }, [goToNextStep]);
 
   return {
-    currentStep,
+    step,
+    setStep,
     goToNextStep,
     skipToNextStep,
   };
diff --git a/ui/src/modules/join/index.ts b/ui/src/modules/join/index.ts
index df360ac5..f5cf98d5 100644
--- a/ui/src/modules/join/index.ts
+++ b/ui/src/modules/join/index.ts
@@ -6,4 +6,4 @@ export { StepLayout } from "./components/StepLayout";
 export { SuccessStep } from "./components/SuccessStep";
 
 // Hooks
-export { steps, useSteps } from "./hooks/useSteps";
+export { type Step, useSteps } from "./hooks/useSteps";
diff --git a/ui/src/pages/join.tsx b/ui/src/pages/join.tsx
index e9eda681..d81830dd 100644
--- a/ui/src/pages/join.tsx
+++ b/ui/src/pages/join.tsx
@@ -1,10 +1,14 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
 import { getMapLayout } from "@/components/layouts/MapLayout";
+import { useAuth } from "@/hooks/useAuth";
 import {
   AccountStep,
   PreferencesStep,
   ProfileStep,
+  Step,
   StepLayout,
-  steps,
   SuccessStep,
   useSteps,
 } from "@/modules/join";
@@ -16,7 +20,7 @@ type StepConfig = {
   description: string;
 };
 
-const stepConfigs: Record<keyof typeof steps, StepConfig> = {
+const stepConfigs: Record<Step, StepConfig> = {
   account: {
     pageTitle: "Create an Account",
     title: "Create an account",
@@ -43,9 +47,30 @@ const stepConfigs: Record<keyof typeof steps, StepConfig> = {
 };
 
 const JoinPage: NextPageWithLayout = () => {
-  const { currentStep, goToNextStep, skipToNextStep } = useSteps();
-  const currentConfig =
-    stepConfigs[Object.keys(steps)[currentStep - 1] as keyof typeof steps];
+  const router = useRouter();
+  const { step, setStep, goToNextStep, skipToNextStep } = useSteps();
+  const { user, isLoadingUser } = useAuth();
+
+  // Decide which step to show based on the user's state and the desired step
+  useEffect(() => {
+    if (!router.isReady) return;
+    if (isLoadingUser) return;
+
+    // Start the join flow if the user is not logged in
+    if (!user && !step) setStep("account");
+    // Logged in users should not be able to access the join page, so redirect
+    else if (user && !step) router.replace("/");
+    // Unless they're trying to directly access a step (but skip the account creation step)
+    else if (user && step === "account") goToNextStep();
+  }, [user, step, router, goToNextStep, setStep, isLoadingUser]);
+
+  if (isLoadingUser) {
+    return <div>Loading...</div>;
+  }
+
+  if (!step) return null;
+
+  const currentConfig = stepConfigs[step];
 
   return (
     <div>
@@ -55,16 +80,14 @@ const JoinPage: NextPageWithLayout = () => {
           title={currentConfig.title}
           description={currentConfig.description}
         >
-          {currentStep === steps.account && (
-            <AccountStep onSuccess={goToNextStep} />
-          )}
-          {currentStep === steps.profile && (
+          {step === "account" && <AccountStep onSuccess={goToNextStep} />}
+          {step === "profile" && (
             <ProfileStep onSuccess={goToNextStep} onSkip={skipToNextStep} />
           )}
-          {currentStep === steps.preferences && (
+          {step === "preferences" && (
             <PreferencesStep onSuccess={goToNextStep} onSkip={skipToNextStep} />
           )}
-          {currentStep === steps.success && <SuccessStep />}
+          {step === "success" && <SuccessStep />}
         </StepLayout>
       </main>
     </div>

From bdb1e22c0b6d9911e93a810c3754184c2ef47335 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Fri, 10 Jan 2025 06:39:07 +0000
Subject: [PATCH 17/22] Break up Header component into smaller files

---
 ui/src/components/Header/Brand.tsx            |  37 +++++
 ui/src/components/Header/Desktop.tsx          | 100 ++++++++++++
 ui/src/components/Header/Header.tsx           |  25 +++
 .../{Header.tsx => Header/Mobile.tsx}         | 151 +-----------------
 ui/src/components/Header/index.tsx            |   1 +
 5 files changed, 166 insertions(+), 148 deletions(-)
 create mode 100644 ui/src/components/Header/Brand.tsx
 create mode 100644 ui/src/components/Header/Desktop.tsx
 create mode 100644 ui/src/components/Header/Header.tsx
 rename ui/src/components/{Header.tsx => Header/Mobile.tsx} (55%)
 create mode 100644 ui/src/components/Header/index.tsx

diff --git a/ui/src/components/Header/Brand.tsx b/ui/src/components/Header/Brand.tsx
new file mode 100644
index 00000000..cff797c4
--- /dev/null
+++ b/ui/src/components/Header/Brand.tsx
@@ -0,0 +1,37 @@
+import { Typography } from "@mui/material";
+import Image from "next/image";
+
+import Link from "@/components/Link";
+import wordmark from "@/public/wordmark/wordmark-white.svg";
+import { analytics } from "@/utils/analytics";
+
+export default function Brand({ onClick }: { onClick?: () => void }) {
+  return (
+    <Typography variant="h6" noWrap overflow="visible">
+      <Link
+        href="/"
+        color="inherit"
+        underline="none"
+        sx={{
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          px: 4,
+        }}
+        onClick={() => {
+          if (onClick) onClick();
+          analytics.nav.logoClicked();
+        }}
+      >
+        <Image
+          src={wordmark.src}
+          alt="Orcasound"
+          width={140}
+          height={60}
+          priority={true}
+        />
+      </Link>
+    </Typography>
+  );
+}
diff --git a/ui/src/components/Header/Desktop.tsx b/ui/src/components/Header/Desktop.tsx
new file mode 100644
index 00000000..1dc049c9
--- /dev/null
+++ b/ui/src/components/Header/Desktop.tsx
@@ -0,0 +1,100 @@
+import { Notifications, Person } from "@mui/icons-material";
+import { Box, Button } from "@mui/material";
+
+import Link from "@/components/Link";
+import { displayDesktopOnly } from "@/styles/responsive";
+import { analytics } from "@/utils/analytics";
+
+import Brand from "./Brand";
+
+export default function Desktop() {
+  const pages = [
+    {
+      label: "About us",
+      url: "https://www.orcasound.net/",
+      onClick: () => analytics.nav.aboutTabClicked(),
+    },
+    {
+      label: "Send feedback",
+      url: "https://forms.gle/wKpAnxzUh9a5LMfd7",
+      onClick: () => analytics.nav.feedbackTabClicked(),
+    },
+  ];
+  return (
+    <Box sx={{ ...displayDesktopOnly, width: "100%" }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          width: 1,
+        }}
+      >
+        <Brand />
+        <Box sx={{ display: "flex" }}>
+          {pages.map((page) => (
+            <Button
+              onClick={() => page.onClick && page.onClick()}
+              href={page.url}
+              target="_blank"
+              key={page.label}
+              variant="text"
+              sx={{
+                my: 2,
+                mx: 1,
+                color: "base.contrastText",
+                textWrap: "nowrap",
+              }}
+            >
+              {page.label}
+            </Button>
+          ))}
+          <Link
+            href="https://docs.google.com/forms/d/1oYSTa3QeAAG-G_eTxjabrXd264zVARId9tp2iBRWpFs/edit"
+            title="Get notified when there's whale activity."
+            target="_blank"
+            sx={{
+              my: 2,
+              mx: 1,
+              textWrap: "nowrap",
+            }}
+            onClick={() => analytics.nav.notificationsClicked()}
+          >
+            <Button
+              variant="contained"
+              color="primary"
+              startIcon={<Notifications sx={{ color: "gold" }} />}
+              sx={{
+                borderRadius: 8,
+              }}
+            >
+              Get notified
+            </Button>
+          </Link>
+          <Link
+            href="/join"
+            title="Join Orcasound"
+            sx={{
+              my: 2,
+              mx: 1,
+              textWrap: "nowrap",
+            }}
+            // TODO(@paulcretu): Add analytics event
+            // onClick={() => analytics.nav.joinClicked()}
+          >
+            <Button
+              variant="contained"
+              color="primary"
+              startIcon={<Person />}
+              sx={{
+                borderRadius: 8,
+              }}
+            >
+              Join
+            </Button>
+          </Link>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/ui/src/components/Header/Header.tsx b/ui/src/components/Header/Header.tsx
new file mode 100644
index 00000000..d5c0baaa
--- /dev/null
+++ b/ui/src/components/Header/Header.tsx
@@ -0,0 +1,25 @@
+import { AppBar, Toolbar } from "@mui/material";
+
+import Desktop from "./Desktop";
+import Mobile from "./Mobile";
+
+export default function Header({
+  onBrandClick,
+}: {
+  onBrandClick?: () => void;
+}) {
+  return (
+    <AppBar
+      position="static"
+      sx={{
+        // Keep header above the side drawer
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+      }}
+    >
+      <Toolbar>
+        <Mobile onBrandClick={onBrandClick} />
+        <Desktop />
+      </Toolbar>
+    </AppBar>
+  );
+}
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header/Mobile.tsx
similarity index 55%
rename from ui/src/components/Header.tsx
rename to ui/src/components/Header/Mobile.tsx
index 42b4551f..ab146bbe 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header/Mobile.tsx
@@ -7,7 +7,6 @@ import {
   Person,
 } from "@mui/icons-material";
 import {
-  AppBar,
   Box,
   Button,
   Divider,
@@ -18,39 +17,18 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
-  Toolbar,
-  Typography,
 } from "@mui/material";
 import Image from "next/image";
 import { useState } from "react";
 
 import Link from "@/components/Link";
 import wordmark from "@/public/wordmark/wordmark-white.svg";
-import { displayDesktopOnly, displayMobileOnly } from "@/styles/responsive";
+import { displayMobileOnly } from "@/styles/responsive";
 import { analytics } from "@/utils/analytics";
 
-export default function Header({
-  onBrandClick,
-}: {
-  onBrandClick?: () => void;
-}) {
-  return (
-    <AppBar
-      position="static"
-      sx={{
-        // Keep header above the side drawer
-        zIndex: (theme) => theme.zIndex.drawer + 1,
-      }}
-    >
-      <Toolbar>
-        <Mobile onBrandClick={onBrandClick} />
-        <Desktop />
-      </Toolbar>
-    </AppBar>
-  );
-}
+import Brand from "./Brand";
 
-function Mobile({
+export default function Mobile({
   window,
   onBrandClick,
 }: {
@@ -198,126 +176,3 @@ function Mobile({
     </Box>
   );
 }
-
-function Desktop() {
-  const pages = [
-    {
-      label: "About us",
-      url: "https://www.orcasound.net/",
-      onClick: () => analytics.nav.aboutTabClicked(),
-    },
-    {
-      label: "Send feedback",
-      url: "https://forms.gle/wKpAnxzUh9a5LMfd7",
-      onClick: () => analytics.nav.feedbackTabClicked(),
-    },
-  ];
-  return (
-    <Box sx={{ ...displayDesktopOnly, width: "100%" }}>
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          width: 1,
-        }}
-      >
-        <Brand />
-        <Box sx={{ display: "flex" }}>
-          {pages.map((page) => (
-            <Button
-              onClick={() => page.onClick && page.onClick()}
-              href={page.url}
-              target="_blank"
-              key={page.label}
-              variant="text"
-              sx={{
-                my: 2,
-                mx: 1,
-                color: "base.contrastText",
-                textWrap: "nowrap",
-              }}
-            >
-              {page.label}
-            </Button>
-          ))}
-          <Link
-            href="https://docs.google.com/forms/d/1oYSTa3QeAAG-G_eTxjabrXd264zVARId9tp2iBRWpFs/edit"
-            title="Get notified when there's whale activity."
-            target="_blank"
-            sx={{
-              my: 2,
-              mx: 1,
-              textWrap: "nowrap",
-            }}
-            onClick={() => analytics.nav.notificationsClicked()}
-          >
-            <Button
-              variant="contained"
-              color="primary"
-              startIcon={<Notifications sx={{ color: "gold" }} />}
-              sx={{
-                borderRadius: 8,
-              }}
-            >
-              Get notified
-            </Button>
-          </Link>
-          <Link
-            href="/join"
-            title="Join Orcasound"
-            sx={{
-              my: 2,
-              mx: 1,
-              textWrap: "nowrap",
-            }}
-            // TODO(@paulcretu): Add analytics event
-            // onClick={() => analytics.nav.joinClicked()}
-          >
-            <Button
-              variant="contained"
-              color="primary"
-              startIcon={<Person />}
-              sx={{
-                borderRadius: 8,
-              }}
-            >
-              Join
-            </Button>
-          </Link>
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
-function Brand({ onClick }: { onClick?: () => void }) {
-  return (
-    <Typography variant="h6" noWrap overflow="visible">
-      <Link
-        href="/"
-        color="inherit"
-        underline="none"
-        sx={{
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          px: 4,
-        }}
-        onClick={() => {
-          if (onClick) onClick();
-          analytics.nav.logoClicked();
-        }}
-      >
-        <Image
-          src={wordmark.src}
-          alt="Orcasound"
-          width={140}
-          height={60}
-          priority={true}
-        />
-      </Link>
-    </Typography>
-  );
-}
diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
new file mode 100644
index 00000000..2764567d
--- /dev/null
+++ b/ui/src/components/Header/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Header";

From c2dd263cb5f7e4f1a4c2e8b7c0647039c391b931 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Fri, 10 Jan 2025 06:45:47 +0000
Subject: [PATCH 18/22] Fix typo

---
 ui/src/components/Header/Mobile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/Header/Mobile.tsx b/ui/src/components/Header/Mobile.tsx
index ab146bbe..5a8bcdf5 100644
--- a/ui/src/components/Header/Mobile.tsx
+++ b/ui/src/components/Header/Mobile.tsx
@@ -152,7 +152,7 @@ export default function Mobile({
                     <ListItemIcon
                       sx={{
                         color: "base.contrastText",
-                        displa: "flex",
+                        display: "flex",
                         justifyContent: "center",
                         opacity: 0.9,
                       }}

From 1efeb43a992faa269f2b5d8fbac134623f2807e3 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Fri, 10 Jan 2025 08:03:21 +0000
Subject: [PATCH 19/22] Add AccountMenu component

---
 ui/src/components/Header/AccountMenu.tsx      | 101 ++++++++++++++++++
 ui/src/components/Header/Desktop.tsx          |  26 +----
 ui/src/components/Header/Mobile.tsx           |  28 +----
 ui/src/graphql/generated/index.ts             |   2 +
 ui/src/graphql/queries/getCurrentUser.graphql |   1 +
 5 files changed, 111 insertions(+), 47 deletions(-)
 create mode 100644 ui/src/components/Header/AccountMenu.tsx

diff --git a/ui/src/components/Header/AccountMenu.tsx b/ui/src/components/Header/AccountMenu.tsx
new file mode 100644
index 00000000..0a4a6c48
--- /dev/null
+++ b/ui/src/components/Header/AccountMenu.tsx
@@ -0,0 +1,101 @@
+import { Logout, Person, Settings } from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  IconButton,
+  ListItemIcon,
+  Menu,
+  MenuItem,
+  SxProps,
+  Theme,
+  Typography,
+} from "@mui/material";
+import { useState } from "react";
+
+import Link from "@/components/Link";
+import { useAuth } from "@/hooks/useAuth";
+
+export default function AccountMenu({ sx }: { sx?: SxProps<Theme> }) {
+  const { user, signOut } = useAuth();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSignOut = () => {
+    handleClose();
+    signOut();
+  };
+
+  if (!user) {
+    return (
+      <Link href="/join" title="Join Orcasound" sx={sx}>
+        <Button
+          variant="contained"
+          startIcon={<Person />}
+          color="primary"
+          sx={{
+            borderRadius: 8,
+          }}
+          // TODO(@paulcretu): Add analytics event
+          // onClick={() => analytics.nav.joinClicked()}
+        >
+          Join
+        </Button>
+      </Link>
+    );
+  }
+
+  return (
+    <>
+      <IconButton
+        onClick={handleClick}
+        size="small"
+        sx={{
+          marginLeft: "auto",
+          color: "white",
+          ...sx,
+        }}
+        aria-controls="account-menu"
+        aria-expanded={open}
+      >
+        <Person />
+      </IconButton>
+      <Menu
+        id="account-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+        <Box sx={{ px: 2, py: 1 }}>
+          <Typography variant="subtitle1" noWrap>
+            {[user.firstName, user.lastName].filter(Boolean).join(" ") ??
+              user.username ??
+              user.email}
+          </Typography>
+          <Typography variant="body2" color="text.secondary" noWrap>
+            {user.email}
+          </Typography>
+        </Box>
+        <MenuItem component={Link} href="/settings">
+          <ListItemIcon>
+            <Settings fontSize="small" />
+          </ListItemIcon>
+          Settings
+        </MenuItem>
+        <MenuItem onClick={handleSignOut}>
+          <ListItemIcon>
+            <Logout fontSize="small" />
+          </ListItemIcon>
+          Sign out
+        </MenuItem>
+      </Menu>
+    </>
+  );
+}
diff --git a/ui/src/components/Header/Desktop.tsx b/ui/src/components/Header/Desktop.tsx
index 1dc049c9..6c247878 100644
--- a/ui/src/components/Header/Desktop.tsx
+++ b/ui/src/components/Header/Desktop.tsx
@@ -1,10 +1,11 @@
-import { Notifications, Person } from "@mui/icons-material";
+import { Notifications } from "@mui/icons-material";
 import { Box, Button } from "@mui/material";
 
 import Link from "@/components/Link";
 import { displayDesktopOnly } from "@/styles/responsive";
 import { analytics } from "@/utils/analytics";
 
+import UserMenu from "./AccountMenu";
 import Brand from "./Brand";
 
 export default function Desktop() {
@@ -71,28 +72,7 @@ export default function Desktop() {
               Get notified
             </Button>
           </Link>
-          <Link
-            href="/join"
-            title="Join Orcasound"
-            sx={{
-              my: 2,
-              mx: 1,
-              textWrap: "nowrap",
-            }}
-            // TODO(@paulcretu): Add analytics event
-            // onClick={() => analytics.nav.joinClicked()}
-          >
-            <Button
-              variant="contained"
-              color="primary"
-              startIcon={<Person />}
-              sx={{
-                borderRadius: 8,
-              }}
-            >
-              Join
-            </Button>
-          </Link>
+          <UserMenu sx={{ my: 2, mx: 1, textWrap: "nowrap" }} />
         </Box>
       </Box>
     </Box>
diff --git a/ui/src/components/Header/Mobile.tsx b/ui/src/components/Header/Mobile.tsx
index 5a8bcdf5..92cd19e3 100644
--- a/ui/src/components/Header/Mobile.tsx
+++ b/ui/src/components/Header/Mobile.tsx
@@ -2,13 +2,11 @@ import {
   Close,
   Feedback,
   Home,
-  Menu,
+  Menu as MenuIcon,
   Notifications,
-  Person,
 } from "@mui/icons-material";
 import {
   Box,
-  Button,
   Divider,
   Drawer,
   IconButton,
@@ -21,11 +19,11 @@ import {
 import Image from "next/image";
 import { useState } from "react";
 
-import Link from "@/components/Link";
 import wordmark from "@/public/wordmark/wordmark-white.svg";
 import { displayMobileOnly } from "@/styles/responsive";
 import { analytics } from "@/utils/analytics";
 
+import UserMenu from "./AccountMenu";
 import Brand from "./Brand";
 
 export default function Mobile({
@@ -82,28 +80,10 @@ export default function Mobile({
           color="inherit"
           onClick={handleMenuToggle}
         >
-          {menuIsOpen ? <Close /> : <Menu />}
+          {menuIsOpen ? <Close /> : <MenuIcon />}
         </IconButton>
         <Brand onClick={onBrandClick} />
-        <Link
-          href="/join"
-          title="Join Orcasound"
-          sx={{
-            marginLeft: "auto",
-            paddingLeft: 1,
-          }}
-        >
-          <Button
-            variant="contained"
-            startIcon={<Person />}
-            color="primary"
-            sx={{
-              borderRadius: 8,
-            }}
-          >
-            Join
-          </Button>
-        </Link>
+        <UserMenu sx={{ marginLeft: "auto", paddingLeft: 1 }} />
       </Box>
       <nav>
         <Drawer
diff --git a/ui/src/graphql/generated/index.ts b/ui/src/graphql/generated/index.ts
index 3ac0de92..d15ad761 100644
--- a/ui/src/graphql/generated/index.ts
+++ b/ui/src/graphql/generated/index.ts
@@ -2495,6 +2495,7 @@ export type GetCurrentUserQuery = {
     id: string;
     firstName?: string | null;
     lastName?: string | null;
+    username?: string | null;
     email: string;
     admin: boolean;
     moderator: boolean;
@@ -3399,6 +3400,7 @@ export const GetCurrentUserDocument = `
     id
     firstName
     lastName
+    username
     email
     admin
     moderator
diff --git a/ui/src/graphql/queries/getCurrentUser.graphql b/ui/src/graphql/queries/getCurrentUser.graphql
index 8a5ddbad..ccac9d0e 100644
--- a/ui/src/graphql/queries/getCurrentUser.graphql
+++ b/ui/src/graphql/queries/getCurrentUser.graphql
@@ -3,6 +3,7 @@ query getCurrentUser {
     id
     firstName
     lastName
+    username
     email
     admin
     moderator

From f07c57eda432ea2225ec8bdd3941cae9c1523eac Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Fri, 10 Jan 2025 17:09:15 +0000
Subject: [PATCH 20/22] Add login functionality and refactor form components
 for better structure

---
 .../modules/join/components/AccountStep.tsx   | 11 ++-
 .../modules/join/components/FormActions.tsx   | 10 +-
 ui/src/modules/join/components/LoginStep.tsx  | 97 +++++++++++++++++++
 .../join/components/PreferencesStep.tsx       |  7 +-
 .../modules/join/components/ProfileStep.tsx   |  7 +-
 ui/src/modules/join/index.ts                  |  1 +
 ui/src/modules/join/styles.ts                 | 25 +++++
 ui/src/pages/login.tsx                        | 40 ++++++++
 8 files changed, 188 insertions(+), 10 deletions(-)
 create mode 100644 ui/src/modules/join/components/LoginStep.tsx
 create mode 100644 ui/src/modules/join/styles.ts
 create mode 100644 ui/src/pages/login.tsx

diff --git a/ui/src/modules/join/components/AccountStep.tsx b/ui/src/modules/join/components/AccountStep.tsx
index 21cf2dde..7e2eafaf 100644
--- a/ui/src/modules/join/components/AccountStep.tsx
+++ b/ui/src/modules/join/components/AccountStep.tsx
@@ -7,6 +7,7 @@ import { z } from "zod";
 import { MutationError } from "@/graphql/generated";
 import { useAuth } from "@/hooks/useAuth";
 
+import { FormActionLink, FormContainer } from "../styles";
 import {
   createFormSubmitHandler,
   getFieldErrorProps,
@@ -69,7 +70,7 @@ export const AccountStep = ({ onSuccess }: AccountStepProps) => {
       noValidate
       name="account"
     >
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+      <FormContainer>
         <TextField
           {...register("email")}
           label="Email"
@@ -87,7 +88,13 @@ export const AccountStep = ({ onSuccess }: AccountStepProps) => {
         />
 
         <FormActions submitText="Create account" />
-      </Box>
+
+        <Box sx={{ display: "flex", justifyContent: "center" }}>
+          <FormActionLink href="/login">
+            Already have an account?
+          </FormActionLink>
+        </Box>
+      </FormContainer>
     </form>
   );
 };
diff --git a/ui/src/modules/join/components/FormActions.tsx b/ui/src/modules/join/components/FormActions.tsx
index 380b5930..6efd8e6b 100644
--- a/ui/src/modules/join/components/FormActions.tsx
+++ b/ui/src/modules/join/components/FormActions.tsx
@@ -11,13 +11,19 @@ export const FormActions = ({
   submitText = "Continue",
   skipText = "Skip for now",
 }: FormActionsProps) => (
-  <Box sx={{ display: "flex", gap: 2, mt: 2 }}>
+  <Box sx={{ display: "flex", gap: 1 }}>
     {onSkip && (
       <Button variant="outlined" onClick={onSkip} fullWidth>
         {skipText}
       </Button>
     )}
-    <Button type="submit" variant="contained" color="primary" fullWidth>
+    <Button
+      type="submit"
+      variant="contained"
+      color="primary"
+      size="large"
+      fullWidth
+    >
       {submitText}
     </Button>
   </Box>
diff --git a/ui/src/modules/join/components/LoginStep.tsx b/ui/src/modules/join/components/LoginStep.tsx
new file mode 100644
index 00000000..53c4ff37
--- /dev/null
+++ b/ui/src/modules/join/components/LoginStep.tsx
@@ -0,0 +1,97 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Box, TextField } from "@mui/material";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { MutationError } from "@/graphql/generated";
+import { useAuth } from "@/hooks/useAuth";
+
+import { FormActionLink, FormContainer } from "../styles";
+import {
+  createFormSubmitHandler,
+  getFieldErrorProps,
+  StepFormProps,
+} from "../utils";
+import { FormActions } from "./FormActions";
+
+const loginSchema = z.object({
+  email: z.string().min(1, "Email is required").email("Invalid email address"),
+  password: z.string().min(1, "Password is required"),
+});
+
+type LoginFormInputs = z.infer<typeof loginSchema>;
+
+const useLoginForm = (onSuccess: () => void) => {
+  const [errors, setErrors] = useState<MutationError[]>([]);
+  const form = useForm<LoginFormInputs>({
+    resolver: zodResolver(loginSchema),
+  });
+  const { signIn } = useAuth();
+
+  const onSubmit = async (data: LoginFormInputs) => {
+    try {
+      setErrors([]);
+      await signIn({
+        email: data.email,
+        password: data.password,
+      });
+      onSuccess();
+    } catch (errors) {
+      if (Array.isArray(errors)) {
+        setErrors(
+          errors.filter((error): error is MutationError => error !== null),
+        );
+      } else {
+        console.error("Login error:", errors);
+      }
+    }
+  };
+
+  return { form, errors, onSubmit };
+};
+
+type LoginStepProps = Omit<StepFormProps, "onSkip">;
+
+export const LoginStep = ({ onSuccess }: LoginStepProps) => {
+  const { form, errors, onSubmit } = useLoginForm(onSuccess);
+  const {
+    register,
+    formState: { errors: formErrors },
+  } = form;
+
+  return (
+    <form
+      onSubmit={createFormSubmitHandler(form, onSubmit)}
+      noValidate
+      name="login"
+    >
+      <FormContainer>
+        <TextField
+          {...register("email")}
+          label="Email"
+          type="email"
+          fullWidth
+          {...getFieldErrorProps("email", formErrors.email, errors)}
+        />
+
+        <TextField
+          {...register("password")}
+          label="Password"
+          type="password"
+          fullWidth
+          {...getFieldErrorProps("password", formErrors.password, errors)}
+        />
+
+        <FormActions submitText="Log in" />
+
+        <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+          <FormActionLink href="/password-reset">
+            Forgot your password?
+          </FormActionLink>
+          <FormActionLink href="/join">Need an account?</FormActionLink>
+        </Box>
+      </FormContainer>
+    </form>
+  );
+};
diff --git a/ui/src/modules/join/components/PreferencesStep.tsx b/ui/src/modules/join/components/PreferencesStep.tsx
index 9c155489..2e19a28e 100644
--- a/ui/src/modules/join/components/PreferencesStep.tsx
+++ b/ui/src/modules/join/components/PreferencesStep.tsx
@@ -1,11 +1,12 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Box, FormControlLabel, Switch } from "@mui/material";
+import { FormControlLabel, Switch } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { useUpdateUserPreferencesMutation } from "@/graphql/generated";
 import { useAuth } from "@/hooks/useAuth";
 
+import { FormContainer } from "../styles";
 import { createFormSubmitHandler, StepFormProps } from "../utils";
 import { FormActions } from "./FormActions";
 
@@ -57,7 +58,7 @@ export const PreferencesStep = ({ onSuccess, onSkip }: StepFormProps) => {
 
   return (
     <form onSubmit={createFormSubmitHandler(form, onSubmit)} name="preferences">
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+      <FormContainer>
         <FormControlLabel
           control={<Switch {...register("liveNotifications")} />}
           label="Notify me when orcas are detected live"
@@ -79,7 +80,7 @@ export const PreferencesStep = ({ onSuccess, onSkip }: StepFormProps) => {
         />
 
         <FormActions onSkip={onSkip} submitText="Complete setup" />
-      </Box>
+      </FormContainer>
     </form>
   );
 };
diff --git a/ui/src/modules/join/components/ProfileStep.tsx b/ui/src/modules/join/components/ProfileStep.tsx
index c5a33b52..c8e056f6 100644
--- a/ui/src/modules/join/components/ProfileStep.tsx
+++ b/ui/src/modules/join/components/ProfileStep.tsx
@@ -1,11 +1,12 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Box, Checkbox, FormControlLabel, TextField } from "@mui/material";
+import { Checkbox, FormControlLabel, TextField } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { useUpdateUserProfileMutation } from "@/graphql/generated";
 import { useAuth } from "@/hooks/useAuth";
 
+import { FormContainer } from "../styles";
 import {
   createFormSubmitHandler,
   getFieldErrorProps,
@@ -79,7 +80,7 @@ export const ProfileStep = ({ onSuccess, onSkip }: StepFormProps) => {
 
   return (
     <form onSubmit={createFormSubmitHandler(form, onSubmit)} name="profile">
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+      <FormContainer>
         <TextField
           {...register("username")}
           label="Username"
@@ -123,7 +124,7 @@ export const ProfileStep = ({ onSuccess, onSkip }: StepFormProps) => {
         )}
 
         <FormActions onSkip={onSkip} />
-      </Box>
+      </FormContainer>
     </form>
   );
 };
diff --git a/ui/src/modules/join/index.ts b/ui/src/modules/join/index.ts
index f5cf98d5..bed07f81 100644
--- a/ui/src/modules/join/index.ts
+++ b/ui/src/modules/join/index.ts
@@ -1,5 +1,6 @@
 // Components
 export { AccountStep } from "./components/AccountStep";
+export { LoginStep } from "./components/LoginStep";
 export { PreferencesStep } from "./components/PreferencesStep";
 export { ProfileStep } from "./components/ProfileStep";
 export { StepLayout } from "./components/StepLayout";
diff --git a/ui/src/modules/join/styles.ts b/ui/src/modules/join/styles.ts
new file mode 100644
index 00000000..ed48ffd7
--- /dev/null
+++ b/ui/src/modules/join/styles.ts
@@ -0,0 +1,25 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+import Link from "@/components/Link";
+
+export const FormContainer = styled(Box)(({ theme }) => ({
+  maxWidth: 400,
+  marginLeft: "auto",
+  marginRight: "auto",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+}));
+
+export const FormActionLink = styled(Link)(({ theme }) => ({
+  color: theme.palette.primary.main,
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline",
+  },
+}));
+
+FormActionLink.defaultProps = {
+  variant: "body2",
+};
diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx
new file mode 100644
index 00000000..5fbdbbf1
--- /dev/null
+++ b/ui/src/pages/login.tsx
@@ -0,0 +1,40 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+import { getMapLayout } from "@/components/layouts/MapLayout";
+import { useAuth } from "@/hooks/useAuth";
+import { LoginStep, StepLayout } from "@/modules/join";
+import type { NextPageWithLayout } from "@/pages/_app";
+
+const LoginPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const { user, isLoadingUser } = useAuth();
+
+  useEffect(() => {
+    if (!router.isReady) return;
+    if (isLoadingUser) return;
+
+    // Redirect logged in users to home page
+    if (user) router.replace("/");
+  }, [user, router, isLoadingUser]);
+
+  if (isLoadingUser) {
+    return <div>Loading...</div>;
+  }
+
+  if (user) return null;
+
+  return (
+    <StepLayout
+      pageTitle="Welcome Back"
+      title="Sign in to your account"
+      description="Continue your journey with the Orcasound community"
+    >
+      <LoginStep onSuccess={() => router.push("/")} />
+    </StepLayout>
+  );
+};
+
+LoginPage.getLayout = getMapLayout;
+
+export default LoginPage;

From 3d6e5ed54ff4d407ebbb57d302770f416bb86f69 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Tue, 4 Feb 2025 08:12:13 +0000
Subject: [PATCH 21/22] Refactor join flow components to add error handling

---
 server/lib/orcasite/accounts/user.ex          | 16 +++--
 .../orcasite_web/graphql/types/accounts.ex    |  4 +-
 ui/src/components/Header/AccountMenu.tsx      |  4 +-
 ui/src/graphql/generated/index.ts             | 12 ++--
 ui/src/hooks/useAuth.ts                       | 65 +++++--------------
 .../modules/join/components/AccountStep.tsx   | 37 ++++++-----
 ui/src/modules/join/components/LoginStep.tsx  | 37 ++++++-----
 .../join/components/PreferencesStep.tsx       | 55 +++++++++++-----
 .../modules/join/components/ProfileStep.tsx   | 46 +++++++++----
 .../modules/join/components/SuccessStep.tsx   |  2 +-
 ui/src/pages/join.tsx                         |  4 +-
 11 files changed, 157 insertions(+), 125 deletions(-)

diff --git a/server/lib/orcasite/accounts/user.ex b/server/lib/orcasite/accounts/user.ex
index d9ce684d..8f744c0a 100644
--- a/server/lib/orcasite/accounts/user.ex
+++ b/server/lib/orcasite/accounts/user.ex
@@ -189,10 +189,16 @@ defmodule Orcasite.Accounts.User do
     end
   end
 
-  def after_registration(resolution, _query, {:ok, user}) do
-    resolution
-    |> Map.update!(:context, fn ctx ->
-      Map.put(ctx, :current_user, user)
-    end)
+  def after_registration(resolution, _query, result) do
+    result
+    |> case do
+      {:ok, user} ->
+        resolution
+        |> Map.update!(:context, fn ctx ->
+          Map.put(ctx, :current_user, user)
+        end)
+      _ ->
+        resolution
+    end
   end
 end
diff --git a/server/lib/orcasite_web/graphql/types/accounts.ex b/server/lib/orcasite_web/graphql/types/accounts.ex
index d001893f..79c32023 100644
--- a/server/lib/orcasite_web/graphql/types/accounts.ex
+++ b/server/lib/orcasite_web/graphql/types/accounts.ex
@@ -10,7 +10,7 @@ defmodule OrcasiteWeb.Graphql.Types.Accounts do
 
   object :sign_in_with_password_result do
     field :user, :user
-    field :errors, list_of(:mutation_error)
+    field :errors, non_null(list_of(non_null(:mutation_error)))
   end
 
   input_object :request_password_reset_input do
@@ -25,7 +25,7 @@ defmodule OrcasiteWeb.Graphql.Types.Accounts do
 
   object :password_reset_result do
     field :user, :user
-    field :errors, list_of(:mutation_error)
+    field :errors, non_null(list_of(non_null(:mutation_error)))
   end
 
   object :accounts_user_mutations do
diff --git a/ui/src/components/Header/AccountMenu.tsx b/ui/src/components/Header/AccountMenu.tsx
index 0a4a6c48..c412b3ae 100644
--- a/ui/src/components/Header/AccountMenu.tsx
+++ b/ui/src/components/Header/AccountMenu.tsx
@@ -10,6 +10,7 @@ import {
   Theme,
   Typography,
 } from "@mui/material";
+import router from "next/router";
 import { useState } from "react";
 
 import Link from "@/components/Link";
@@ -30,7 +31,8 @@ export default function AccountMenu({ sx }: { sx?: SxProps<Theme> }) {
 
   const handleSignOut = () => {
     handleClose();
-    signOut();
+    signOut({});
+    router.push("/");
   };
 
   if (!user) {
diff --git a/ui/src/graphql/generated/index.ts b/ui/src/graphql/generated/index.ts
index d15ad761..2c93eb9d 100644
--- a/ui/src/graphql/generated/index.ts
+++ b/ui/src/graphql/generated/index.ts
@@ -1703,7 +1703,7 @@ export type PasswordResetInput = {
 
 export type PasswordResetResult = {
   __typename?: "PasswordResetResult";
-  errors?: Maybe<Array<Maybe<MutationError>>>;
+  errors: Array<MutationError>;
   user?: Maybe<User>;
 };
 
@@ -1916,7 +1916,7 @@ export type SignInWithPasswordInput = {
 
 export type SignInWithPasswordResult = {
   __typename?: "SignInWithPasswordResult";
-  errors?: Maybe<Array<Maybe<MutationError>>>;
+  errors: Array<MutationError>;
   user?: Maybe<User>;
 };
 
@@ -2287,14 +2287,14 @@ export type ResetPasswordMutation = {
   __typename?: "RootMutationType";
   resetPassword?: {
     __typename?: "PasswordResetResult";
-    errors?: Array<{
+    errors: Array<{
       __typename?: "MutationError";
       code?: string | null;
       fields?: Array<string> | null;
       message?: string | null;
       shortMessage?: string | null;
       vars?: { [key: string]: any } | null;
-    } | null> | null;
+    }>;
     user?: {
       __typename?: "User";
       id: string;
@@ -2348,14 +2348,14 @@ export type SignInWithPasswordMutation = {
       firstName?: string | null;
       lastName?: string | null;
     } | null;
-    errors?: Array<{
+    errors: Array<{
       __typename?: "MutationError";
       message?: string | null;
       code?: string | null;
       fields?: Array<string> | null;
       shortMessage?: string | null;
       vars?: { [key: string]: any } | null;
-    } | null> | null;
+    }>;
   } | null;
 };
 
diff --git a/ui/src/hooks/useAuth.ts b/ui/src/hooks/useAuth.ts
index b67304bb..2ed63ee2 100644
--- a/ui/src/hooks/useAuth.ts
+++ b/ui/src/hooks/useAuth.ts
@@ -1,6 +1,4 @@
 import { useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
-import { useCallback } from "react";
 
 import {
   useGetCurrentUserQuery,
@@ -9,59 +7,30 @@ import {
   useSignOutMutation,
 } from "@/graphql/generated";
 
-type SignInParams = {
-  email: string;
-  password: string;
-};
-
-type RegisterParams = {
-  email: string;
-  password: string;
-  passwordConfirmation: string;
-  firstName?: string;
-  lastName?: string;
-};
-
 export function useAuth() {
-  const router = useRouter();
   const queryClient = useQueryClient();
 
   const { data: { currentUser } = {}, isLoading: isLoadingUser } =
     useGetCurrentUserQuery();
-  const { mutateAsync: signInMutation } = useSignInWithPasswordMutation();
-  const { mutateAsync: signOutMutation } = useSignOutMutation();
-  const { mutateAsync: registerMutation } = useRegisterWithPasswordMutation();
-
-  const refreshSession = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ["getCurrentUser"] });
-  }, [queryClient]);
-
-  const signIn = useCallback(
-    async (params: SignInParams) => {
-      const { signInWithPassword } = await signInMutation(params);
-      if (signInWithPassword?.errors) throw signInWithPassword.errors;
-      refreshSession();
-      return signInWithPassword?.user;
+  const { mutate: signIn } = useSignInWithPasswordMutation({
+    onSuccess: ({ signInWithPassword }) => {
+      queryClient.setQueryData(useGetCurrentUserQuery.getKey(), {
+        currentUser: signInWithPassword?.user,
+      });
     },
-    [signInMutation, refreshSession],
-  );
-
-  const signOut = useCallback(async () => {
-    await signOutMutation({});
-    queryClient.removeQueries();
-    router.push("/");
-  }, [signOutMutation, queryClient, router]);
-
-  const register = useCallback(
-    async (params: RegisterParams) => {
-      const { registerWithPassword } = await registerMutation(params);
-      if (registerWithPassword.errors.length > 0)
-        throw registerWithPassword.errors;
-      refreshSession();
-      return registerWithPassword.result;
+  });
+  const { mutate: signOut } = useSignOutMutation({
+    onSuccess: () => {
+      queryClient.removeQueries({ queryKey: useGetCurrentUserQuery.getKey() });
+    },
+  });
+  const { mutate: register } = useRegisterWithPasswordMutation({
+    onSuccess: ({ registerWithPassword }) => {
+      queryClient.setQueryData(useGetCurrentUserQuery.getKey(), {
+        currentUser: registerWithPassword?.result,
+      });
     },
-    [registerMutation, refreshSession],
-  );
+  });
 
   return {
     user: currentUser,
diff --git a/ui/src/modules/join/components/AccountStep.tsx b/ui/src/modules/join/components/AccountStep.tsx
index 7e2eafaf..29a8e64c 100644
--- a/ui/src/modules/join/components/AccountStep.tsx
+++ b/ui/src/modules/join/components/AccountStep.tsx
@@ -32,24 +32,31 @@ const useAccountForm = (onSuccess: () => void) => {
   });
   const { register: registerUser } = useAuth();
 
-  const onSubmit = async (data: AccountFormInputs) => {
-    try {
-      setErrors([]);
-      await registerUser({
+  const onSubmit = (data: AccountFormInputs) => {
+    setErrors([]);
+    registerUser(
+      {
         email: data.email,
         password: data.password,
         passwordConfirmation: data.password,
-      });
-      onSuccess();
-    } catch (errors) {
-      if (Array.isArray(errors)) {
-        setErrors(
-          errors.filter((error): error is MutationError => error !== null),
-        );
-      } else {
-        console.error("Register error:", errors);
-      }
-    }
+      },
+      {
+        onSuccess: (data) => {
+          const { registerWithPassword } = data;
+          if (registerWithPassword?.result) {
+            onSuccess();
+          } else if (registerWithPassword?.errors?.length) {
+            setErrors(registerWithPassword.errors);
+          } else {
+            setErrors([{ message: "An unknown error occurred" }]);
+          }
+        },
+        onError: (error) => {
+          console.error("register error:", error);
+          setErrors([{ message: "An unknown error occurred" }]);
+        },
+      },
+    );
   };
 
   return { form, errors, onSubmit };
diff --git a/ui/src/modules/join/components/LoginStep.tsx b/ui/src/modules/join/components/LoginStep.tsx
index 53c4ff37..85887c7f 100644
--- a/ui/src/modules/join/components/LoginStep.tsx
+++ b/ui/src/modules/join/components/LoginStep.tsx
@@ -29,23 +29,30 @@ const useLoginForm = (onSuccess: () => void) => {
   });
   const { signIn } = useAuth();
 
-  const onSubmit = async (data: LoginFormInputs) => {
-    try {
-      setErrors([]);
-      await signIn({
+  const onSubmit = (data: LoginFormInputs) => {
+    setErrors([]);
+    signIn(
+      {
         email: data.email,
         password: data.password,
-      });
-      onSuccess();
-    } catch (errors) {
-      if (Array.isArray(errors)) {
-        setErrors(
-          errors.filter((error): error is MutationError => error !== null),
-        );
-      } else {
-        console.error("Login error:", errors);
-      }
-    }
+      },
+      {
+        onSuccess: (data) => {
+          const { signInWithPassword } = data;
+          if (signInWithPassword?.user) {
+            onSuccess();
+          } else if (signInWithPassword?.errors?.length) {
+            setErrors(signInWithPassword.errors);
+          } else {
+            setErrors([{ message: "An unknown error occurred" }]);
+          }
+        },
+        onError: (error) => {
+          console.error("login error:", error);
+          setErrors([{ message: "An unknown error occurred" }]);
+        },
+      },
+    );
   };
 
   return { form, errors, onSubmit };
diff --git a/ui/src/modules/join/components/PreferencesStep.tsx b/ui/src/modules/join/components/PreferencesStep.tsx
index 2e19a28e..5d283685 100644
--- a/ui/src/modules/join/components/PreferencesStep.tsx
+++ b/ui/src/modules/join/components/PreferencesStep.tsx
@@ -1,9 +1,13 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FormControlLabel, Switch } from "@mui/material";
+import { Alert, FormControlLabel, Switch } from "@mui/material";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { useUpdateUserPreferencesMutation } from "@/graphql/generated";
+import {
+  MutationError,
+  useUpdateUserPreferencesMutation,
+} from "@/graphql/generated";
 import { useAuth } from "@/hooks/useAuth";
 
 import { FormContainer } from "../styles";
@@ -20,6 +24,7 @@ const preferencesSchema = z.object({
 type PreferencesFormInputs = z.infer<typeof preferencesSchema>;
 
 const usePreferencesForm = (onSuccess: () => void) => {
+  const [errors, setErrors] = useState<MutationError[]>([]);
   const { user } = useAuth();
 
   const form = useForm<PreferencesFormInputs>({
@@ -32,33 +37,51 @@ const usePreferencesForm = (onSuccess: () => void) => {
     },
   });
 
-  const updatePreferences = useUpdateUserPreferencesMutation({
-    onSuccess: ({ updateUserPreferences }) => {
-      if (updateUserPreferences?.result) {
-        onSuccess();
-      }
-    },
-  });
+  const updatePreferences = useUpdateUserPreferencesMutation();
 
   const onSubmit = (data: PreferencesFormInputs) => {
     if (!user) return;
-
-    updatePreferences.mutate({
-      id: user.id,
-      ...data,
-    });
+    setErrors([]);
+
+    updatePreferences.mutate(
+      {
+        id: user.id,
+        ...data,
+      },
+      {
+        onSuccess: (data) => {
+          const { updateUserPreferences } = data;
+          if (updateUserPreferences?.result) {
+            onSuccess();
+          } else if (updateUserPreferences?.errors?.length) {
+            setErrors(updateUserPreferences.errors);
+          } else {
+            setErrors([{ message: "An unknown error occurred" }]);
+          }
+        },
+        onError: (error) => {
+          console.error("updatePreferences error:", error);
+          setErrors([{ message: "An unknown error occurred" }]);
+        },
+      },
+    );
   };
 
-  return { form, onSubmit };
+  return { form, onSubmit, errors };
 };
 
 export const PreferencesStep = ({ onSuccess, onSkip }: StepFormProps) => {
-  const { form, onSubmit } = usePreferencesForm(onSuccess);
+  const { form, onSubmit, errors } = usePreferencesForm(onSuccess);
   const { register } = form;
 
   return (
     <form onSubmit={createFormSubmitHandler(form, onSubmit)} name="preferences">
       <FormContainer>
+        {errors?.length > 0 && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {errors[0].message}
+          </Alert>
+        )}
         <FormControlLabel
           control={<Switch {...register("liveNotifications")} />}
           label="Notify me when orcas are detected live"
diff --git a/ui/src/modules/join/components/ProfileStep.tsx b/ui/src/modules/join/components/ProfileStep.tsx
index c8e056f6..932598d0 100644
--- a/ui/src/modules/join/components/ProfileStep.tsx
+++ b/ui/src/modules/join/components/ProfileStep.tsx
@@ -1,9 +1,13 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Checkbox, FormControlLabel, TextField } from "@mui/material";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { useUpdateUserProfileMutation } from "@/graphql/generated";
+import {
+  MutationError,
+  useUpdateUserProfileMutation,
+} from "@/graphql/generated";
 import { useAuth } from "@/hooks/useAuth";
 
 import { FormContainer } from "../styles";
@@ -25,6 +29,7 @@ const profileSchema = z.object({
 type ProfileFormInputs = z.infer<typeof profileSchema>;
 
 const useProfileForm = (onSuccess: () => void) => {
+  const [errors, setErrors] = useState<MutationError[]>([]);
   const { user } = useAuth();
 
   const form = useForm<ProfileFormInputs>({
@@ -34,27 +39,40 @@ const useProfileForm = (onSuccess: () => void) => {
     },
   });
 
-  const updateProfile = useUpdateUserProfileMutation({
-    onSuccess: ({ updateUserProfile }) => {
-      if (updateUserProfile?.result) {
-        onSuccess();
-      }
-    },
-  });
+  const updateProfile = useUpdateUserProfileMutation();
 
   const onSubmit = (data: ProfileFormInputs) => {
     if (!user) return;
-
-    updateProfile.mutate({
-      id: user.id,
-      ...data,
-    });
+    setErrors([]);
+
+    updateProfile.mutate(
+      {
+        id: user.id,
+        ...data,
+      },
+      {
+        onSuccess: (data) => {
+          const { updateUserProfile } = data;
+          if (updateUserProfile?.result) {
+            onSuccess();
+          } else if (updateUserProfile?.errors?.length) {
+            setErrors(updateUserProfile.errors);
+          } else {
+            setErrors([{ message: "An unknown error occurred" }]);
+          }
+        },
+        onError: (error) => {
+          console.error("updateProfile error:", error);
+          setErrors([{ message: "An unknown error occurred" }]);
+        },
+      },
+    );
   };
 
   return {
     form,
     onSubmit,
-    errors: updateProfile.data?.updateUserProfile?.errors,
+    errors,
   };
 };
 
diff --git a/ui/src/modules/join/components/SuccessStep.tsx b/ui/src/modules/join/components/SuccessStep.tsx
index a3901b33..553160fd 100644
--- a/ui/src/modules/join/components/SuccessStep.tsx
+++ b/ui/src/modules/join/components/SuccessStep.tsx
@@ -1,5 +1,5 @@
 import { Box, Button } from "@mui/material";
-import { useRouter } from "next/navigation";
+import { useRouter } from "next/router";
 
 export const SuccessStep = () => {
   const router = useRouter();
diff --git a/ui/src/pages/join.tsx b/ui/src/pages/join.tsx
index d81830dd..d3e5a86d 100644
--- a/ui/src/pages/join.tsx
+++ b/ui/src/pages/join.tsx
@@ -56,8 +56,8 @@ const JoinPage: NextPageWithLayout = () => {
     if (!router.isReady) return;
     if (isLoadingUser) return;
 
-    // Start the join flow if the user is not logged in
-    if (!user && !step) setStep("account");
+    // Start the join flow if the user is not logged in & the flow hasn't been started
+    if (!user && step !== "account") setStep("account");
     // Logged in users should not be able to access the join page, so redirect
     else if (user && !step) router.replace("/");
     // Unless they're trying to directly access a step (but skip the account creation step)

From 9f19b23a1479c4416288ee932b7514a332b362e2 Mon Sep 17 00:00:00 2001
From: Paul Cretu <paul.s.cretu@gmail.com>
Date: Tue, 4 Feb 2025 09:08:22 +0000
Subject: [PATCH 22/22] Add query cache updates for mutations

---
 server/lib/orcasite/accounts/user.ex          |  4 ++
 ui/src/graphql/generated/index.ts             | 56 +++++++++++++++----
 .../mutations/registerWithPassword.graphql    | 12 +++-
 .../mutations/signInWithPassword.graphql      | 11 +++-
 ui/src/graphql/queries/getCurrentUser.graphql |  5 ++
 ui/src/hooks/useAuth.ts                       | 22 ++++++--
 .../join/components/PreferencesStep.tsx       | 13 +++++
 .../modules/join/components/ProfileStep.tsx   | 13 +++++
 8 files changed, 115 insertions(+), 21 deletions(-)

diff --git a/server/lib/orcasite/accounts/user.ex b/server/lib/orcasite/accounts/user.ex
index 8f744c0a..43d52970 100644
--- a/server/lib/orcasite/accounts/user.ex
+++ b/server/lib/orcasite/accounts/user.ex
@@ -81,6 +81,10 @@ defmodule Orcasite.Accounts.User do
     bypass AshAuthentication.Checks.AshAuthenticationInteraction do
       authorize_if always()
     end
+    
+    policy action_type(:read) do
+      authorize_if expr(id == ^actor(:id))
+    end
 
     policy action(:current_user) do
       authorize_if always()
diff --git a/ui/src/graphql/generated/index.ts b/ui/src/graphql/generated/index.ts
index 2c93eb9d..a4272284 100644
--- a/ui/src/graphql/generated/index.ts
+++ b/ui/src/graphql/generated/index.ts
@@ -2251,11 +2251,17 @@ export type RegisterWithPasswordMutation = {
     result?: {
       __typename?: "User";
       id: string;
-      email: string;
-      username?: string | null;
-      admin: boolean;
       firstName?: string | null;
       lastName?: string | null;
+      username?: string | null;
+      email: string;
+      admin: boolean;
+      moderator: boolean;
+      isScientist: boolean;
+      organization?: string | null;
+      newsletter: boolean;
+      volunteering: boolean;
+      userTesting: boolean;
     } | null;
     errors: Array<{
       __typename?: "MutationError";
@@ -2343,10 +2349,17 @@ export type SignInWithPasswordMutation = {
     user?: {
       __typename?: "User";
       id: string;
-      email: string;
-      admin: boolean;
       firstName?: string | null;
       lastName?: string | null;
+      username?: string | null;
+      email: string;
+      admin: boolean;
+      moderator: boolean;
+      isScientist: boolean;
+      organization?: string | null;
+      newsletter: boolean;
+      volunteering: boolean;
+      userTesting: boolean;
     } | null;
     errors: Array<{
       __typename?: "MutationError";
@@ -2499,6 +2512,11 @@ export type GetCurrentUserQuery = {
     email: string;
     admin: boolean;
     moderator: boolean;
+    isScientist: boolean;
+    organization?: string | null;
+    newsletter: boolean;
+    volunteering: boolean;
+    userTesting: boolean;
   } | null;
 };
 
@@ -2832,11 +2850,17 @@ export const RegisterWithPasswordDocument = `
   ) {
     result {
       id
-      email
-      username
-      admin
       firstName
       lastName
+      username
+      email
+      admin
+      moderator
+      isScientist
+      organization
+      newsletter
+      volunteering
+      userTesting
     }
     errors {
       message
@@ -3054,10 +3078,17 @@ export const SignInWithPasswordDocument = `
   signInWithPassword(input: {email: $email, password: $password}) {
     user {
       id
-      email
-      admin
       firstName
       lastName
+      username
+      email
+      admin
+      moderator
+      isScientist
+      organization
+      newsletter
+      volunteering
+      userTesting
     }
     errors {
       message
@@ -3404,6 +3435,11 @@ export const GetCurrentUserDocument = `
     email
     admin
     moderator
+    isScientist
+    organization
+    newsletter
+    volunteering
+    userTesting
   }
 }
     `;
diff --git a/ui/src/graphql/mutations/registerWithPassword.graphql b/ui/src/graphql/mutations/registerWithPassword.graphql
index 08171f3f..d0e814c1 100644
--- a/ui/src/graphql/mutations/registerWithPassword.graphql
+++ b/ui/src/graphql/mutations/registerWithPassword.graphql
@@ -18,11 +18,17 @@ mutation registerWithPassword(
   ) {
     result {
       id
-      email
-      username
-      admin
       firstName
       lastName
+      username
+      email
+      admin
+      moderator
+      isScientist
+      organization
+      newsletter
+      volunteering
+      userTesting
     }
 
     errors {
diff --git a/ui/src/graphql/mutations/signInWithPassword.graphql b/ui/src/graphql/mutations/signInWithPassword.graphql
index 2ee0949e..3d8727ed 100644
--- a/ui/src/graphql/mutations/signInWithPassword.graphql
+++ b/ui/src/graphql/mutations/signInWithPassword.graphql
@@ -2,10 +2,17 @@ mutation signInWithPassword($email: String!, $password: String!) {
   signInWithPassword(input: { email: $email, password: $password }) {
     user {
       id
-      email
-      admin
       firstName
       lastName
+      username
+      email
+      admin
+      moderator
+      isScientist
+      organization
+      newsletter
+      volunteering
+      userTesting
     }
     errors {
       message
diff --git a/ui/src/graphql/queries/getCurrentUser.graphql b/ui/src/graphql/queries/getCurrentUser.graphql
index ccac9d0e..a33e23c5 100644
--- a/ui/src/graphql/queries/getCurrentUser.graphql
+++ b/ui/src/graphql/queries/getCurrentUser.graphql
@@ -7,5 +7,10 @@ query getCurrentUser {
     email
     admin
     moderator
+    isScientist
+    organization
+    newsletter
+    volunteering
+    userTesting
   }
 }
diff --git a/ui/src/hooks/useAuth.ts b/ui/src/hooks/useAuth.ts
index 2ed63ee2..2deb2106 100644
--- a/ui/src/hooks/useAuth.ts
+++ b/ui/src/hooks/useAuth.ts
@@ -1,6 +1,7 @@
 import { useQueryClient } from "@tanstack/react-query";
 
 import {
+  GetCurrentUserQuery,
   useGetCurrentUserQuery,
   useRegisterWithPasswordMutation,
   useSignInWithPasswordMutation,
@@ -12,23 +13,32 @@ export function useAuth() {
 
   const { data: { currentUser } = {}, isLoading: isLoadingUser } =
     useGetCurrentUserQuery();
+
   const { mutate: signIn } = useSignInWithPasswordMutation({
     onSuccess: ({ signInWithPassword }) => {
-      queryClient.setQueryData(useGetCurrentUserQuery.getKey(), {
-        currentUser: signInWithPassword?.user,
-      });
+      queryClient.setQueryData<GetCurrentUserQuery>(
+        useGetCurrentUserQuery.getKey(),
+        {
+          currentUser: signInWithPassword?.user,
+        },
+      );
     },
   });
+
   const { mutate: signOut } = useSignOutMutation({
     onSuccess: () => {
       queryClient.removeQueries({ queryKey: useGetCurrentUserQuery.getKey() });
     },
   });
+
   const { mutate: register } = useRegisterWithPasswordMutation({
     onSuccess: ({ registerWithPassword }) => {
-      queryClient.setQueryData(useGetCurrentUserQuery.getKey(), {
-        currentUser: registerWithPassword?.result,
-      });
+      queryClient.setQueryData<GetCurrentUserQuery>(
+        useGetCurrentUserQuery.getKey(),
+        {
+          currentUser: registerWithPassword?.result,
+        },
+      );
     },
   });
 
diff --git a/ui/src/modules/join/components/PreferencesStep.tsx b/ui/src/modules/join/components/PreferencesStep.tsx
index 5d283685..766a53d1 100644
--- a/ui/src/modules/join/components/PreferencesStep.tsx
+++ b/ui/src/modules/join/components/PreferencesStep.tsx
@@ -1,11 +1,14 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Alert, FormControlLabel, Switch } from "@mui/material";
+import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import {
+  GetCurrentUserQuery,
   MutationError,
+  useGetCurrentUserQuery,
   useUpdateUserPreferencesMutation,
 } from "@/graphql/generated";
 import { useAuth } from "@/hooks/useAuth";
@@ -26,6 +29,7 @@ type PreferencesFormInputs = z.infer<typeof preferencesSchema>;
 const usePreferencesForm = (onSuccess: () => void) => {
   const [errors, setErrors] = useState<MutationError[]>([]);
   const { user } = useAuth();
+  const queryClient = useQueryClient();
 
   const form = useForm<PreferencesFormInputs>({
     resolver: zodResolver(preferencesSchema),
@@ -52,6 +56,15 @@ const usePreferencesForm = (onSuccess: () => void) => {
         onSuccess: (data) => {
           const { updateUserPreferences } = data;
           if (updateUserPreferences?.result) {
+            queryClient.setQueryData<GetCurrentUserQuery>(
+              useGetCurrentUserQuery.getKey(),
+              {
+                currentUser: {
+                  ...user,
+                  ...updateUserPreferences.result,
+                },
+              },
+            );
             onSuccess();
           } else if (updateUserPreferences?.errors?.length) {
             setErrors(updateUserPreferences.errors);
diff --git a/ui/src/modules/join/components/ProfileStep.tsx b/ui/src/modules/join/components/ProfileStep.tsx
index 932598d0..ce63ed5e 100644
--- a/ui/src/modules/join/components/ProfileStep.tsx
+++ b/ui/src/modules/join/components/ProfileStep.tsx
@@ -1,11 +1,14 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Checkbox, FormControlLabel, TextField } from "@mui/material";
+import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import {
+  GetCurrentUserQuery,
   MutationError,
+  useGetCurrentUserQuery,
   useUpdateUserProfileMutation,
 } from "@/graphql/generated";
 import { useAuth } from "@/hooks/useAuth";
@@ -31,6 +34,7 @@ type ProfileFormInputs = z.infer<typeof profileSchema>;
 const useProfileForm = (onSuccess: () => void) => {
   const [errors, setErrors] = useState<MutationError[]>([]);
   const { user } = useAuth();
+  const queryClient = useQueryClient();
 
   const form = useForm<ProfileFormInputs>({
     resolver: zodResolver(profileSchema),
@@ -54,6 +58,15 @@ const useProfileForm = (onSuccess: () => void) => {
         onSuccess: (data) => {
           const { updateUserProfile } = data;
           if (updateUserProfile?.result) {
+            queryClient.setQueryData<GetCurrentUserQuery>(
+              useGetCurrentUserQuery.getKey(),
+              {
+                currentUser: {
+                  ...user,
+                  ...updateUserProfile.result,
+                },
+              },
+            );
             onSuccess();
           } else if (updateUserProfile?.errors?.length) {
             setErrors(updateUserProfile.errors);