From 1b441bf19f5ec1abaf0a89bfb8dbaffe44f7fbc5 Mon Sep 17 00:00:00 2001
From: zx <67887489+tan-zx@users.noreply.github.com>
Date: Thu, 14 Apr 2022 22:05:57 +0800
Subject: [PATCH] feat: improve validation for OtpForm and LoginForm

---
 src/client/components/LoginForm.tsx | 29 ++++++++++++++++-------------
 src/client/components/OtpForm.tsx   | 16 +++++++++-------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/client/components/LoginForm.tsx b/src/client/components/LoginForm.tsx
index c92dd8d72..424c48879 100644
--- a/src/client/components/LoginForm.tsx
+++ b/src/client/components/LoginForm.tsx
@@ -71,35 +71,38 @@ export const LoginForm: FC<LoginFormProps> = ({ email, onLogin }) => {
     )
   }
 
-  const hasError = () => errors.email || auth.verifyOtp.isError
+  const hasError = (): boolean => !!errors.token || auth.verifyOtp.isError
 
   const getErrorMessage = (): string => {
-    const { otp } = errors
-    return otp && otp.type === 'required'
+    return errors && errors.token
       ? 'Please provide a valid OTP'
-      : getApiErrorMessage(auth.verifyOtp.error)
+      : auth.verifyOtp.isError
+      ? getApiErrorMessage(auth.verifyOtp.error)
+      : ''
   }
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <VStack spacing="32px" align="stretch">
-        <FormControl id="email" isInvalid={hasError()}>
-          <FormLabel color="neutral.900">One time password</FormLabel>
+        <FormControl id="token" isInvalid={hasError()}>
+          <FormLabel color="neutral.900" isRequired>
+            One time password
+          </FormLabel>
           <Text color="neutral.700" mb="24px">
             Please enter the OTP sent to {email}.
           </Text>
           <Input
             h="48px"
-            type="text"
-            inputMode="numeric"
-            pattern="\d{6}"
-            {...register('token', { required: true })}
+            {...register('token', {
+              required: true,
+              minLength: 6,
+              maxLength: 6,
+              pattern: /^\d{6}/,
+            })}
             autoComplete="one-time-code"
             placeholder="e.g. 111111"
           />
-          {hasError() && (
-            <FormErrorMessage>{getErrorMessage()}</FormErrorMessage>
-          )}
+          <FormErrorMessage children={getErrorMessage()} />
         </FormControl>
         <HStack justifyContent="flex-start" spacing={6}>
           <Button
diff --git a/src/client/components/OtpForm.tsx b/src/client/components/OtpForm.tsx
index ebdd0fcef..d9a1f73a8 100644
--- a/src/client/components/OtpForm.tsx
+++ b/src/client/components/OtpForm.tsx
@@ -39,12 +39,11 @@ export const OtpForm: FC<OtpFormProps> = ({ onSuccess }) => {
     sendOtp.mutate(formattedEmail)
   }
 
-  const hasError = () => errors.email || sendOtp.isError
+  const hasError = (): boolean => !!errors.email || sendOtp.isError
 
   const getErrorMessage = (): string => {
-    const { email } = errors
-    return email && email.type === 'required'
-      ? 'Please provide a valid email address'
+    return errors && errors.email
+      ? 'Please provide a valid .gov.sg email address'
       : getApiErrorMessage(sendOtp.error)
   }
 
@@ -55,12 +54,15 @@ export const OtpForm: FC<OtpFormProps> = ({ onSuccess }) => {
           <FormLabel label="neutral.900">Login</FormLabel>
           <Text color="neutral.700" mb="24px">
             Only available for use by public officers with a{' '}
-            <strong>gov.sg</strong> email.
+            <strong>.gov.sg</strong> email.
           </Text>
           <Input
             h="48px"
-            type="email"
-            {...register('email', { required: true })}
+            {...register('email', {
+              required: true,
+              pattern:
+                /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+.gov.sg$/,
+            })}
             placeholder="e.g. jane@open.gov.sg"
           />
           {hasError() && (