Merge pull request #3139 from infrahq/mxyng/minor-ui-fixes

fix: password reset sending multiple requests
infrahq · Sep 8, 2022 · 197b382 · 197b382
2 parents ec3fa3c + fbc1e44
commit 197b382
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 29 deletions.
diff --git a/ui/__test__/login.test.js b/ui/__test__/login.test.js
@@ -68,10 +68,10 @@ describe('Login Component', () => {
     render(<Login />)
 
     expect(
-      screen.queryByText('Welcome back. Login with your credentials')
+      screen.queryByText('Welcome back. Login with your credentials.')
     ).toBeInTheDocument()
     expect(
-      screen.queryByText('or via your identity provider.')
+      screen.queryByText('or with your identity provider.')
     ).not.toBeInTheDocument()
   })
 
@@ -82,7 +82,7 @@ describe('Login Component', () => {
 
     expect(
       screen.getByText(
-        'Welcome back. Login with your credentials or via your identity provider.'
+        'Welcome back. Login with your credentials or with your identity provider.'
       )
     ).toBeInTheDocument()
   })

diff --git a/ui/pages/login/index.js b/ui/pages/login/index.js
@@ -137,8 +137,8 @@ export default function Login() {
     <>
       <h1 className='text-base font-bold leading-snug'>Login to Infra</h1>
       <h2 className='my-3 max-w-[260px] text-center text-xs text-gray-300'>
-        Welcome back. Login with your credentials{' '}
-        {providers?.length > 0 && 'or via your identity provider.'}
+        Welcome back. Login with your credentials
+        {providers?.length > 0 && ' or with your identity provider'}.
       </h2>
       {providers?.length > 0 && (
         <>
@@ -208,7 +208,7 @@ export default function Login() {
         </button>
         {isEmailConfigured && (
           <Link href='/password-reset'>
-            <a className='text-3xs text-violet-100 hover:border-violet-100'>
+            <a className='mt-3 text-3xs text-violet-100 hover:border-violet-100'>
               I forgot my password
             </a>
           </Link>

diff --git a/ui/pages/password-reset/index.js b/ui/pages/password-reset/index.js
@@ -9,10 +9,10 @@ export default function PasswordReset() {
   const { token } = router.query
 
   const [email, setEmail] = useState('')
-  const [error, setError] = useState('')
   const [submitted, setSubmitted] = useState(false)
 
   async function onSubmit(e) {
+    setSubmitted(true)
     e.preventDefault()
 
     try {
@@ -28,7 +28,6 @@ export default function PasswordReset() {
       }
 
       await res.json()
-      setSubmitted(true)
     } catch (e) {
       console.error(e)
     }
@@ -41,7 +40,7 @@ export default function PasswordReset() {
       {token ? (
         <>
           <h2 className='my-3 max-w-[260px] text-center text-xs text-gray-300'>
-            Please set your password
+            Please set your password.
           </h2>
           <div className='relative mt-4 w-full'>
             <div
@@ -58,21 +57,13 @@ export default function PasswordReset() {
           <h1 className='text-base font-bold leading-snug'>Password Reset</h1>
           {submitted ? (
             <p className='my-3 max-w-[260px] text-xs text-gray-300'>
-              Please check your email for the reset link
+              Please check your email for the reset link.
             </p>
           ) : (
             <>
               <h2 className='my-3 max-w-[260px] text-center text-xs text-gray-300'>
-                Please enter your email
+                Please enter your email.
               </h2>
-              <div className='relative mt-4 w-full'>
-                <div
-                  className='absolute inset-0 flex items-center'
-                  aria-hidden='true'
-                >
-                  <div className='w-full border-t border-gray-800' />
-                </div>
-              </div>
               <form
                 onSubmit={onSubmit}
                 className='relative flex w-full max-w-sm flex-col'
@@ -91,24 +82,16 @@ export default function PasswordReset() {
                     placeholder='enter your email'
                     onChange={e => {
                       setEmail(e.target.value)
-                      setError('')
                     }}
-                    className={`w-full border-b border-gray-800 bg-transparent px-px py-2 text-2xs placeholder:italic focus:border-b focus:border-gray-200 focus:outline-none ${
-                      error ? 'border-pink-500/60' : ''
-                    }`}
+                    className={`w-full border-b border-gray-800 bg-transparent px-px py-2 text-2xs placeholder:italic focus:border-b focus:border-gray-200 focus:outline-none`}
                   />
                 </div>
                 <button
-                  disabled={!email}
+                  disabled={!email || submitted}
                   className='mt-6 mb-2 rounded-lg border border-violet-300 px-4 py-3 text-2xs text-violet-100 hover:border-violet-100 disabled:pointer-events-none disabled:opacity-30'
                 >
                   Submit
                 </button>
-                {error && (
-                  <p className='absolute -bottom-3.5 mx-auto w-full text-center text-2xs text-pink-400'>
-                    {error}
-                  </p>
-                )}
               </form>
             </>
           )}