added translations and aria tags

pimcore · May 8, 2024 · 297586c · 297586c
1 parent d802d03
commit 297586c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/assets/js/src/components/login-form/login-form.tsx b/assets/js/src/components/login-form/login-form.tsx
@@ -6,6 +6,7 @@ import { type LoginRequest, useLoginMutation } from '@Pimcore/components/login-f
 import { useDispatch } from 'react-redux'
 import { setCredentials } from '@Pimcore/app/auth/auth-slice'
 import { useMessage } from '@Pimcore/components/message/useMessage'
+import { useTranslation } from 'react-i18next'
 
 export interface IAdditionalLogins {
   key: string
@@ -21,6 +22,7 @@ export const LoginForm = ({ additionalLogins }: ILoginFormProps): React.JSX.Elem
   const dispatch = useDispatch()
   const { styles } = useStyle()
   const [messageApi, contextHolder] = useMessage()
+  const { t } = useTranslation()
 
   const [formState, setFormState] = React.useState<LoginRequest>({
     username: '',
@@ -63,27 +65,30 @@ export const LoginForm = ({ additionalLogins }: ILoginFormProps): React.JSX.Elem
             placeholder="Password"
           />
           <div className={ 'flex-space' }>
-            <Checkbox>
-              Remember me
+            <Checkbox
+              aria-label={ t('aria.login-form-additional-logins.remember-me-checkbox') }
+            >
+              {t('login-form.remember-me')}
             </Checkbox>
-            <Button type={ 'link' }>Forgot password</Button>
+            <Button type={ 'link' }>{t('login-form.forgot-password')}</Button>
           </div>
 
           <Button
             htmlType="submit"
             loading={ isLoading }
             type="primary"
           >
-            Log in
+            {t('login-form.login')}
           </Button>
         </form>
 
         {Array.isArray(additionalLogins) && (
           <div className={ 'login__additional-logins' }>
-            <p>or</p>
+            <p>{t('login-form-additional-logins.or')}</p>
 
             {additionalLogins?.map((login) => (
               <Button
+                aria-label={ `${t('aria.login-form-additional-logins.additional-login-provider')} ${login.name}` }
                 href={ login.link }
                 key={ login.key }
                 type={ 'primary' }

diff --git a/translations/studio.en.yaml b/translations/studio.en.yaml
@@ -49,3 +49,9 @@ aria.asset.image.editor.zoom.reset: Reset zoom
 aria.asset.image.editor.zoom.zoom-in: Zoom in
 aria.asset.image.editor.zoom.zoom-out: Zoom out
 aria.asset.image.editor.zoom.preconfigured-zoom-levels: Predefined zoom levels select
+login-form.remember-me: Remember me
+login-form.forgot-password: Forgot password
+login-form.login: Login
+login-form-additional-logins.or: or
+aria.login-form-additional-logins.additional-login-provider: "Additional login provider:"
+aria.login-form-additional-logins.remember-me-checkbox: Remember me checkbox