Add user registration UI

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,27 @@ 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
+      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
 
   code_interface do
@@ -115,6 +153,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
@@ -141,7 +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

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

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",

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>
+    </>
+  );
+}

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>
+  );
+}