Keyboard navigation, accessibility, miscellaneous fixes (#65)

* Keyboard navigation, accessibility, miscellaneous fixes * Make build pass, some additional changes * Updated package-lock.json * Removed return statement * Make tests pass
rucio · Sep 15, 2022 · b243043 · b243043
1 parent c0ed0c6
commit b243043
Show file tree

Hide file tree

Showing 9 changed files with 278 additions and 31,331 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -1,8 +1,7 @@
 import { Header } from '../stories/Header/Header'
-import { useNavigate, useLocation } from 'react-router-dom'
+import { useNavigate, useLocation, Location } from 'react-router-dom'
 import { streamData } from '../utils/restApiWrapper'
 import { useState, useEffect } from 'react'
-import { Card } from '../stories/Card/Card'
 
 class Rule {
     id: string
@@ -12,7 +11,7 @@ class Rule {
 }
 function Home() {
     const navigate = useNavigate()
-    const location: any = useLocation()
+    const location: Location | any = useLocation()
     const [rulesArray, setRulesArray] = useState([] as Rule[])
 
     useEffect(() => {

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -48,7 +48,7 @@ function Login() {
             size="medium"
             kind="primary"
             onChange={(event: any) => {
-                setAccountName(event.target.value)
+                setAccountName(event?.target?.value)
             }}
         />
     )
@@ -105,75 +105,88 @@ function Login() {
     const userPassAuth = () => {
         makeUserPassAuthFetch()
             .then((response: any) => {
-                if (response.status === 200) {
-                    const rucioAuthToken =
-                        response?.headers.get('X-Rucio-Auth-Token')
-                    const rucioAccount = response?.headers.get(
-                        'X-Rucio-Auth-Account',
-                    )
-                    setAccountName(rucioAccount)
-                    sessionStorage.setItem('X-Rucio-Auth-Token', rucioAuthToken)
-                    loginNavigateHome(rucioAccount)
-                } else if (response.status === 206) {
-                    const has_accounts_header = response.headers.has(
-                        'X-Rucio-Auth-Accounts',
-                    )
-                    if (!has_accounts_header) {
-                        throw new Error(
-                            'No X-Rucio-Auth-Accounts header found in response',
+                if (response) {
+                    if (response.status === 200) {
+                        const rucioAuthToken =
+                            response?.headers.get('X-Rucio-Auth-Token')
+                        const rucioAccount = response?.headers.get(
+                            'X-Rucio-Auth-Account',
                         )
-                    }
-                    const accounts = response?.headers
-                        .get('X-Rucio-Auth-Accounts')
-                        .split(',')
-                    showModal({
-                        title: 'Select Rucio Account',
-                        body: (
-                            <Form
-                                title=""
-                                subtitle="We detected multiple accounts for
+                        setAccountName(rucioAccount)
+                        localStorage.setItem(
+                            'X-Rucio-Auth-Token',
+                            rucioAuthToken,
+                        )
+                        loginNavigateHome(rucioAccount)
+                    } else if (response.status === 206) {
+                        const has_accounts_header = response.headers.has(
+                            'X-Rucio-Auth-Accounts',
+                        )
+                        if (!has_accounts_header) {
+                            throw new Error(
+                                'No X-Rucio-Auth-Accounts header found in response',
+                            )
+                        }
+                        const accounts = response?.headers
+                            .get('X-Rucio-Auth-Accounts')
+                            .split(',')
+                        showModal({
+                            title: 'Select Rucio Account',
+                            body: (
+                                <Form
+                                    title=""
+                                    subtitle="We detected multiple accounts for
                             this user, please select the desired
                             one."
-                                onSubmit={() => {
-                                    showModal({ active: false })
-                                }}
-                            >
-                                {accounts.map((element: any) => (
-                                    <label key={element}>
-                                        <input
-                                            type="radio"
-                                            id={element}
-                                            value={element}
-                                            name="radio-group"
-                                            defaultChecked={false}
-                                            onChange={(event: any) => {
-                                                setAccountName(
-                                                    event.target.value,
-                                                )
-                                            }}
-                                        />
-                                        &nbsp;{element}
-                                    </label>
-                                ))}
-                                <Button
-                                    size="large"
-                                    kind="primary"
-                                    show="block"
-                                    label="Select Account"
-                                    type="submit"
-                                />
-                            </Form>
-                        ),
-                    })
-                } else if (response.status === 401) {
+                                    onSubmit={() => {
+                                        showModal({ active: false })
+                                    }}
+                                >
+                                    {accounts.map((element: string) => (
+                                        <label key={element}>
+                                            <input
+                                                type="radio"
+                                                id={element}
+                                                value={element}
+                                                name="radio-group"
+                                                defaultChecked={false}
+                                                onChange={(event: any) => {
+                                                    setAccountName(
+                                                        event.target.value,
+                                                    )
+                                                }}
+                                            />
+                                            &nbsp;{element}
+                                        </label>
+                                    ))}
+                                    <Button
+                                        size="large"
+                                        kind="primary"
+                                        show="block"
+                                        label="Select Account"
+                                        type="submit"
+                                    />
+                                </Form>
+                            ),
+                        })
+                    } else if (response.status === 401) {
+                        showAlert({
+                            message: 'Invalid credentials',
+                            variant: 'error',
+                        })
+                    } else {
+                        showAlert({
+                            message: 'Login failed.',
+                            variant: 'error',
+                        })
+                        throw new Error('Login failed')
+                    }
+                } else {
                     showAlert({
-                        message: 'Invalid credentials',
+                        message: 'Unable to fetch response from server.',
                         variant: 'error',
                     })
-                } else {
-                    throw new Error('Login failed')
                 }
-                return response
             })
             .catch((error: Error) => {
                 showAlert({
@@ -203,8 +216,8 @@ function Login() {
             })
     }
 
-    async function handleSubmit(event: KeyboardEvent) {
-        event.preventDefault()
+    async function handleSubmit(event: any) {
+        event?.preventDefault()
         const currentAuthType: string = authType.current
         if (currentAuthType === 'x509') {
             x509Auth()
@@ -291,6 +304,7 @@ function Login() {
                                         placeholder="Enter Username"
                                         kind="info"
                                         size="medium"
+                                        focusByDefault
                                         onChange={(event: any) => {
                                             setUserNameEntered(
                                                 event.target.value,
@@ -314,21 +328,24 @@ function Login() {
                                     {AccountInput}
                                     {SignInButton}
                                 </>
-                            ) : (
-                                <>
-                                    <Button
-                                        size="large"
-                                        kind="outline"
-                                        show="block"
-                                        label="Username / Password"
-                                        onClick={() => {
-                                            setUserpassEnabled(true)
-                                        }}
-                                    />
-                                    {AccountInput}
-                                </>
-                            )}
+                            ) : null}
                         </Form>
+                        <br></br>
+                        {!userpassEnabled ? (
+                            <>
+                                <Button
+                                    size="large"
+                                    kind="outline"
+                                    show="block"
+                                    label="Username / Password"
+                                    onClick={(event: any) => {
+                                        event.preventDefault()
+                                        setUserpassEnabled(true)
+                                    }}
+                                />
+                                {AccountInput}
+                            </>
+                        ) : null}
                     </div>
                 </div>
             </div>

diff --git a/src/stories/Alert/Alert.tsx b/src/stories/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react'
+import { ReactElement, useEffect } from 'react'
 import './alert.scss'
 
 export interface AlertProps {
@@ -55,6 +55,12 @@ export const Alert = ({
     ),
     ...props
 }: AlertProps) => {
+    useEffect(() => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        })
+    })
     return (
         <>
             {open ? (

diff --git a/src/stories/Card/Card.tsx b/src/stories/Card/Card.tsx
@@ -18,7 +18,7 @@ export const Card = ({
 }: CardProps) => {
     return (
         <div className="rucio-card">
-            {img !== 0 ? (
+            {img ? (
                 <div className={'image'}>
                     <figure className="image is-4by3">
                         <Image src={img} height={960} width={1280} />

diff --git a/src/stories/Form/Form.tsx b/src/stories/Form/Form.tsx
@@ -1,11 +1,12 @@
 import './form.scss'
 import { Button } from '../Button/Button'
+import { useEffect } from 'react'
 
 interface FormProps {
     title?: string
     subtitle?: string
     children?: any
-    onSubmit?: (args: any) => void
+    onSubmit?: (args: unknown) => void
 }
 
 export const Form = ({
@@ -44,6 +45,18 @@ export const Form = ({
     },
     ...props
 }: FormProps) => {
+    useEffect(() => {
+        const formElements: any = document.getElementsByClassName('rucio-form')
+        Array.from(formElements).forEach((formElement: any) => {
+            formElement.onkeydown = () => {
+                const keyboardEvent = window?.event as KeyboardEvent
+                if (keyboardEvent?.key === 'Enter') {
+                    onSubmit(keyboardEvent)
+                }
+            }
+        })
+    })
+
     return (
         <form className="rucio-form" onSubmit={onSubmit}>
             <h1 className="title">{title}</h1>

diff --git a/src/stories/TextInput/TextInput.tsx b/src/stories/TextInput/TextInput.tsx
@@ -9,6 +9,7 @@ interface TextInputProps {
     show?: 'danger' | 'warning' | 'success' | 'rounded'
     size?: 'small' | 'medium' | 'large'
     value?: string
+    focusByDefault?: boolean
     onChange?: (args: unknown) => void
 }
 
@@ -21,6 +22,7 @@ export const TextInput = ({
     kind = 'normal',
     show,
     value,
+    focusByDefault = false,
     onChange,
     ...props
 }: TextInputProps) => {
@@ -34,6 +36,7 @@ export const TextInput = ({
                 className={`rucio-textinput ${kind} ${size} ${show}`}
                 onChange={onChange}
                 value={value}
+                autoFocus={focusByDefault}
             />
         </label>
     )

diff --git a/src/tests/Login.test.tsx b/src/tests/Login.test.tsx
@@ -23,9 +23,6 @@ test('Login page render', () => {
     const x509PassAuthText = screen.getByText('x509 Certificate')
     expect(x509PassAuthText).toBeInTheDocument()
 
-    const OAuthText = screen.getByText('OIDC OAuth')
-    expect(OAuthText).toBeInTheDocument()
-
     const userPassAuthText = screen.getByText('Username / Password')
     expect(userPassAuthText).toBeInTheDocument()
 })
@@ -42,18 +39,6 @@ test('x509 auth flow', () => {
     expect(() => act(() => x509Button.click())).not.toThrow()
 })
 
-test('OIDC auth flow', () => {
-    render(renderComponent)
-    const OIDCButton = screen.getByText('OIDC OAuth')
-    expect(OIDCButton.getAttribute('type')).toEqual('submit')
-
-    act(() => {
-        OIDCButton.click()
-    })
-
-    expect(() => act(() => OIDCButton.click())).not.toThrow()
-})
-
 test('Userpass auth flow', () => {
     render(renderComponent)
     const userPassButton = screen.getByText('Username / Password')

diff --git a/src/utils/restApiWrapper.ts b/src/utils/restApiWrapper.ts
@@ -15,6 +15,8 @@ export async function postData(
             'Content-Type': 'application/json',
         },
         body: JSON.stringify(data),
+    }).catch((err: Error) => {
+        console.error(err)
     })
     return response
 }
@@ -39,7 +41,9 @@ export async function getData(
                 'Content-Type': 'application/json',
             },
         },
-    )
+    ).catch((err: Error) => {
+        console.error(err)
+    })
     return response
 }
 
@@ -56,6 +60,8 @@ export async function putData(
             'Content-Type': 'application/json',
         },
         body: JSON.stringify(data),
+    }).catch((err: Error) => {
+        console.error(err)
     })
     return response
 }
@@ -73,6 +79,8 @@ export async function deleteData(
             'Content-Type': 'application/json',
         },
         body: JSON.stringify(data),
+    }).catch((err: Error) => {
+        console.error(err)
     })
     return response
 }