don't show custom error if hideError is false; fix error page alignment; wip: universal layout

Author: Soxasora

components/form.js

@@ -574,7 +574,7 @@ function InputInner ({
           onKeyDown={onKeyDownInner}
           onChange={onChangeInner}
           onBlur={onBlurInner}
-          isInvalid={!hideError && invalid}
+          isInvalid={!hideError && invalid} // handle error showing separately
           isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error}
         />
         {(isClient && clear && field.value && !props.readOnly) &&
@@ -1243,7 +1243,7 @@ export function PasswordInput ({ newPass, qr, copy, readOnly, append, value: ini
 
 export function MultiInput ({
   name, label, groupClassName, length = 4, charLength = 1, upperCase, showSequence,
-  onChange, autoFocus, inputType = 'text',
+  onChange, autoFocus, hideError, inputType = 'text',
   ...props
 }) {
   const [inputs, setInputs] = useState(new Array(length).fill(''))
@@ -1325,7 +1325,7 @@ export function MultiInput ({
           />
         ))}
       </div>
-      {meta.touched && meta.error && (
+      {hideError && meta.touched && meta.error && (
         <BootstrapForm.Control.Feedback type='invalid' className='d-block'>
           {meta.error}
         </BootstrapForm.Control.Feedback>

pages/auth/error.js

@@ -28,7 +28,7 @@ export default function AuthError ({ error }) {
       <StaticLayout>
         <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
         <h2 className='pt-4'>Where did the magic go?</h2>
-        <h4 className='text-muted pt-2'>Get another magic code by logging in or try again by going back.</h4>
+        <h4 className='text-muted text-center pt-2'>Get another magic code by logging in or try again by going back.</h4>
         <Button
           className='align-items-center my-3'
           style={{ borderWidth: '2px' }}

pages/email.js

@@ -57,8 +57,9 @@ export const MagicCodeForm = ({ onSubmit }) => {
         required
         upperCase
         autoFocus
-        groupClassName='d-flex justify-content-center w-50 mx-auto gap-2'
+        groupClassName='d-flex justify-content-center mx-auto gap-2'
         inputType='text'
+        hideError
       />
       <SubmitButton variant='primary' className='px-4'>verify</SubmitButton>
     </Form>