improve email validation

web/src/lib/validate.ts

@@ -0,0 +1,11 @@
+/** Email format expression. */
+const emailRegexp = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+
+/**
+ * Validate input is an email address.
+ * Implicitly validates `str()` for convenience.
+ */
+export function email(input: string | undefined) {
+  if (!input) return
+  if (!emailRegexp.test(input as string)) return 'invalid email address'
+}

web/src/views/AccountSettingsView.tsx

@@ -1,3 +1,4 @@
+import * as validate from '@/lib/validate'
 import BackButton from '@/components/button/BackButton'
 import ButtonSet from '@/components/ButtonSet'
 import Chip from '@/components/Chip'
@@ -23,7 +24,7 @@ function useAccountUpdateForm() {
   const form = useForm<AccountUpdateFormData>({ mode: 'onBlur' })
 
   const inputs = {
-    email: form.register('email'),
+    email: form.register('email', { validate: validate.email }),
     password: form.register('password', { validate: value => {
       if (!value) return
       if (value.length < 8) return 'Must be at least 8 characters'

web/src/views/CreateAccountView.tsx

@@ -1,4 +1,5 @@
 import './CreateAccountView.scss'
+import * as validate from '@/lib/validate'
 import Button from '@/components/button/Button'
 import ButtonSet from '@/components/ButtonSet'
 import Chip from '@/components/Chip'
@@ -22,11 +23,12 @@ interface AccountCreateFormData {
 }
 
 function useAccountCreateForm() {
-  const form = useForm<AccountCreateFormData>()
+  const form = useForm<AccountCreateFormData>({ mode: 'onBlur' })
 
   const inputs = {
-    email: form.register('email', { validate: {
-      required: value => value.length >= 1 || 'Required',
+    email: form.register('email', { validate: value => {
+      if (!value) return 'Required'
+      return validate.email(value)
     }}),
     password: form.register('password', { validate: {
       minLength: value => value.length >= 8 || 'Must be at least 8 characters',

web/src/views/LoginView.tsx

@@ -1,4 +1,5 @@
 import './LoginView.scss'
+import * as validate from '@/lib/validate'
 import Button from '@/components/button/Button'
 import ButtonSet from '@/components/ButtonSet'
 import Chip from '@/components/Chip'
@@ -21,11 +22,12 @@ interface LoginFormData {
 }
 
 function useLoginForm() {
-  const form = useForm<LoginFormData>()
+  const form = useForm<LoginFormData>({ mode: 'onBlur' })
 
   const inputs = {
-    email: form.register('email', { validate: {
-      required: value => value.length >= 1 || 'Required',
+    email: form.register('email', { validate: value => {
+      if (!value) return 'Required'
+      return validate.email(value)
     }}),
     password: form.register('password', { validate: {
       minLength: value => value.length >= 8 || 'Must be at least 8 characters',