fix(arc-saas): key validation changes

key validation changes

Author: Deepika516

projects/saas-ui/src/app/main/styles/grid-styles.scss

@@ -14,10 +14,13 @@
   width: 100%;
   overflow: auto;
   height: calc(100vh - 120px);
+  border-radius: 15px;
 }
 .ag-theme-quartz {
   width: 100%;
   height: 650px;
+  --ag-font-family: sans-serif;
+  --ag-font-size: 16px;
 }
 
 .regbtn {

projects/saas-ui/src/app/on-boarding/commands/get-all-tenant-command.ts

@@ -10,12 +10,13 @@ export class GetAllTenantKeysCommand<T> extends GetAPICommand<T> {
   constructor(
     apiService: IApiService,
     adapter: IAdapter<T>,
+    key: string,
     appConfig: IAnyObject,
   ) {
     super(
       apiService,
       adapter,
-      `${appConfig.baseApiUrl}${appConfig.tenantmgmtServiceUrl}/tenant/keys`,
+      `${appConfig.baseApiUrl}${appConfig.tenantmgmtServiceUrl}/verify-key/${key}`,
     );
   }
 }

projects/saas-ui/src/app/on-boarding/components/add-subscriber/add-subscriber.component.html

@@ -223,13 +223,14 @@ <h2 class="title">Marketplace Registration</h2>
                     Application Sub-Domain <span class="required">*</span>
                   </span>
                 </div>
+
                 <div class="input">
                   <div class="input-container">
                     <input
-                      placeholder="Enter the subdomain of your application"
+                      placeholder="Enter the key of your application"
                       fieldSize="medium"
                       status="info"
-                      formControlName="subdomain"
+                      formControlName="key"
                       nbInput
                     />
                     <nb-icon
@@ -238,26 +239,40 @@ <h2 class="title">Marketplace Registration</h2>
                       nbTooltip="Enter a unique key starting with an alphabet. This field is required and has a maximum length of 20 characters. Special characters are not allowed."
                     ></nb-icon>
                   </div>
+
                   <div>
                     <div
                       *ngIf="
-                        marketSubsForm.get('subdomain').valid &&
-                        keyVerificationMessage &&
-                        marketSubsForm.get('subdomain').touched
+                        marketSubsForm.get('key').hasError('keyExists') &&
+                        marketSubsForm.get('key').touched
                       "
-                      class="message"
+                      class="error-msg"
                     >
                       {{ keyVerificationMessage }}
                     </div>
+
+                    <div
+                      *ngIf="
+                        marketSubsForm.get('key').valid &&
+                        marketSubsForm.get('key').touched
+                      "
+                      class="success-msg"
+                    >
+                      <nb-icon
+                        icon="checkmark-circle-2-outline"
+                        class="success-icon"
+                      ></nb-icon>
+                      {{ keyVerificationSuccess }}
+                    </div>
                     <div
                       *ngIf="
-                        marketSubsForm.get('subdomain').hasError('pattern') &&
-                        marketSubsForm.get('subdomain').touched
+                        marketSubsForm.get('key').hasError('pattern') &&
+                        marketSubsForm.get('key').touched
                       "
                       class="error-msg"
                     >
                       Subdomain must start with a letter and can include numbers
-                      and hyphens and has maximum length 20.
+                      and hyphens and has a maximum length of 20.
                     </div>
                   </div>
                 </div>

projects/saas-ui/src/app/on-boarding/components/add-subscriber/add-subscriber.component.scss

@@ -25,6 +25,19 @@
   color: #007bff;
 }
 
+
+.success-msg {
+  color: green;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.success-icon {
+  color: green;
+  margin-right: 5px;
+}
+
 .input-box {
   .input {
     select {

projects/saas-ui/src/app/on-boarding/components/add-subscriber/add-subscriber.component.ts

@@ -37,7 +37,7 @@ export class AddSubscriberComponent {
       address: [''],
       country: ['', Validators.required],
       zip: ['', [Validators.required, Validators.pattern('^[0-9]*$')]],
-      subdomain: [
+      key: [
         '',
         [
           Validators.required,
@@ -64,34 +64,39 @@ export class AddSubscriberComponent {
     });
 
     this.marketSubsForm
-      .get('subdomain')
+      .get('key')
       ?.valueChanges.pipe(debounceTime(1500), distinctUntilChanged())
-      .subscribe(subdomain => {
-        const subdomainControl = this.marketSubsForm.get('subdomain');
+      .subscribe(key => {
+        const subdomainControl = this.marketSubsForm.get('key');
         if (subdomainControl && subdomainControl.valid) {
-          this.verifyKey(subdomain);
+          this.verifyKey(key);
         } else {
           this.keyVerificationMessage = '';
         }
       });
   }
 
-  verifyKey(subdomain: string) {
-    this.onBoardingService.getAllTenantKeys().subscribe(
-      (response: string[]) => {
-        if (response.includes(subdomain)) {
-          this.marketSubsForm.get('subdomain')?.setErrors({keyExists: true});
-          this.keyVerificationMessage =
-            'Subdomain already exists. Please choose another one.';
-        } else {
-          this.marketSubsForm.get('subdomain')?.setErrors(null);
-          this.keyVerificationMessage = 'Subdomain is available.';
-        }
-      },
-      error => {
-        this.keyVerificationMessage = 'Error verifying subdomain';
-      },
-    );
+  verifyKey(key: string) {
+    this.onBoardingService
+      .getAllTenantKeys(this.marketSubsForm.get('key')?.value)
+      .subscribe(
+        response => {
+          if (response.exists) {
+            this.marketSubsForm.get('key')?.setErrors({keyExists: true});
+            this.keyVerificationMessage =
+              'Subdomain already exists. Please choose another one.';
+            this.keyVerificationSuccess = '';
+          } else {
+            this.marketSubsForm.get('key')?.setErrors(null);
+            this.keyVerificationSuccess = 'Subdomain is available.';
+            this.keyVerificationMessage = '';
+          }
+        },
+        error => {
+          this.keyVerificationMessage = 'Error verifying subdomain';
+          this.keyVerificationSuccess = '';
+        },
+      );
   }
 
   showToastr(status: string, message: string) {
@@ -113,7 +118,7 @@ export class AddSubscriberComponent {
         address: userData.address,
         country: userData.country,
         zip: userData.zip,
-        subdomain: userData.subdomain,
+        key: userData.key,
         regToken: this.regToken,
       };
       console.log(user);

projects/saas-ui/src/app/shared/models/key.model.ts

@@ -0,0 +1,3 @@
+export class KeyResponse {
+  exists: boolean;
+}

projects/saas-ui/src/app/shared/models/subscriber.model.ts

@@ -7,6 +7,6 @@ export interface Subscriber {
   address?: string;
   country: string;
   zip?: string;
-  subdomain: string;
+  key: string;
   regToken: string;
 }

projects/saas-ui/src/app/shared/services/on-boarding-service.ts

@@ -48,10 +48,11 @@ export class OnBoardingService {
     private readonly getPlanAdapter: GetPlanAdapter,
     @Inject(APP_CONFIG) private readonly appConfig: IAnyObject,
   ) {}
-  public getAllTenantKeys() {
+  public getAllTenantKeys(key: string) {
     const command: GetAllTenantKeysCommand<any> = new GetAllTenantKeysCommand(
       this.apiService,
       this.anyAdapter,
+      key,
       this.appConfig,
     );