Merge branch 'master' into fix/i18n-for-security-settings

.github/workflows/reusable-app-prod.yml

@@ -296,6 +296,8 @@ jobs:
   report-playwright:
     needs: [run-playwright]
 
+    if: always() && needs.run-playwright.result != 'skipped'
+
     runs-on: ubuntu-latest
 
     steps:

apps/app/src/client/components/InstallerForm.tsx

@@ -32,26 +32,13 @@ const InstallerForm = memo((props: Props): JSX.Element => {
 
   const tWithOpt = useTWithOpt();
 
-  const isSupportedLang = AllLang.includes(i18n.language as Lang);
+  const isSupportedLang = AllLang.includes(i18n.language);
 
-  const [isValidUserName, setValidUserName] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [currentLocale, setCurrentLocale] = useState(isSupportedLang ? i18n.language : Lang.en_US);
 
   const [registerErrors, setRegisterErrors] = useState<IErrorV3[]>([]);
 
-  const checkUserName = useCallback(async(event) => {
-    const axios = require('axios').create({
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Requested-With': 'XMLHttpRequest',
-      },
-      responseType: 'json',
-    });
-    const res = await axios.get('/_api/v3/check-username', { params: { username: event.target.value } });
-    setValidUserName(res.data.valid);
-  }, []);
-
   const onClickLanguageItem = useCallback((locale) => {
     i18n.changeLanguage(locale);
     setCurrentLocale(locale);
@@ -101,13 +88,8 @@ const InstallerForm = memo((props: Props): JSX.Element => {
     }
   }, [currentLocale, router, t]);
 
-  const hasErrorClass = isValidUserName ? '' : ' has-error';
-  const unavailableUserId = isValidUserName
-    ? ''
-    : <span><span className="material-symbols-outlined">block</span>{ t('installer.unavaliable_user_id') }</span>;
-
   return (
-    <div data-testid="installerForm" className={`${moduleClass} nologin-dialog py-3 px-4 rounded-4 rounded-top-0 mx-auto${hasErrorClass}`}>
+    <div data-testid="installerForm" className={`${moduleClass} nologin-dialog py-3 px-4 rounded-4 rounded-top-0 mx-auto`}>
       <div className="row mt-3">
         <div className="col-md-12">
           <p className="alert alert-success">
@@ -120,13 +102,15 @@ const InstallerForm = memo((props: Props): JSX.Element => {
 
         {
           registerErrors != null && registerErrors.length > 0 && (
-            <p className="alert alert-danger text-center">
-              {registerErrors.map(err => (
-                <span>
-                  {tWithOpt(err.message, err.args)}<br />
-                </span>
-              ))}
-            </p>
+            <div className="col-12">
+              <div className="alert alert-danger text-center">
+                {registerErrors.map(err => (
+                  <span>
+                    {tWithOpt(err.message, err.args)}<br />
+                  </span>
+                ))}
+              </div>
+            </div>
           )
         }
 
@@ -179,7 +163,7 @@ const InstallerForm = memo((props: Props): JSX.Element => {
             </div>
           </div>
 
-          <div className={`input-group mb-3${hasErrorClass}`}>
+          <div className="input-group mb-3">
             <label className="p-2 text-white opacity-75" aria-label={t('User ID')} htmlFor="tiUsername">
               <span className="material-symbols-outlined" aria-hidden>person</span>
             </label>
@@ -189,11 +173,9 @@ const InstallerForm = memo((props: Props): JSX.Element => {
               className="form-control rounded"
               placeholder={t('User ID')}
               name="registerForm[username]"
-              // onBlur={checkUserName} // need not to check username before installation -- 2020.07.24 Yuki Takei
               required
             />
           </div>
-          <p className="form-text">{ unavailableUserId }</p>
 
           <div className="input-group mb-3">
             <label className="p-2 text-white opacity-75" aria-label={t('Name')} htmlFor="tiName">