fix lint errors

packages/app/src/@types/i18next.d.ts

@@ -0,0 +1,7 @@
+import 'i18next';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
+}

packages/app/src/components/LoginForm.tsx

@@ -36,6 +36,7 @@ type LoginFormProps = {
 }
 export const LoginForm = (props: LoginFormProps): JSX.Element => {
   const { t } = useTranslation();
+
   const router = useRouter();
 
   const {
@@ -71,7 +72,13 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
     }
   }, []);
 
-  // functions
+  const tWithOpt = useCallback((key: string, opt?: any): string => {
+    if (typeof opt === 'object') {
+      return t(key, opt as object);
+    }
+    return t(key);
+  }, [t]);
+
   const handleLoginWithExternalAuth = useCallback((e) => {
     const auth = e.currentTarget.id;
 
@@ -133,26 +140,32 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
     return (
       <div className="alert alert-danger">
         {errors.map((err, index) => {
-          return <small key={index} dangerouslySetInnerHTML={{ __html: t(err.message, err.args) }}></small>;
+          return <small key={index} dangerouslySetInnerHTML={{ __html: tWithOpt(err.message, err.args) }}></small>;
         })}
       </div>
     );
-  }, [t]);
+  }, [tWithOpt]);
 
   // wrap error elements which do not use dangerouslySetInnerHtml
   const generateSafelySetErrors = useCallback((errors: (IErrorV3 | IExternalAccountLoginError)[]): JSX.Element => {
+    errors.push(
+      new Error('foo'),
+      new Error('foo'),
+      new Error('foo'),
+    );
+
     if (errors == null || errors.length === 0) return <></>;
     return (
       <ul className="alert alert-danger">
         {errors.map((err, index) => {
           return (
-            <li key={index}>
-              {t(err.message, err.args)}<br/>
+            <li key={index} className={index > 0 ? 'mt-1' : ''}>
+              {tWithOpt(err.message, err.args)}
             </li>);
         })}
       </ul>
     );
-  }, [t]);
+  }, [tWithOpt]);
 
   const renderLocalOrLdapLoginForm = useCallback(() => {
     const { isLdapStrategySetup } = props;