From 7cb87e87898d2cb2a997bf3d981a454b9da84836 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 28 May 2024 14:34:34 +0300
Subject: [PATCH] UI: Change validation application secret for OAuth2

---
 .../admin/oauth2-settings.component.html      | 17 ++++++++++----
 .../pages/admin/oauth2-settings.component.ts  | 23 +++++++++++++++----
 .../admin/security-settings.component.ts      |  2 +-
 .../assets/locale/locale.constant-en_US.json  |  4 ++++
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index 2e85f8b54b..2ea96f6387 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@@ -156,7 +156,7 @@
                                 <div [formGroupName]="n" fxLayout="row" fxLayoutGap="8px">
                                   <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
                                     <div fxFlex fxLayout="column">
-                                      <mat-form-field fxFlex class="mat-block" floatLabel="always">
+                                      <mat-form-field fxFlex class="mat-block" floatLabel="always" subscriptSizing="dynamic">
                                         <mat-label translate>admin.oauth2.mobile-package</mat-label>
                                         <input matInput formControlName="pkgName" placeholder="{{ 'admin.oauth2.mobile-package-placeholder' | translate }}" required>
                                         <mat-hint translate>admin.oauth2.mobile-package-hint</mat-hint>
@@ -166,9 +166,9 @@
                                       </mat-error>
                                     </div>
                                     <div fxFlex fxLayout="row">
-                                      <mat-form-field fxFlex class="mat-block">
+                                      <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
                                         <mat-label translate>admin.oauth2.mobile-app-secret</mat-label>
-                                        <textarea matInput formControlName="appSecret" rows="1" required></textarea>
+                                        <input matInput formControlName="appSecret" required>
                                         <tb-copy-button
                                           matSuffix
                                           miniButton="false"
@@ -178,8 +178,15 @@
                                           tooltipPosition="above"
                                           icon="mdi:clipboard-arrow-left">
                                         </tb-copy-button>
-                                        <mat-error *ngIf="mobileInfo.get('appSecret').invalid">
-                                          {{ 'admin.oauth2.invalid-mobile-app-secret' | translate }}
+                                        <mat-hint translate>admin.oauth2.mobile-app-secret-hint</mat-hint>
+                                        <mat-error *ngIf="mobileInfo.get('appSecret').hasError('required')">
+                                          {{ 'admin.oauth2.mobile-app-secret-required' | translate }}
+                                        </mat-error>
+                                        <mat-error *ngIf="mobileInfo.get('appSecret').hasError('base64')">
+                                          {{ 'admin.oauth2.mobile-app-secret-min-length' | translate }}
+                                        </mat-error>
+                                        <mat-error *ngIf="mobileInfo.get('appSecret').hasError('minLength')">
+                                          {{ 'admin.oauth2.mobile-app-secret-base64' | translate }}
                                         </mat-error>
                                       </mat-form-field>
                                     </div>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
index f6f8340550..f1eabf2d0c 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
@@ -17,6 +17,7 @@
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
+  FormControl,
   UntypedFormArray,
   UntypedFormBuilder,
   UntypedFormGroup,
@@ -215,7 +216,7 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
         this.oauth2SettingsForm.get('edgeEnabled').patchValue(false);
         this.oauth2SettingsForm.get('edgeEnabled').disable();
       }
-    }))
+    }));
   }
 
   private initOAuth2Settings(oauth2Info: OAuth2Info): void {
@@ -302,11 +303,25 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
   private buildMobileInfoForm(mobileInfo?: OAuth2MobileInfo): UntypedFormGroup {
     return this.fb.group({
       pkgName: [mobileInfo?.pkgName, [Validators.required]],
-      appSecret: [mobileInfo?.appSecret, [Validators.required, Validators.minLength(16), Validators.maxLength(2048),
-        Validators.pattern(/^[A-Za-z0-9]+$/)]],
+      appSecret: [mobileInfo?.appSecret, [Validators.required, this.base64Format]],
     }, {validators: this.uniquePkgNameValidator});
   }
 
+  private base64Format(control: FormControl): { [key: string]: boolean } | null {
+    if (control.value === '') {
+      return null;
+    }
+    try {
+      const value = atob(control.value);
+      if (value.length < 64) {
+        return {minLength: true};
+      }
+      return null;
+    } catch (e) {
+      return {base64: true};
+    }
+  }
+
   private buildRegistrationForm(registration?: OAuth2RegistrationInfo): UntypedFormGroup {
     let additionalInfo = null;
     if (isDefinedAndNotNull(registration?.additionalInfo)) {
@@ -556,7 +571,7 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
   addMobileInfo(control: AbstractControl): void {
     this.mobileInfos(control).push(this.buildMobileInfoForm({
       pkgName: '',
-      appSecret: randomAlphanumeric(24)
+      appSecret: btoa(randomAlphanumeric(64))
     }));
   }
 
diff --git a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts
index 17dda4a0c9..c7ac489753 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts
@@ -201,7 +201,7 @@ export class SecuritySettingsComponent extends PageComponent implements HasConfi
     }
     try {
       const value = atob(control.value);
-      if (value.length < 32) {
+      if (value.length < 64) {
         return {minLength: true};
       }
       return null;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index e376a20e31..c958c3a99e 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -292,6 +292,10 @@
           "mobile-package-hint": "For Android: your own unique Application ID. For iOS: Product bundle identifier.",
           "mobile-package-unique": "Application package must be unique.",
           "mobile-app-secret": "Application secret",
+          "mobile-app-secret-hint": "Base64 encoded string representing at least 512 bits of data.",
+          "mobile-app-secret-required": "Application secret is required.",
+          "mobile-app-secret-min-length": "Application secret must be at least 512 bits of data.",
+          "mobile-app-secret-base64": "Application secret must be base64 format.",
           "invalid-mobile-app-secret": "Application secret must contain only alphanumeric characters and must be between 16 and 2048 characters long.",
           "copy-mobile-app-secret": "Copy application secret",
           "add-mobile-app": "Add application",