fix: remove unnecessary id attributes from forms in multiple components

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

@@ -93,132 +93,129 @@ export const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
   }
 
   return (
-    <>
-      <div
-        className={`${moduleClass} nologin-dialog mx-auto rounded-4 rounded-top-0`}
-        id="nologin-dialog"
-      >
-        <div className="row mx-0">
-          <div className="col-12 px-4">
-            {errorCode != null &&
-              errorCode === UserActivationErrorCode.TOKEN_NOT_FOUND && (
-                <p className="alert alert-danger">
-                  <span>Token not found</span>
-                </p>
-              )}
-
-            {errorCode != null &&
-              errorCode ===
-                UserActivationErrorCode.USER_REGISTRATION_ORDER_IS_NOT_APPROPRIATE && (
-                <p className="alert alert-danger">
-                  <span>{t('message.incorrect_token_or_expired_url')}</span>
-                </p>
-              )}
-
-            {!isEmailAuthenticationEnabled && (
+    <div
+      className={`${moduleClass} nologin-dialog mx-auto rounded-4 rounded-top-0`}
+    >
+      <div className="row mx-0">
+        <div className="col-12 px-4">
+          {errorCode != null &&
+            errorCode === UserActivationErrorCode.TOKEN_NOT_FOUND && (
               <p className="alert alert-danger">
-                <span>{t('message.email_authentication_is_not_enabled')}</span>
+                <span>Token not found</span>
               </p>
             )}
 
-            <form onSubmit={handleSubmitRegistration} id="registration-form">
-              <input type="hidden" name="token" value={token} />
+          {errorCode != null &&
+            errorCode ===
+              UserActivationErrorCode.USER_REGISTRATION_ORDER_IS_NOT_APPROPRIATE && (
+              <p className="alert alert-danger">
+                <span>{t('message.incorrect_token_or_expired_url')}</span>
+              </p>
+            )}
 
-              <div className="input-group">
-                <span className="p-2 text-white opacity-75">
-                  <span className="material-symbols-outlined">mail</span>
-                </span>
-                <input
-                  type="text"
-                  className="form-control rounded"
-                  placeholder={t('Email')}
-                  disabled
-                  value={email}
-                />
-              </div>
-
-              <div className="input-group" id="input-group-username">
-                <span className="p-2 text-white opacity-75">
-                  <span className="material-symbols-outlined">person</span>
-                </span>
-                <input
-                  type="text"
-                  className="form-control rounded"
-                  placeholder={t('User ID')}
-                  name="username"
-                  onChange={(e) => setUsername(e.target.value)}
-                  required
-                  disabled={forceDisableForm || disableForm}
-                />
-              </div>
-              {!usernameAvailable && (
-                <p className="form-text text-red">
-                  <span id="help-block-username">
-                    <span className="p-2 text-white opacity-75">
-                      <span className="material-symbols-outlined">block</span>
-                    </span>
-                    {t('installer.unavaliable_user_id')}
+          {!isEmailAuthenticationEnabled && (
+            <p className="alert alert-danger">
+              <span>{t('message.email_authentication_is_not_enabled')}</span>
+            </p>
+          )}
+
+          <form onSubmit={handleSubmitRegistration} id="registration-form">
+            <input type="hidden" name="token" value={token} />
+
+            <div className="input-group">
+              <span className="p-2 text-white opacity-75">
+                <span className="material-symbols-outlined">mail</span>
+              </span>
+              <input
+                type="text"
+                className="form-control rounded"
+                placeholder={t('Email')}
+                disabled
+                value={email}
+              />
+            </div>
+
+            <div className="input-group">
+              <span className="p-2 text-white opacity-75">
+                <span className="material-symbols-outlined">person</span>
+              </span>
+              <input
+                type="text"
+                className="form-control rounded"
+                placeholder={t('User ID')}
+                name="username"
+                onChange={(e) => setUsername(e.target.value)}
+                required
+                disabled={forceDisableForm || disableForm}
+              />
+            </div>
+            {!usernameAvailable && (
+              <p className="form-text text-red">
+                <span>
+                  <span className="p-2 text-white opacity-75">
+                    <span className="material-symbols-outlined">block</span>
                   </span>
-                </p>
-              )}
-
-              <div className="input-group">
-                <span className="p-2 text-white opacity-75">
-                  <span className="material-symbols-outlined">sell</span>
+                  {t('installer.unavaliable_user_id')}
                 </span>
-                <input
-                  type="text"
-                  className="form-control rounded"
-                  placeholder={t('Name')}
-                  name="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  required
-                  disabled={forceDisableForm || disableForm}
-                />
-              </div>
-
-              <div className="input-group">
-                <span className="p-2 text-white opacity-75">
-                  <span className="material-symbols-outlined">lock</span>
-                </span>
-                <input
-                  type="password"
-                  className="form-control rounded"
-                  placeholder={t('Password')}
-                  name="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                  disabled={forceDisableForm || disableForm}
-                />
-              </div>
-
-              <div className="input-group justify-content-center mt-4">
-                <button
-                  type="submit"
-                  disabled={forceDisableForm || disableForm}
-                  className="btn btn-secondary btn-register col-6 mx-auto d-flex"
-                >
-                  <span>
-                    <span className="material-symbols-outlined">
-                      person_add
-                    </span>
+              </p>
+            )}
+
+            <div className="input-group">
+              <span className="p-2 text-white opacity-75">
+                <span className="material-symbols-outlined">sell</span>
+              </span>
+              <input
+                type="text"
+                className="form-control rounded"
+                placeholder={t('Name')}
+                name="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+                disabled={forceDisableForm || disableForm}
+              />
+            </div>
+
+            <div className="input-group">
+              <span className="p-2 text-white opacity-75">
+                <span className="material-symbols-outlined">lock</span>
+              </span>
+              <input
+                type="password"
+                className="form-control rounded"
+                placeholder={t('Password')}
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                disabled={forceDisableForm || disableForm}
+              />
+            </div>
+
+            <div className="input-group justify-content-center mt-4">
+              <button
+                type="submit"
+                disabled={forceDisableForm || disableForm}
+                className="btn btn-secondary btn-register col-6 mx-auto d-flex"
+              >
+                <span>
+                  <span className="material-symbols-outlined">
+                    person_add
                   </span>
-                  <span className="flex-grow-1">{t('Create')}</span>
-                </button>
-              </div>
-
-              <div className="input-group mt-5 d-flex">
-                <a href="https://growi.org" className="link-growi-org">
-                  <span className="growi">GROWI</span>
-                  <span className="org">.org</span>
-                </a>
-              </div>
-            </form>
-          </div>
+                </span>
+                <span className="flex-grow-1">{t('Create')}</span>
+              </button>
+            </div>
+
+            <div className="input-group mt-5 d-flex">
+              <a href="https://growi.org" className="link-growi-org">
+                <span className="growi">GROWI</span>
+                <span className="org">.org</span>
+              </a>
+            </div>
+          </form>
         </div>
       </div>
-    </>
+    </div>
   );
 };

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

@@ -126,7 +126,7 @@ const InstallerForm = memo((props: Props): JSX.Element => {
           </div>
         )}
 
-        <form id="register-form" className="ps-1" onSubmit={submitHandler}>
+        <form className="ps-1" onSubmit={submitHandler}>
           <div className="dropdown mb-3">
             <div className="input-group dropdown-with-icon">
               <span className="p-2 text-white opacity-75">

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

@@ -90,9 +90,9 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
   }
 
   return (
-    <div className="nologin-dialog px-3 pb-3 mx-auto" id="nologin-dialog">
+    <div className="nologin-dialog px-3 pb-3 mx-auto">
       {formNotification()}
-      <form onSubmit={handleSubmit(submitHandler)} id="invited-form">
+      <form onSubmit={handleSubmit(submitHandler)}>
         {/* Email Form */}
         <div className="input-group">
           <span className="input-group-text">
@@ -109,7 +109,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
           />
         </div>
         {/* UserID Form */}
-        <div className="input-group" id="input-group-username">
+        <div className="input-group">
           <span className="input-group-text">
             <span className="material-symbols-outlined">person</span>
           </span>

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

@@ -415,13 +415,10 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           </p>
         )}
 
-        <form
-          onSubmit={(e) => handleRegisterFormSubmit(e, registerAction)}
-          id="register-form"
-        >
+        <form onSubmit={(e) => handleRegisterFormSubmit(e, registerAction)}>
           {!isEmailAuthenticationEnabled && (
             <div>
-              <div className="input-group" id="input-group-username">
+              <div className="input-group">
                 <span className="text-white opacity-75 d-flex align-items-center">
                   <span className="material-symbols-outlined">person</span>
                 </span>
@@ -439,7 +436,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                 />
               </div>
               <p className="form-text text-danger">
-                <span id="help-block-username"></span>
+                <span></span>
               </p>
               <div className="input-group">
                 <span className="text-white opacity-75 d-flex align-items-center">