fix: auth pages

Author: oshcherbakovv

ui/src/components/ui/device-table/device-table.module.css

@@ -1,5 +1,4 @@
 .tableWrapper {
-  overflow: auto hidden;
   padding: 12px;
 }
 

ui/src/components/ui/table-column-visibility/table-column-visibility.tsx

@@ -23,13 +23,14 @@ type RowsGroupProps = {
 }
 
 const RowsGroup = observer(({ columns, groupName }: RowsGroupProps) => {
+  const { t } = useTranslation()
   const onCheckboxChange = (id: string) => {
     deviceTableState.setColumnVisibility((prevVisibility) => ({ ...prevVisibility, [id]: !prevVisibility[id] }))
   }
 
   return (
     <FormLayoutGroup>
-      <FormItem className={styles.group} top={groupName}>
+      <FormItem className={styles.group} top={t(groupName)}>
         {columns?.map(({ id, meta }) =>
           id ? (
             <Checkbox
@@ -38,7 +39,7 @@ const RowsGroup = observer(({ columns, groupName }: RowsGroupProps) => {
               value={id}
               onChange={() => onCheckboxChange(id)}
             >
-              {meta?.columnName}
+              {t(meta?.columnName || 'Unknown column')}
             </Checkbox>
           ) : null
         )}

ui/src/components/views/auth/auth-ldap-page.tsx

@@ -12,7 +12,7 @@ import { useGetAuthContact } from '@/lib/hooks/use-get-auth-contact.hook'
 
 import styles from './auth-page.module.css'
 
-import type { FormEvent } from 'react'
+import type { ChangeEvent, FormEvent } from 'react'
 
 export const AuthLdapPage = () => {
   const { t } = useTranslation()
@@ -30,6 +30,20 @@ export const AuthLdapPage = () => {
     auth({ username, password })
   }
 
+  const onUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setUsernameError('')
+    setFormError('')
+
+    setUsername(event.target.value)
+  }
+
+  const onPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setPasswordError('')
+    setFormError('')
+
+    setPassword(event.target.value)
+  }
+
   useEffect(() => {
     if (isSuccess) {
       authStore.login(authData.jwt)
@@ -74,32 +88,36 @@ export const AuthLdapPage = () => {
                 <FormItem bottom={usernameError} status={usernameError ? 'error' : undefined} top={t('Username')}>
                   <Input
                     before={<Icon20UserOutline />}
-                    placeholder='Please enter your Single Sign-On login'
+                    placeholder={t('Please enter your login')}
                     value={username}
-                    onChange={(event) => setUsername(event.target.value)}
+                    onChange={onUsernameChange}
                   />
                 </FormItem>
                 <FormItem bottom={passwordError} status={passwordError ? 'error' : undefined} top={t('Password')}>
                   <Input
                     before={<Icon20MailOutline />}
-                    placeholder='Please enter your Single Sign-On password'
-                    type='email'
+                    placeholder={t('Please enter your password')}
                     value={password}
-                    onChange={(event) => setPassword(event.target.value)}
+                    onChange={onPasswordChange}
                   />
                 </FormItem>
+                <ConditionalRender conditions={[!!formError]}>
+                  <Div>
+                    <FormStatus mode='error'>{formError}</FormStatus>
+                  </Div>
+                </ConditionalRender>
                 <Spacing size='xl' />
                 <FormItem>
-                  <Button disabled={!username || !password} size='l' type='submit' stretched>
+                  <Button
+                    disabled={!username || !password || !!usernameError || !!passwordError || !!formError}
+                    size='l'
+                    type='submit'
+                    stretched
+                  >
                     {t('Log In')}
                   </Button>
                 </FormItem>
               </FormLayoutGroup>
-              <ConditionalRender conditions={[!!formError]}>
-                <Div>
-                  <FormStatus mode='error'>{formError}</FormStatus>
-                </Div>
-              </ConditionalRender>
               <Button className={styles.contactButton} href={authContact} mode='link'>
                 {t('Contact Support')}
               </Button>

ui/src/components/views/auth/auth-mock-page.tsx

@@ -13,7 +13,7 @@ import { useGetAuthContact } from '@/lib/hooks/use-get-auth-contact.hook'
 
 import styles from './auth-page.module.css'
 
-import type { FormEvent } from 'react'
+import type { ChangeEvent, FormEvent } from 'react'
 
 export const AuthMockPage = () => {
   const { t } = useTranslation()
@@ -31,6 +31,19 @@ export const AuthMockPage = () => {
     auth({ name, email })
   }
 
+  const onNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setNameError('')
+    setFormError('')
+
+    setName(event.target.value)
+  }
+
+  const onEmailChange = (value: string) => {
+    setFormError('')
+
+    setEmail(value)
+  }
+
   useEffect(() => {
     if (isSuccess) {
       authStore.login(authData.jwt)
@@ -77,30 +90,35 @@ export const AuthMockPage = () => {
                     before={<Icon20UserOutline />}
                     placeholder='Please enter your name'
                     value={name}
-                    onChange={(event) => setName(event.target.value)}
+                    onChange={onNameChange}
                   />
                 </FormItem>
                 <FormItem bottom={emailError} status={emailError ? 'error' : undefined} top={t('Email')}>
                   <EmailInput
                     before={<Icon20MailOutline />}
                     placeholder='Please enter your email'
                     value={email}
-                    onChange={(value) => setEmail(value)}
+                    onChange={onEmailChange}
                     onError={(error) => setEmailError(error)}
                   />
                 </FormItem>
+                <ConditionalRender conditions={[!!formError]}>
+                  <Div>
+                    <FormStatus mode='error'>{formError}</FormStatus>
+                  </Div>
+                </ConditionalRender>
                 <Spacing size='xl' />
                 <FormItem>
-                  <Button disabled={!name || !email || !!emailError} size='l' type='submit' stretched>
+                  <Button
+                    disabled={!name || !email || !!nameError || !!emailError || !!formError}
+                    size='l'
+                    type='submit'
+                    stretched
+                  >
                     {t('Log In')}
                   </Button>
                 </FormItem>
               </FormLayoutGroup>
-              <ConditionalRender conditions={[!!formError]}>
-                <Div>
-                  <FormStatus mode='error'>{formError}</FormStatus>
-                </Div>
-              </ConditionalRender>
               <Button className={styles.contactButton} href={authContact} mode='link'>
                 {t('Contact Support')}
               </Button>

ui/src/types/column-group.type.ts

@@ -1,5 +1,5 @@
 export enum ColumnGroup {
-  DEVICE_INFO = 'DeviceInfo',
+  DEVICE_INFO = 'Device Info',
   OS_HARDWARE = 'OS & Hardware',
   NETWORK_CONNECTIVITY = 'Network & Connectivity',
   BATTERY = 'Battery',