update webapp login ui (#1260)

README.md

@@ -37,7 +37,7 @@
 ### Features
 
 * Combines **monitoring, alarm, and notification** features into one platform, and supports monitoring for web service, database, os, middleware, cloud-native, network and more.
-* Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a click of a mouse, all at zero learning cost.
+* Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a few clicks, all at zero learning cost.
 * Makes protocols such as `Http, Jmx, Ssh, Snmp, Jdbc` configurable, allowing you to collect any metrics by simply configuring the template `YML` file online. Imagine being able to quickly adapt to a new monitoring type like K8s or Docker simply by configuring online with HertzBeat.
 * High performance, supports horizontal expansion of multi-collector clusters, multi-isolated network monitoring and cloud-edge collaboration.
 * Provides flexible alarm threshold rules and timely notifications delivered via  `Discord` `Slack` `Telegram` `Email` `Dingtalk` `WeChat` `FeiShu` `Webhook` `SMS` `ServerChan`.

home/blog/2023-08-14-hertzbeat-v1.4.0.md

@@ -18,7 +18,7 @@ keywords: [open source monitoring system, alerting system, Linux monitoring]
 ### Features
 
 * Combines **monitoring, alarm, and notification** features into one platform, and supports monitoring for web service, database, os, middleware, cloud-native, network and more.
-* Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a click of a mouse, all at zero learning cost.
+* Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a few clicks, all at zero learning cost.
 * Makes protocols such as `Http, Jmx, Ssh, Snmp, Jdbc` configurable, allowing you to collect any metrics by simply configuring the template `YML` file online. Imagine being able to quickly adapt to a new monitoring type like K8s or Docker simply by configuring online with HertzBeat.
 * High performance, supports horizontal expansion of multi-collector clusters, multi-isolated network monitoring and cloud-edge collaboration.
 * Provides flexible alarm threshold rules and timely notifications delivered via  `Discord` `Slack` `Telegram` `Email` `DingDing` `WeChat` `FeiShu` `Webhook` `SMS`.

home/docs/introduce.md

@@ -30,7 +30,7 @@ slug: /
 ### Features
 
 * Combines **monitoring, alarm, and notification** features into one platform, and supports monitoring for web service, database, os, middleware, cloud-native, network and more.
-* Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a click of a mouse, all at zero learning cost.
+* Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a few clicks, all at zero learning cost.
 * Makes protocols such as `Http, Jmx, Ssh, Snmp, Jdbc` configurable, allowing you to collect any metrics by simply configuring the template `YML` file online. Imagine being able to quickly adapt to a new monitoring type like K8s or Docker simply by configuring online with HertzBeat.
 * High performance, supports horizontal expansion of multi-collector clusters, multi-isolated network monitoring and cloud-edge collaboration.
 * Provides flexible alarm threshold rules and timely notifications delivered via  `Discord` `Slack` `Telegram` `Email` `DingDing` `WeChat` `FeiShu` `Webhook` `SMS`.

home/i18n/en/code.json

@@ -257,7 +257,7 @@
     "description": "The label used by the button on the collapsible TOC component"
   },
   "convenient-content": {
-    "message": "{docker} {br} [Monitoring+Alarm+Notification] all in one. Support monitoring web service, database, os, middleware, cloud-native, network and more. {br} Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a click of a mouse. {br} We also provider sass cloud - tancloud, {console}. Security is the most important, we encrypt the whole data of account and monitoring."
+    "message": "{docker} {br} [Monitoring+Alarm+Notification] all in one. Support monitoring web service, database, os, middleware, cloud-native, network and more. {br} Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a few clicks. {br} We also provider sass cloud - tancloud, {console}. Security is the most important, we encrypt the whole data of account and monitoring."
   },
   "custom-multi-support-content": {
     "message": "Makes protocols such as Http, Jmx, Ssh, Snmp, Jdbc configurable, allowing you to collect any metrics by simply configuring the template online. {br} High performance, supports horizontal expansion of multi-collector clusters, multi-isolated network monitoring and cloud-edge collaboration. {br} Provides flexible alarm threshold rules and timely notifications delivered via Discord Slack Telegram Email DingDing WeChat FeiShu Webhook SMS."

script/helm/hertzbeat/README.md

@@ -12,7 +12,7 @@
 ### Features
 
 * Combines **monitoring, alarm, and notification** features into one platform, and supports monitoring for web service, database, os, middleware, cloud-native, network and more.
-* Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a click of a mouse, all at zero learning cost.
+* Easy to use and agentless, offering full web-based operations for monitoring and alerting with just a few clicks, all at zero learning cost.
 * Makes protocols such as `Http, Jmx, Ssh, Snmp, Jdbc` configurable, allowing you to collect any metrics by simply configuring the template `YML` file online. Imagine being able to quickly adapt to a new monitoring type like K8s or Docker simply by configuring online with HertzBeat.
 * High performance, supports horizontal expansion of multi-collector clusters, multi-isolated network monitoring and cloud-edge collaboration.
 * Provides flexible alarm threshold rules and timely notifications delivered via  `Discord` `Slack` `Telegram` `Email` `Dingtalk` `WeChat` `FeiShu` `Webhook` `SMS` `ServerChan`.

web-app/src/app/layout/passport/passport.component.html

@@ -7,9 +7,39 @@
       </div>
       <div class="desc">{{ 'app.passport.desc' | i18n }}</div>
     </div>
-    <router-outlet></router-outlet>
-    <global-footer [links]="links">
-      <div style="margin-top: 0">
+    <div nz-row [nzGutter]="16">
+      <div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 10, offset: 2 }">
+        <div class="-inner-content; mobile-hide" style="margin-left: 10%">
+          <div style="margin-top: 10px; font-weight: bolder; font-size: xxx-large; color: white">
+            {{ 'app.passport.intro-1' | i18n }}<br />{{ 'app.passport.intro-2' | i18n }}
+          </div>
+          <nz-divider></nz-divider>
+          <div style="margin-top: 15px; font-weight: normal; font-size: medium; color: white">
+            <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+            {{ 'about.point.1' | i18n }}
+            <br />
+            <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+            {{ 'about.point.2' | i18n }}
+            <br />
+            <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+            {{ 'about.point.3' | i18n }}
+            <br />
+            <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+            {{ 'about.point.4' | i18n }}
+            <br />
+            <nz-badge nzColor="white" nzStatus="processing"></nz-badge>
+            {{ 'about.point.5' | i18n }}
+            <br />
+          </div>
+          <nz-divider></nz-divider>
+        </div>
+      </div>
+      <div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12 }">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+    <global-footer style="border-top: 1px solid #d692e3; min-height: 120px; margin-top: 10%">
+      <div style="margin-top: 30px">
         HertzBeat {{ version }}<br />
         Copyright &copy; 2021-{{ currentYear }}
         <a href="https://hertzbeat.com" target="_blank">hertzbeat.com</a>

web-app/src/app/routes/passport/lock/lock.component.html

@@ -1,4 +1,4 @@
-<div class="ant-card width-lg" style="margin: 0 auto">
+<div class="ant-card width-lg" style="margin: 0 auto; border-radius: 6px">
   <div class="ant-card-body">
     <div class="avatar">
       <nz-avatar [nzSrc]="user.avatar" nzIcon="user" nzSize="large"></nz-avatar>

web-app/src/app/routes/passport/login/login.component.html

@@ -1,31 +1,43 @@
-<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
-  <nz-tabset [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)">
-    <nz-tab [nzTitle]="'app.login.tab-login-credentials' | i18n">
-      <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
-      <nz-form-item>
-        <nz-form-control [nzErrorTip]="'app.login.message-need-identifier' | i18n">
-          <nz-input-group nzSize="large" nzPrefixIcon="user">
-            <input nz-input formControlName="userName" [placeholder]="'app.login.message-need-identifier' | i18n" />
-          </nz-input-group>
-        </nz-form-control>
-      </nz-form-item>
-      <nz-form-item>
-        <nz-form-control [nzErrorTip]="'app.login.message-need-credential' | i18n">
-          <nz-input-group nzSize="large" nzPrefixIcon="lock">
-            <input nz-input type="password" formControlName="password" [placeholder]="'app.login.message-need-credential' | i18n" />
-          </nz-input-group>
-        </nz-form-control>
-      </nz-form-item>
-    </nz-tab>
-  </nz-tabset>
-  <nz-form-item>
-    <nz-col [nzSpan]="12">
-      <label nz-checkbox formControlName="remember">{{ 'app.login.remember-me' | i18n }}</label>
-    </nz-col>
-  </nz-form-item>
-  <nz-form-item>
-    <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
-      {{ 'app.login.login' | i18n }}
-    </button>
-  </nz-form-item>
-</form>
+<div style="background-color: snow; padding: 20px; border-radius: 6px; box-shadow: 7px 5px #b421cc">
+  <form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
+    <nz-tabset [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)">
+      <nz-tab [nzTitle]="'app.login.tab-login-credentials' | i18n">
+        <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
+        <nz-form-item>
+          <nz-form-control [nzErrorTip]="'app.login.message-need-identifier' | i18n">
+            <nz-input-group nzSize="large" nzPrefixIcon="user">
+              <input nz-input formControlName="userName" [placeholder]="'app.login.message-need-identifier' | i18n" />
+            </nz-input-group>
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+          <nz-form-control [nzErrorTip]="'app.login.message-need-credential' | i18n">
+            <nz-input-group nzSize="large" nzPrefixIcon="lock">
+              <input nz-input type="password" formControlName="password" [placeholder]="'app.login.message-need-credential' | i18n" />
+            </nz-input-group>
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+          <nz-col [nzSpan]="12">
+            <label nz-checkbox formControlName="remember">{{ 'app.login.remember-me' | i18n }}</label>
+          </nz-col>
+        </nz-form-item>
+        <nz-form-item>
+          <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
+            {{ 'app.login.login' | i18n }}
+          </button>
+        </nz-form-item>
+      </nz-tab>
+      <nz-tab [nzTitle]="'app.login.explore.cloud' | i18n">
+        <div style="margin-top: 20%; margin-bottom: 20%; text-align: center">
+          <a href="https://console.tancloud.cn/" target="_blank">
+            <div class="hoverClass" style="border-radius: 4px; background-color: #3f51b5; padding: 6px; color: white">
+              {{ 'app.login.explore.cloud.detail' | i18n }}
+              <span nz-icon nzType="global" nzTheme="outline"></span>
+            </div>
+          </a>
+        </div>
+      </nz-tab>
+    </nz-tabset>
+  </form>
+</div>

web-app/src/app/routes/passport/login/login.component.ts

@@ -146,4 +146,6 @@ export class UserLoginComponent implements OnDestroy {
       clearInterval(this.interval$);
     }
   }
+
+  protected readonly window = window;
 }

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

@@ -454,14 +454,17 @@
   "app.lock": "Unlock",
   "app.lock.placeholder": "Enter Any To Unlock",
   "app.passport.desc": "An Open Source Real-Time Monitoring Tool",
-  "app.passport.welcome": "Welcome To Use TanCloud - Monitoring Cloud Service",
+  "app.passport.intro-1": "Open Source、Distributed",
+  "app.passport.intro-2": "Real-Time Monitoring",
   "app.login.message-need-identifier": "Please enter your username",
   "app.login.message-need-credential": "Please enter password",
   "app.login.message-invalid-credentials": "Invalid username or password",
-  "app.login.tab-login-credentials": "Credentials",
+  "app.login.tab-login-credentials": "Sign In HertzBeat",
   "app.login.remember-me": "Remember me",
   "app.login.login": "Login",
   "app.login.notify": "Please Login!",
+  "app.login.explore.cloud": "Explore Cloud",
+  "app.login.explore.cloud.detail": "Click to Explore HertzBeat Cloud",
   "tag.new": "New Tag",
   "tag.edit": "Edit Tag",
   "tag.search": "Search Tag",
@@ -541,11 +544,11 @@
   "collector.help": "In addition to using the built-in collector, you can register multiple collectors for use in <strong>High-Performance Cluster</strong> or <strong>Cloud-Edge Collaboration</strong> scenarios.<br>The collector cluster is used to manage registered collector cluster nodes, display the current collector cluster status and scheduling task distribution, and support batch operations such as deployment and deletion of collectors, online and offline operations.",
   "collector.help.link": "https://hertzbeat.com/docs/help/guide",
   "about.title": "HertzBeat is an open source, real-time monitoring system with custom, performance and agentless.",
-  "about.point.1": "Monitor, alarm, notify all in one, supports web, database, os, middleware, cloud-native, network etc.",
-  "about.point.2": "Easy to use, full web-based operations with just a click of a mouse.",
+  "about.point.1": "Monitor-alarm-notify all in one, supports web, database, os, middleware, network etc.",
+  "about.point.2": "Easy to use, full web-based operations with just a few clicks.",
   "about.point.3": "Powerful monitoring template capabilities, custom monitoring any metrics you want.",
-  "about.point.4": "High performance, supports collector cluster, multi-isolated network and cloud-edge collaboration.",
-  "about.point.5": "Flexible alarm threshold rules, timely notification via discord, slack, telegram, webhook etc.",
+  "about.point.4": "High performance, supports collector cluster, multi-isolated network and cloud-edge.",
+  "about.point.5": "Flexible alarm threshold, timely notification via discord, slack, telegram, webhook etc.",
   "about.help": "HertzBeat's powerful customization, multi-type support, high performance and easy expansion, aims to help users quickly build their own monitoring system.",
   "about.github": "Github",
   "about.gitee": "Gitee",

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

@@ -450,14 +450,17 @@
   "app.lock": "解除锁定",
   "app.lock.placeholder": "输入任意解锁",
   "app.passport.desc": "易用友好的开源实时监控系统",
-  "app.passport.welcome": "欢迎使用 TanCloud 监控云服务",
+  "app.passport.intro-1": "开源、高性能、分布式的",
+  "app.passport.intro-2": "实时监控",
   "app.login.message-need-identifier": "请输入用户名",
   "app.login.message-need-credential": "请输入密码",
   "app.login.message-invalid-credentials": "账户或密码错误",
-  "app.login.tab-login-credentials": "账户密码登录",
+  "app.login.tab-login-credentials": "登入 HertzBeat",
   "app.login.remember-me": "自动登录",
   "app.login.login": "登录",
   "app.login.notify": "请先登录!",
+  "app.login.explore.cloud": "探索云服务",
+  "app.login.explore.cloud.detail": "点击探索 HertzBeat 监控云服务",
   "tag.new": "新增标签",
   "tag.edit": "编辑标签",
   "tag.search": "搜索标签",
@@ -537,7 +540,7 @@
   "collector.help": "除了使用内置采集器外，您可以注册多个采集器应用于<strong>高性能集群</strong>或<strong>云边协同</strong>场景。<br>采集集群用于已注册的采集器集群节点管理，展示当前采集器集群状态和调度任务分布，支持对采集器的部署删除，上线下线等批量操作。",
   "collector.help.link": "https://hertzbeat.com/docs/help/guide",
   "about.title": "HertzBeat(赫兹跳动) 是一个拥有强大自定义监控能力，高性能集群，无需 Agent 的开源实时监控告警系统。",
-  "about.point.1": "一站式监控告警通知，支持应用服务，数据库，操作系统，中间件，云原生，网络等。",
+  "about.point.1": "一站式监控告警通知，支持应用服务、数据库、操作系统、中间件、云原生、网络等。",
   "about.point.2": "易用友好，无需 Agent，全页面操作，鼠标点一点就能监控告警。",
   "about.point.3": "强大监控模版能力，自定义监控任何您想要的指标。",
   "about.point.4": "高性能，采集器集群横向扩展，支持多隔离网络监控，云边协同。",

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

@@ -449,14 +449,17 @@
   "app.lock": "解除鎖定",
   "app.lock.placeholder": "輸入任意解鎖",
   "app.passport.desc": "易用友好的開源實時監控系統",
-  "app.passport.welcome": "歡迎使用TanCloud監控雲服務",
+  "app.passport.intro-1": "開源、高效能、分散式的",
+  "app.passport.intro-2": "即時監控",
   "app.login.message-need-identifier": "請輸入用戶名",
   "app.login.message-need-credential": "請輸入密碼",
   "app.login.message-invalid-credentials": "賬戶或密碼錯誤",
-  "app.login.tab-login-credentials": "賬戶密碼登錄",
+  "app.login.tab-login-credentials": "登錄 HertzBeat",
   "app.login.remember-me": "自動登錄",
   "app.login.login": "登錄",
   "app.login.notify": "请先登錄!",
+  "app.login.explore.cloud": "探索雲端服務",
+  "app.login.explore.cloud.detail": "點擊探索 HertzBeat 監控雲端服務",
   "tag.new": "新增標簽",
   "tag.edit": "編輯標簽",
   "tag.search": "搜索標簽",
@@ -536,7 +539,7 @@
   "collector.help": "除了使用內置採集器外，您可以註冊多個採集器應用於<strong>高性能集群</strong>或<strong>雲邊協同</strong>場景。<br>採集集群用於已註冊的採集器集群節點管理，展示當前採集器集群狀態和調度任務分佈，支持對採集器的部署刪除，上線下線等批量操作。",
   "collector.help.link": "https://hertzbeat.com/docs/help/guide",
   "about.title": "HertzBeat(赫茲跳動) 是一個擁有強大自定義監控能力，高性能集群，無需 Agent 的開源實時監控告警系統。",
-  "about.point.1": "一站式監控告警通知，支持應用服務，數據庫，操作系統，中間件，雲原生，網絡等。",
+  "about.point.1": "一站式監控告警通知，支持應用服務、數據庫、操作系統、中間件、雲原生、網絡等。",
   "about.point.2": "易用友好，無需 Agent，全頁面操作，鼠標點一點就能監控告警。",
   "about.point.3": "強大監控模版能力，自定義監控任何您想要的指標。",
   "about.point.4": "高性能，採集器集群橫向擴展，支持多隔離網絡監控，雲邊協同。",