[Improve] add no popup option after next login (#2969)

Co-authored-by: tomsun28 <[email protected]>

web-app/src/app/layout/basic/widgets/user.component.ts

@@ -70,6 +70,13 @@ import { CONSTANTS } from '../../../shared/constants';
           <nz-divider nzType="vertical"></nz-divider>
           <a href="https://hertzbeat.apache.org" target="_blank">Apache HertzBeat (incubating)</a>
         </div>
+        <label
+          style="margin-top: 16px;color:gray;font-size:13px"
+          (ngModelChange)="onNotShowAgainChange($event)"
+          nz-checkbox
+          [(ngModel)]="notShowAgain"
+          >{{ 'about.not-show-next-login' | i18n }}
+        </label>
         <nz-divider></nz-divider>
         <div style="margin-top: 10px; font-weight: bolder">
           <span nz-icon nzType="github"></span>
@@ -102,21 +109,32 @@ import { CONSTANTS } from '../../../shared/constants';
 })
 export class HeaderUserComponent {
   isAboutModalVisible = false;
+  notShowAgain = false;
   version = CONSTANTS.VERSION;
   currentYear = new Date().getFullYear();
   get user(): User {
     return this.settings.user;
   }
+  private readonly notShowAgainKey = 'NOT_SHOW_ABOUT_NEXT_LOGIN';
 
   constructor(private settings: SettingsService, private router: Router, private localStorageSvc: LocalStorageService) {
+    this.notShowAgain =
+      this.localStorageSvc.getData(this.notShowAgainKey) !== null
+        ? JSON.parse(<string>this.localStorageSvc.getData(this.notShowAgainKey))
+        : false;
     // @ts-ignore
-    if (router.getCurrentNavigation()?.previousNavigation?.finalUrl.toString() === '/passport/login') {
+    if (router.getCurrentNavigation()?.previousNavigation?.finalUrl.toString() === '/passport/login' && !this.notShowAgain) {
       this.showAndCloseAboutModal();
     }
   }
 
   logout(): void {
+    let tmp = this.localStorageSvc.getData(this.notShowAgainKey);
+    if (tmp === null) {
+      tmp = 'false';
+    }
     this.localStorageSvc.clear();
+    this.localStorageSvc.putData(this.notShowAgainKey, tmp);
     this.router.navigateByUrl('/passport/login');
   }
 
@@ -132,4 +150,9 @@ export class HeaderUserComponent {
     this.isAboutModalVisible = true;
     setTimeout(() => (this.isAboutModalVisible = false), 20000);
   }
+
+  onNotShowAgainChange(value: boolean): void {
+    this.notShowAgain = value;
+    this.localStorageSvc.putData(this.notShowAgainKey, JSON.stringify(value));
+  }
 }

web-app/src/app/layout/layout.module.ts

@@ -46,6 +46,7 @@ import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzListComponent, NzListItemActionComponent, NzListItemComponent, NzListItemMetaComponent } from 'ng-zorro-antd/list';
 import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
+import { NzCheckboxComponent } from 'ng-zorro-antd/checkbox';
 const PASSPORT = [LayoutPassportComponent];
 
 @NgModule({
@@ -76,7 +77,8 @@ const PASSPORT = [LayoutPassportComponent];
     NzListItemMetaComponent,
     NzStringTemplateOutletDirective,
     NzListItemActionComponent,
-    NzTooltipDirective
+    NzTooltipDirective,
+    NzCheckboxComponent
   ],
   declarations: [...COMPONENTS, ...HEADER_COMPONENTS, ...PASSPORT],
   exports: [...COMPONENTS, ...PASSPORT]

web-app/src/assets/i18n/en-US.json

@@ -694,6 +694,7 @@
   "about.doc": "Document",
   "about.upgrade": "Upgrade",
   "about.star": "Star",
+  "about.not-show-next-login": " Do not show this popup on next login",
   "status.page": "Status Page",
   "status.org.name": "Organization Name",
   "status.org.name.tip": "The name of the organization team displayed on the status page, such as TanCloud",

web-app/src/assets/i18n/zh-CN.json

@@ -700,6 +700,7 @@
   "about.doc": "文档中心",
   "about.upgrade": "升级指引",
   "about.star": "点赞支持",
+  "about.not-show-next-login": "下次登录不再弹出此弹窗",
   "status.page": "状态页面",
   "status.org.name": "组织名称",
   "status.org.name.tip": "状态页面展示的组织团队名称,如 TanCloud",