feat: implement account adding form

client/package.json

@@ -20,6 +20,7 @@
     "@aspida/axios": "^1.14.0",
     "@aws-amplify/ui-react": "^6.3.0",
     "@aws-sdk/client-cognito-identity-provider": "^3.645.0",
+    "@fakerjs/word": "^1.0.1",
     "aspida": "^1.14.0",
     "aws-amplify": "^6.6.0",
     "axios": "^1.7.7",

client/pages/oauth2/authorize.module.css

@@ -0,0 +1,46 @@
+.container {
+  max-width: 500px;
+  padding: 32px 24px;
+  margin: 0 auto;
+}
+
+.btn {
+  padding: 6px 16px;
+  font-weight: bold;
+  color: blue;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+.inputLabel {
+  font-size: 14px;
+  color: #777;
+}
+
+.textInput {
+  width: 100%;
+  padding: 4px 8px;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}
+
+.textInput:focus {
+  outline-color: blue;
+}
+
+.submitBtn {
+  padding: 6px 16px;
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+  background: blue;
+  border: none;
+  border-radius: 6px;
+}
+
+.submitBtn:disabled {
+  cursor: not-allowed;
+  background: #aaa;
+}

client/pages/oauth2/authorize.page.tsx

@@ -1,16 +1,106 @@
 import type { OAuthConfig } from '@aws-amplify/core';
+import word from '@fakerjs/word';
+import type { MaybeId } from 'common/types/brandedId';
+import { Spacer } from 'components/Spacer';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { z } from 'zod';
+import styles from './authorize.module.css';
 
 export type Query = {
   redirect_uri: string;
   response_type: OAuthConfig['responseType'];
-  client_id: string;
+  client_id: MaybeId['userPoolClient'];
   identity_provider: OAuthConfig['providers'];
   scope: OAuthConfig['scopes'];
   state: string;
 };
 
+const AddAccount = (props: { onBack: () => void }) => {
+  const [email, setEmail] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [photoUrl, setPhotoUrl] = useState('');
+  const data = z
+    .object({
+      email: z.string().email(),
+      displayName: z.string(),
+      photoUrl: z.literal('').or(z.string().url().optional()),
+    })
+    .safeParse({ email, displayName, photoUrl });
+  const setFakeVals = () => {
+    const fakeWord = word({ length: 8 });
+
+    setEmail(`${fakeWord}@magnito.com`);
+    setDisplayName(fakeWord);
+  };
+
+  return (
+    <div>
+      <button className={styles.btn} onClick={setFakeVals}>
+        Auto-generate user information
+      </button>
+      <Spacer axis="y" size={20} />
+      <form>
+        <div className={styles.inputLabel}>Email</div>
+        <Spacer axis="y" size={4} />
+        <input
+          type="email"
+          className={styles.textInput}
+          value={email}
+          onChange={(e) => setEmail(e.currentTarget.value)}
+        />
+        <Spacer axis="y" size={16} />
+        <div className={styles.inputLabel}>Display name (optional)</div>
+        <Spacer axis="y" size={4} />
+        <input
+          type="text"
+          className={styles.textInput}
+          value={displayName}
+          onChange={(e) => setDisplayName(e.currentTarget.value)}
+        />
+        <Spacer axis="y" size={16} />
+        <div className={styles.inputLabel}>Profile photo URL (optional)</div>
+        <Spacer axis="y" size={4} />
+        <input
+          type="text"
+          className={styles.textInput}
+          value={photoUrl}
+          onChange={(e) => setPhotoUrl(e.currentTarget.value)}
+        />
+        <Spacer axis="y" size={24} />
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <button className={styles.btn} onClick={props.onBack}>
+            ← Back
+          </button>
+          <button type="submit" className={styles.submitBtn} disabled={!data.success}>
+            Sign in
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
 const Authorize = () => {
-  return <div>aaa</div>;
+  const router = useRouter();
+  const provider = router.query.identity_provider;
+  const [mode, setMode] = useState<'default' | 'add'>('default');
+
+  return (
+    <div className={styles.container}>
+      <h1>Sign-in with {provider}</h1>
+      <Spacer axis="y" size={8} />
+      <div>No {provider} accounts exist in Magnito.</div>
+      <Spacer axis="y" size={20} />
+      {mode === 'default' ? (
+        <button className={styles.btn} onClick={() => setMode('add')}>
+          + Add new account
+        </button>
+      ) : (
+        <AddAccount onBack={() => setMode('default')} />
+      )}
+    </div>
+  );
 };
 
 export default Authorize;