feat: form styling

api/actions/admin.ts

@@ -26,11 +26,12 @@ export async function listUsers(ctx: Context) {
   admins(ctx)
   return (await db
     .selectFrom('user')
-    .select(['nick', 'email', 'emailVerified', 'oauthGithub', 'createdAt', 'updatedAt'])
+    .selectAll()
     .execute()
-  ).map(item =>
-    [item.nick, item] as const
-  )
+  ).map(item => {
+    item.password = '✓' // mask password
+    return [item.nick, item] as const
+  })
 }
 
 actions.post.deleteUser = deleteUser

api/actions/login-register.ts

@@ -251,13 +251,13 @@ export async function logout(ctx: Context) {
 }
 
 actions.post.forgotPassword = forgotPassword
-export async function forgotPassword(ctx: Context, nickOrEmail: string) {
-  ctx.log('Forgot password for:', nickOrEmail)
+export async function forgotPassword(ctx: Context, email: string) {
+  ctx.log('Forgot password for:', email)
 
-  const user = await getUser(nickOrEmail)
+  const user = await getUserByEmail(email)
 
   if (!user) {
-    ctx.log('Forgot password user does not exist:', nickOrEmail)
+    ctx.log('Forgot password user does not exist:', email)
     // fake a delay that would have been a call to an email service
     await timeout(2000 + Math.random() * 5000)
     return
@@ -295,15 +295,14 @@ If you did not request a password reset, simply ignore this email.`,
   }
 }
 
-actions.get.getResetPasswordUser = getResetPasswordUser
-export async function getResetPasswordUser(_ctx: Context, token: string) {
+actions.get.getResetPasswordUserNick = getResetPasswordUserNick
+export async function getResetPasswordUserNick(_ctx: Context, token: string) {
   const result = await kv.get<string>(['resetPassword', token])
 
   if (result.value) {
     const user = await getUserByNick(result.value)
     if (user) {
-      user.password = null
-      return user
+      return user.nick
     }
   }
 

api/schemas/user.ts

@@ -24,6 +24,11 @@ export const UserLogin = z.object({
   password: z.string(),
 })
 
+export type UserForgot = z.infer<typeof UserForgot>
+export const UserForgot = z.object({
+  email: z.string(),
+})
+
 export type UserSession = z.infer<typeof UserSession>
 export const UserSession = z.object({
   nick: z.string(),

src/comp/Login.tsx

@@ -1,62 +1,106 @@
-import { refs, Sigui } from 'sigui'
-import { UserLogin } from '../../api/schemas/user.ts'
+import { Sigui } from 'sigui'
+import { UserForgot, UserLogin } from '../../api/schemas/user.ts'
 import * as actions from '../rpc/login-register.ts'
 import { parseForm } from '../util/parse-form.ts'
+import { Link } from '../ui/Link.tsx'
+import { Input, Label } from '../ui/index.ts'
 
 export function Login() {
   using $ = Sigui()
 
   const info = $({
+    mode: 'login' as 'login' | 'forgot',
+    forgotEmail: null as null | string,
     error: ''
   })
 
-  function onSubmit(ev: Event & { target: HTMLFormElement, submitter: HTMLElement }) {
+  function submitLogin(ev: Event & { target: HTMLFormElement, submitter: HTMLElement }) {
     ev.preventDefault()
     const userLogin = parseForm(ev.target, UserLogin)
+    actions
+      .login(userLogin)
+      .then(actions.loginUser)
+      .catch(err => info.error = err.message)
+    return false
+  }
 
-    if (ev.submitter === refs.forgot) {
-      actions
-        .forgotPassword(userLogin.nickOrEmail)
-        .then(() => {
-          alert('Check your email for a password reset link.')
-        })
-    }
-    else {
-      actions
-        .login(userLogin)
-        .then(actions.loginUser)
-        .catch(err => info.error = err.message)
-    }
+  function submitForgot(ev: Event & { target: HTMLFormElement, submitter: HTMLElement }) {
+    ev.preventDefault()
+    const userForgot = parseForm(ev.target, UserForgot)
+    actions
+      .forgotPassword(userForgot.email)
+      .then(() => {
+        info.forgotEmail = userForgot.email
+      })
     return false
   }
 
-  return <form method="post" onsubmit={onSubmit}>
-    <label>
-      Nick or Email <input
-        name="nickOrEmail"
-        required
-        spellcheck="false"
-        autocomplete="nickname"
-      />
-    </label>
+  return <div>
+    {() => {
+      switch (info.mode) {
+        case 'login':
+          return <form method="post" onsubmit={submitLogin}>
+            <h2>Login</h2>
+
+            <div class="flex flex-col sm:items-end gap-1">
+              <Label text="Nick or Email">
+                <Input
+                  name="nickOrEmail"
+                  required
+                  spellcheck="false"
+                  autocomplete="nickname"
+                />
+              </Label>
+
+              <Label text="Password">
+                <Input
+                  name="password"
+                  type="password"
+                  required
+                  autocomplete="current-password"
+                />
+              </Label>
+
+              <div class="flex flex-row items-center justify-end gap-2">
+                <Link onclick={() => info.mode = 'forgot'}>Forgot password</Link>
+                <button type="submit">Login</button>
+              </div>
 
-    <br />
+              <span>{() => info.error}</span>
+            </div>
 
-    <label>
-      Password <input
-        name="password"
-        type="password"
-        required
-        autocomplete="current-password"
-      />
-    </label>
+          </form>
 
-    <br />
+        case 'forgot':
+          if (info.forgotEmail) {
+            const site = `https://${info.forgotEmail.split('@')[1]}`
+            return <div>Done! <a href={site}>Check your email</a> for a reset password link.</div>
+          }
+          else {
+            return <form method="post" onsubmit={submitForgot}>
+              <h2>Forgot Password</h2>
 
-    <button type="submit">Login</button>
+              <div class="flex flex-col sm:items-end gap-1">
+                <Label text="Email">
+                  <Input
+                    name="email"
+                    type="email"
+                    required
+                    spellcheck="false"
+                    autocomplete="email"
+                  />
+                </Label>
 
-    <button ref="forgot" type="submit">Forgot password</button>
+                <div class="flex flex-row items-center gap-2">
+                  <button type="submit">Send reset link</button>
+                  <span>or <Link onclick={() => info.mode = 'login'}>login using password</Link></span>
+                </div>
 
-    {() => info.error}
-  </form>
+                <span>{() => info.error}</span>
+              </div>
+            </form>
+          }
+      }
+    }}
+  </div>
 }

src/comp/OAuthLogin.tsx

@@ -0,0 +1,34 @@
+import { on } from 'utils'
+import { whoami } from '../rpc/login-register.ts'
+import { state } from '../state.ts'
+
+export function OAuthLogin() {
+  function oauthLogin(provider: string) {
+    const h = 700
+    const w = 500
+    const x = window.outerWidth / 2 + window.screenX - (w / 2)
+    const y = window.outerHeight / 2 + window.screenY - (h / 2)
+
+    const url = new URL(`${location.origin}/oauth/popup`)
+    url.searchParams.set('provider', provider)
+    const popup = window.open(
+      url,
+      'oauth',
+      `width=${w}, height=${h}, top=${y}, left=${x}`
+    )
+
+    if (!popup) alert('Something went wrong')
+
+    on(window, 'storage', () => {
+      popup!.close()
+      if (localStorage.oauth?.startsWith('complete')) {
+        whoami().then(user => state.user = user)
+      }
+      else {
+        alert('OAuth failed.\n\nTry logging in using a different method.')
+      }
+    }, { once: true })
+  }
+
+  return <button onclick={() => oauthLogin('github')}>Proceed with GitHub</button>
+}

src/comp/Register.tsx

@@ -1,6 +1,7 @@
 import { Sigui } from 'sigui'
 import { UserRegister } from '../../api/schemas/user.ts'
 import * as actions from '../rpc/login-register.ts'
+import { Input, Label } from '../ui/index.ts'
 import { parseForm } from '../util/parse-form.ts'
 
 export function Register() {
@@ -20,26 +21,42 @@ export function Register() {
   }
 
   return <form method="post" onsubmit={onSubmit}>
-    <label>
-      Nick <input id="nick" name="nick" required spellcheck="false" autocomplete="nickname" />
-    </label>
+    <h2>Register</h2>
+
+    <div class="flex flex-col sm:items-end gap-1">
+      <Label text="Nick">
+        <Input
+          name="nick"
+          required
+          spellcheck="false"
+          autocomplete="nickname"
+        />
+      </Label>
+
+      <Label text="Email">
+        <Input
+          name="email"
+          type="email"
+          required
+          autocomplete="email"
+        />
+      </Label>
+
+      <Label text="Password">
+        <Input
+          name="password"
+          type="password"
+          required
+          autocomplete="new-password"
+        />
+      </Label>
+
+      <div class="flex flex-row items-center justify-end gap-2">
+        <button type="submit">Register</button>
+      </div>
+
+      <span>{() => info.error}</span>
+    </div>
 
-    <br />
-
-    <label>
-      Email <input id="email" name="email" type="email" required autocomplete="email" />
-    </label>
-
-    <br />
-
-    <label>
-      Password <input id="password" name="password" type="password" required autocomplete="new-password" />
-    </label>
-
-    <br />
-
-    <button type="submit">Register</button>
-
-    {() => info.error}
   </form>
 }

src/comp/ResetPassword.tsx

@@ -1,14 +1,14 @@
 import { Sigui } from 'sigui'
-import { UserResetPassword, type User } from '../../api/schemas/user.ts'
+import { UserResetPassword } from '../../api/schemas/user.ts'
 import * as actions from '../rpc/login-register.ts'
-import { parseForm } from '../util/parse-form.ts'
 import { go } from '../ui/Link.tsx'
+import { parseForm } from '../util/parse-form.ts'
 
 export function ResetPassword() {
   using $ = Sigui()
 
   const info = $({
-    user: null as User | null,
+    nick: null as null | string,
     error: ''
   })
 
@@ -17,8 +17,10 @@ export function ResetPassword() {
     const { token, password } = parseForm(ev.target, UserResetPassword)
     actions
       .changePassword(token, password)
-      .then(actions.loginUser)
-      .then(() => go('/'))
+      .then(session => {
+        go('/')
+        actions.loginUser(session)
+      })
       .catch(err => info.error = err.message)
     return false
   }
@@ -27,14 +29,14 @@ export function ResetPassword() {
   if (!token) return <div>Token not found</div>
 
   actions
-    .getResetPasswordUser(token)
-    .then(user => info.user = user)
+    .getResetPasswordUserNick(token)
+    .then(nick => info.nick = nick)
     .catch(err => info.error = err.message)
 
-  return <div>{() => info.user ? <div>
+  return <div>{() => info.nick ? <div>
     <h1>Reset Password</h1>
 
-    Hello {info.user.nick}! Please enter your new password below:
+    Hello {info.nick}! Please enter your new password below:
 
     <form method="post" onsubmit={onSubmit}>
       <input type="hidden" name="token" value={token} />