fix: user signup without confirmation (#2046)

* Add condition of token when allowSignupWithoutConfirmation is set true

* emailInput, passwordInput, passwordConfirmInput set disable during signup

* removed innerHTML

* Add userNameInput to clear value after signup

* fix:token input's value add to body when allowSignupWithoutConfirmation is true

* fix:change condition that add to body token key when allowSignupWithoutConfirmation is false

src/components/backend-ai-signup.ts

@@ -55,12 +55,15 @@ export default class BackendAiSignup extends BackendAIPage {
   @property({ type: String }) TOSlanguage = 'en';
   @property({ type: String }) preloadedToken;
   @property({ type: Boolean }) allowSignupWithoutConfirmation;
+  @property({ type: HTMLSpanElement }) signupButtonMessage = html`
+    <span id="signup-button-message">${_text('signup.Signup')}</span>
+  `;
+  @query('#signup-button') signupButton!: Button;
   @query('#id_user_email') userEmailInput!: TextField;
   @query('#id_user_name') userNameInput!: TextField;
   @query('#id_token') tokenInput!: TextField;
   @query('#id_password1') passwordInput!: TextField;
   @query('#id_password2') passwordConfirmInput!: TextField;
-  @query('#signup-button') signupButton!: Button;
   @query('#signup-panel') signupPanel!: BackendAIDialog;
   @query('#block-panel') blockPanel!: BackendAIDialog;
   @query('#email-sent-dialog') emailSentDialog!: BackendAIDialog;
@@ -244,6 +247,7 @@ export default class BackendAiSignup extends BackendAIPage {
     this._toggleInputField(true);
     let inputFields = [
       this.userEmailInput,
+      this.userNameInput,
       this.tokenInput,
       this.passwordInput,
       this.passwordConfirmInput,
@@ -257,15 +261,20 @@ export default class BackendAiSignup extends BackendAIPage {
     if (this.preloadedToken !== undefined) {
       this.tokenInput.value = this.preloadedToken;
     }
-    (
-      this.shadowRoot?.querySelector(
-        '#signup-button-message',
-      ) as HTMLSpanElement
-    ).innerHTML = _text('signup.Signup');
+    this.signupButtonMessage = html`
+      <span id="signup-button-message">${_text('signup.Signup')}</span>
+    `;
   }
 
   _toggleInputField(isActive: boolean) {
-    let inputFields = [this.userNameInput, this.tokenInput, this.signupButton];
+    let inputFields = [
+      this.userEmailInput,
+      this.userNameInput,
+      this.tokenInput,
+      this.passwordInput,
+      this.passwordConfirmInput,
+      this.signupButton,
+    ];
     if (this.allowSignupWithoutConfirmation) {
       inputFields = inputFields.filter((el) => el !== this.tokenInput);
     }
@@ -308,7 +317,6 @@ export default class BackendAiSignup extends BackendAIPage {
     if (inputFieldsValidity.includes(false)) {
       return;
     }
-    const token = this.tokenInput.value;
     const user_email = this.userEmailInput.value;
     const user_name = this.userNameInput.value;
     const password = this.passwordInput.value;
@@ -318,22 +326,21 @@ export default class BackendAiSignup extends BackendAIPage {
       email: user_email,
       user_name: user_name,
       password: password,
-      token: token,
     };
-    if (this.allowSignupWithoutConfirmation) {
-      delete body[token];
+    if (!this.allowSignupWithoutConfirmation) {
+      body['token'] = this.tokenInput.value;
     }
     this.init_client();
     const rqst = this.client.newSignedRequest('POST', `/auth/signup`, body);
     this.client
       ._wrapWithPromise(rqst)
       .then((response) => {
         this._toggleInputField(false);
-        (
-          this.shadowRoot?.querySelector(
-            '#signup-button-message',
-          ) as HTMLSpanElement
-        ).innerHTML = _text('signup.SignupSucceeded');
+        this.signupButtonMessage = html`
+          <span id="signup-button-message">
+            ${_text('signup.SignupSucceeded')}
+          </span>
+        `;
         this.notification.text = _text('signup.SignupSucceeded');
         this.notification.show();
         setTimeout(() => {
@@ -613,7 +620,7 @@ export default class BackendAiSignup extends BackendAIPage {
             icon="check"
             @click="${() => this._signup()}"
           >
-            <span id="signup-button-message">${_text('signup.Signup')}</span>
+            ${this.signupButtonMessage}
           </mwc-button>
         </div>
       </backend-ai-dialog>