Change inputs type from text to number (#17897)

1.Fixes #17890
   2.Update isDBAuth function

Signed-off-by: AllForNothing <sshijun@vmware.com>

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/harbor-shell/harbor-shell.component.html

@@ -92,7 +92,7 @@
                             {{ 'SYSTEM_ROBOT.ROBOT_ACCOUNT_NAV' | translate }}
                         </a>
                         <a
-                            *ngIf="isLdapMode || isHttpAuthMode || isOidcMode"
+                            *ngIf="!isDBAuth()"
                             clrVerticalNavLink
                             routerLink="/harbor/groups"
                             routerLinkActive="active">

src/portal/src/app/base/harbor-shell/harbor-shell.component.ts

@@ -29,7 +29,10 @@ import { NavigatorComponent } from '../../shared/components/navigator/navigator.
 import { SessionService } from '../../shared/services/session.service';
 import { AboutDialogComponent } from '../../shared/components/about-dialog/about-dialog.component';
 import { SearchTriggerService } from '../../shared/components/global-search/search-trigger.service';
-import { CommonRoutes } from '../../shared/entities/shared.const';
+import {
+    CommonRoutes,
+    CONFIG_AUTH_MODE,
+} from '../../shared/entities/shared.const';
 import { THEME_ARRAY, ThemeInterface } from '../../services/theme';
 import { clone, DEFAULT_PAGE_SIZE } from '../../shared/units/utils';
 import { ThemeService } from '../../services/theme.service';
@@ -70,9 +73,6 @@ export class HarborShellComponent implements OnInit, OnDestroy {
 
     searchSub: Subscription;
     searchCloseSub: Subscription;
-    isLdapMode: boolean;
-    isOidcMode: boolean;
-    isHttpAuthMode: boolean;
     showScannerInfo: boolean = false;
     scannerDocUrl: string = SCANNERS_DOC;
     themeArray: ThemeInterface[] = clone(THEME_ARRAY);
@@ -104,13 +104,6 @@ export class HarborShellComponent implements OnInit, OnDestroy {
                 }
             );
         }
-        if (this.appConfigService.isLdapMode()) {
-            this.isLdapMode = true;
-        } else if (this.appConfigService.isHttpAuthMode()) {
-            this.isHttpAuthMode = true;
-        } else if (this.appConfigService.isOidcMode()) {
-            this.isOidcMode = true;
-        }
         this.searchSub = this.searchTrigger.searchTriggerChan$.subscribe(
             searchEvt => {
                 if (searchEvt && searchEvt.trim() !== '') {
@@ -139,6 +132,16 @@ export class HarborShellComponent implements OnInit, OnDestroy {
             this.styleMode = localStorage.getItem(HAS_STYLE_MODE);
         }
     }
+    isDBAuth(): boolean {
+        if (this.appConfigService?.configurations?.auth_mode) {
+            return (
+                this.appConfigService.configurations.auth_mode ===
+                CONFIG_AUTH_MODE.DB_AUTH
+            );
+        }
+        return true;
+    }
+
     publishScrollEvent() {
         if (this.scrollDiv && this.scrollDiv.nativeElement) {
             this.event.publish(HarborEvent.SCROLL, {

src/portal/src/app/base/left-side-nav/config/system/system-settings.component.html

@@ -57,13 +57,13 @@
             <input
                 clrInput
                 name="tokenExpiration"
-                type="text"
+                type="number"
                 #tokenExpirationInput="ngModel"
-                [(ngModel)]="tokenExpirationValue"
+                [(ngModel)]="currentConfig.token_expiration.value"
                 required
                 pattern="^[1-9]{1}[0-9]*$"
                 id="tokenExpiration"
-                size="20"
+                max="9999999999"
                 [disabled]="!editable" />
             <clr-control-error>{{
                 'TOOLTIP.NUMBER_REQUIRED' | translate
@@ -90,13 +90,13 @@
             <input
                 clrInput
                 name="sessionTimeout"
-                type="text"
+                type="number"
                 #ngSessionTimeout="ngModel"
-                [(ngModel)]="sessionTimeout"
+                [(ngModel)]="currentConfig.session_timeout.value"
                 required
                 pattern="^[1-9]{1}[0-9]*$"
                 id="sessionTimeout"
-                size="10"
+                max="9999999999"
                 [disabled]="!editable" />
             <clr-control-error>{{
                 'TOOLTIP.NUMBER_REQUIRED' | translate
@@ -155,13 +155,13 @@
             <input
                 clrInput
                 name="robotTokenExpiration"
-                type="text"
+                type="number"
                 #robotTokenExpirationInput="ngModel"
-                [(ngModel)]="robotTokenExpirationValue"
+                [(ngModel)]="currentConfig.robot_token_duration.value"
                 required
                 pattern="^[1-9]{1}[0-9]*$"
                 id="robotTokenExpiration"
-                size="20"
+                max="9999999999"
                 [disabled]="!robotExpirationEditable" />
             <clr-control-error>{{
                 'ROBOT_ACCOUNT.NUMBER_REQUIRED' | translate

src/portal/src/app/base/left-side-nav/config/system/system-settings.component.scss

@@ -154,3 +154,14 @@
 .pro-creation {
   width: 12rem;
 }
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  appearance: textfield;
+}

src/portal/src/app/base/left-side-nav/config/system/system-settings.component.ts

@@ -56,33 +56,6 @@ export class SystemSettingsComponent implements OnInit {
         );
     }
 
-    get tokenExpirationValue() {
-        return this.currentConfig.token_expiration.value;
-    }
-
-    set tokenExpirationValue(v) {
-        // convert string to number
-        this.currentConfig.token_expiration.value = +v;
-    }
-
-    get sessionTimeout() {
-        return this.currentConfig.session_timeout.value;
-    }
-
-    set sessionTimeout(v) {
-        // convert string to number
-        this.currentConfig.session_timeout.value = +v;
-    }
-
-    get robotTokenExpirationValue() {
-        return this.currentConfig.robot_token_duration.value;
-    }
-
-    set robotTokenExpirationValue(v) {
-        // convert string to number
-        this.currentConfig.robot_token_duration.value = +v;
-    }
-
     robotNamePrefixEditable(): boolean {
         return (
             this.currentConfig &&