chg:login page

angular.json

@@ -29,9 +29,15 @@
             "aot": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
+              }
             ],
             "styles": [
+              "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
               "src/styles.scss"
             ],
             "scripts": []

package.json

@@ -17,7 +17,6 @@
       "eslint --quiet"
     ]
   },
-
   "dependencies": {
     "@angular/animations": "~11.2.13",
     "@angular/common": "~11.2.13",
@@ -27,6 +26,7 @@
     "@angular/platform-browser": "~11.2.13",
     "@angular/platform-browser-dynamic": "~11.2.13",
     "@angular/router": "~11.2.13",
+    "ng-zorro-antd": "11.4.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.3"
@@ -44,13 +44,13 @@
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "4.3.0",
     "@typescript-eslint/parser": "4.3.0",
+    "codelyzer": "^6.0.0",
     "eslint": "^7.6.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
-    "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.1.0",

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes:Routes = [];
+import { LoginComponent } from './page/login/login.component';
+
+const routes:Routes = [
+  { path: 'login', component: LoginComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<style>
-  :host {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-size: 14px;
-    color: #333;
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 8px 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .spacer {
-    flex: 1;
-  }
-
-  .toolbar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-  }
-
-  .toolbar img {
-    margin: 0 16px;
-  }
-
-  .toolbar #twitter-logo {
-    height: 40px;
-    margin: 0 8px;
-  }
-
-  .toolbar #youtube-logo {
-    height: 40px;
-    margin: 0 16px;
-  }
-
-  .toolbar #twitter-logo:hover,
-  .toolbar #youtube-logo:hover {
-    opacity: 0.8;
-  }
-
-  .content {
-    display: flex;
-    margin: 82px auto 32px;
-    padding: 0 16px;
-    max-width: 960px;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  svg.material-icons {
-    height: 24px;
-    width: auto;
-  }
-
-  svg.material-icons:not(:last-child) {
-    margin-right: 8px;
-  }
-
-  .card svg.material-icons path {
-    fill: #888;
-  }
-
-  .card-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-top: 16px;
-  }
-
-  .card {
-    border-radius: 4px;
-    border: 1px solid #eee;
-    background-color: #fafafa;
-    height: 40px;
-    width: 200px;
-    margin: 0 8px 16px;
-    padding: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.2s ease-in-out;
-    line-height: 24px;
-  }
-
-  .card-container .card:not(:last-child) {
-    margin-right: 0;
-  }
-
-  .card.card-small {
-    height: 16px;
-    width: 168px;
-  }
-
-  .card-container .card:not(.highlight-card) {
-    cursor: pointer;
-  }
-
-  .card-container .card:not(.highlight-card):hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
-  }
-
-  .card-container .card:not(.highlight-card):hover .material-icons path {
-    fill: rgb(105, 103, 103);
-  }
-
-  .card.highlight-card {
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-    border: none;
-    width: auto;
-    min-width: 30%;
-    position: relative;
-  }
-
-  .card.card.highlight-card span {
-    margin-left: 60px;
-  }
-
-  svg#rocket {
-    width: 80px;
-    position: absolute;
-    left: -10px;
-    top: -24px;
-  }
-
-  svg#rocket-smoke {
-    height: calc(100vh - 95px);
-    position: absolute;
-    top: 10px;
-    right: 180px;
-    z-index: -10;
-  }
-
-  a,
-  a:visited,
-  a:hover {
-    color: #1976d2;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: #125699;
-  }
-
-  .terminal {
-    position: relative;
-    width: 80%;
-    max-width: 600px;
-    border-radius: 6px;
-    padding-top: 45px;
-    margin-top: 8px;
-    overflow: hidden;
-    background-color: rgb(15, 15, 16);
-  }
-
-  .terminal::before {
-    content: "\2022 \2022 \2022";
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 4px;
-    background: rgb(58, 58, 58);
-    color: #c2c3c4;
-    width: 100%;
-    font-size: 2rem;
-    line-height: 0;
-    padding: 14px 0;
-    text-indent: 4px;
-  }
-
-  .terminal pre {
-    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
-    color: white;
-    padding: 0 1rem 1rem;
-    margin: 0;
-  }
-
-  .circle-link {
-    height: 40px;
-    width: 40px;
-    border-radius: 40px;
-    margin: 8px;
-    background-color: white;
-    border: 1px solid #eeeeee;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    transition: 1s ease-out;
-  }
-
-  .circle-link:hover {
-    transform: translateY(-0.25rem);
-    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-  }
-
-  footer {
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-    line-height: 20px;
-  }
-
-  footer a {
-    display: flex;
-    align-items: center;
-  }
-
-  .github-star-badge {
-    color: #24292e;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    padding: 3px 10px;
-    border: 1px solid rgba(27,31,35,.2);
-    border-radius: 3px;
-    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
-    margin-left: 4px;
-    font-weight: 600;
-    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  }
-
-  .github-star-badge:hover {
-    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
-    border-color: rgba(27,31,35,.35);
-    background-position: -.5em;
-  }
-
-  .github-star-badge .material-icons {
-    height: 16px;
-    width: 16px;
-    margin-right: 4px;
-  }
-
-  svg#clouds {
-    position: fixed;
-    bottom: -160px;
-    left: -230px;
-    z-index: -10;
-    width: 1920px;
-  }
-
-
-  /* Responsive Styles */
-  @media screen and (max-width: 767px) {
-
-    .card-container > *:not(.circle-link) ,
-    .terminal {
-      width: 100%;
-    }
-
-    .card:not(.highlight-card) {
-      height: 16px;
-      margin: 8px 0;
-    }
-
-    .card.highlight-card span {
-      margin-left: 72px;
-    }
-
-    svg#rocket-smoke {
-      right: 120px;
-      transform: rotate(-5deg);
-    }
-  }
-
-  @media screen and (max-width: 575px) {
-    svg#rocket-smoke {
-      display: none;
-      visibility: hidden;
-    }
-  }
-</style>
-
-<!-- Toolbar -->
-<div class="toolbar" role="banner">
-  <img
-    width="40"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-  />
-  <span>Welcome</span>
-    <div class="spacer"></div>
-    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
-      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
-        <rect width="400" height="400" fill="none"/>
-        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
-      </svg>
-    </a>
-    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
-      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
-        <path d="M0 0h24v24H0V0z" fill="none"/>
-        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
-      </svg>
-    </a>
-</div>
-
-<div class="content" role="main">
-
-  <!-- Highlight Card -->
-  <div class="card highlight-card card-small">
-
-    <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
-      <title>Rocket Ship</title>
-      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
-        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
-        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
-          <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
-          <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
-        </g>
-      </g>
-    </svg>
-
-    <span>{{ title }} app is running!</span>
-
-    <svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
-      <title>Rocket Ship Smoke</title>
-      <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
-    </svg>
-
-  </div>
-
-  <!-- Resources -->
-  <h2>Resources</h2>
-  <p>Here are some links to help you get started:</p>
-
-  <div class="card-container">
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
-
-      <span>Learn Angular</span>
-
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
-
-      <span>CLI Documentation</span>
-
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-    <a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
-
-      <span>Angular Blog</span>
-
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
-    </a>
-
-  </div>
-
-  <!-- Next Steps -->
-  <h2>Next Steps</h2>
-  <p>What do you want to do next with your app?</p>
-
-  <input type="hidden" #selection>
-
-  <div class="card-container">
-    <div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
-      <span>New Component</span>
-    </div>
-
-    <div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
-      <span>Angular Material</span>
-    </div>
-
-    <div class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
-      <span>Add PWA Support</span>
-    </div>
-
-    <div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
-      <span>Add Dependency</span>
-    </div>
-
-    <div class="card card-small" (click)="selection.value = 'test'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
-      <span>Run and Watch Tests</span>
-    </div>
-
-    <div class="card card-small" (click)="selection.value = 'build'" tabindex="0">
-      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-
-      <span>Build for Production</span>
-    </div>
-  </div>
-
-  <!-- Terminal -->
-  <div class="terminal" [ngSwitch]="selection.value">
-      <pre *ngSwitchDefault>ng generate component xyz</pre>
-      <pre *ngSwitchCase="'material'">ng add @angular/material</pre>
-      <pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
-      <pre *ngSwitchCase="'dependency'">ng add _____</pre>
-      <pre *ngSwitchCase="'test'">ng test</pre>
-      <pre *ngSwitchCase="'build'">ng build --prod</pre>
-  </div>
-
-  <!-- Links -->
-  <div class="card-container">
-    <a class="circle-link" title="Animations" href="https://angular.io/guide/animations" target="_blank" rel="noopener">
-      <svg id="Group_20" data-name="Group 20" xmlns="http://www.w3.org/2000/svg" width="21.813" height="23.453" viewBox="0 0 21.813 23.453">
-        <path id="Path_15" data-name="Path 15" d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#ffa726"/>
-        <path id="Path_16" data-name="Path 16" d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#fb8c00"/>
-        <path id="Path_17" data-name="Path 17" d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/>
-        <path id="Path_18" data-name="Path 18" d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/>
-        <path id="Path_19" data-name="Path 19" d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/>
-      </svg>
-    </a>
-
-    <a class="circle-link" title="CLI" href="https://cli.angular.io/" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="21.762" height="23.447" viewBox="0 0 21.762 23.447">
-        <title>Angular CLI Logo</title>
-        <g id="Group_21" data-name="Group 21" transform="translate(0)">
-          <path id="Path_20" data-name="Path 20" d="M2660.313,313.618h0l-10.833,3.9,1.637,14.4,9.2,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-2649.48 -313.618)" fill="#37474f"/>
-          <path id="Path_21" data-name="Path 21" d="M2741.883,313.618v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-2731.05 -313.618)" fill="#263238"/>
-          <path id="Path_22" data-name="Path 22" d="M2692.293,379.169h11.724V368.618h-11.724Zm11.159-.6h-10.608v-9.345h10.621v9.345Z" transform="translate(-2687.274 -362.17)" fill="#fff"/>
-          <path id="Path_23" data-name="Path 23" d="M2709.331,393.688l.4.416,2.265-2.28-2.294-2.294-.4.4,1.893,1.893Z" transform="translate(-2702.289 -380.631)" fill="#fff"/>
-          <rect id="Rectangle_12" data-name="Rectangle 12" width="3.517" height="0.469" transform="translate(9.709 13.744)" fill="#fff"/>
-        </g>
-      </svg>
-    </a>
-
-    <a class="circle-link" title="Protractor" href="https://www.protractortest.org/" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="21.81" height="23.447" viewBox="0 0 21.81 23.447">
-        <title>Angular Protractor Logo</title>
-        <g id="Group_26" data-name="Group 26" transform="translate(0)">
-          <path id="Path_28" data-name="Path 28" d="M4620.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z" transform="translate(-4609.274 -311.417)" fill="#e13439"/>
-          <path id="Path_29" data-name="Path 29" d="M4702.088,311.417v23.447l9.244-5.152,1.685-14.4Z" transform="translate(-4691.207 -311.417)" fill="#b52f32"/>
-          <path id="Path_30" data-name="Path 30" d="M4651.044,369.58v-.421h1.483a7.6,7.6,0,0,0-2.106-5.052l-1.123,1.123-.3-.3,1.122-1.121a7.588,7.588,0,0,0-4.946-2.055v1.482h-.421v-1.485a7.589,7.589,0,0,0-5.051,2.058l1.122,1.121-.3.3-1.123-1.123a7.591,7.591,0,0,0-2.106,5.052h1.482v.421h-1.489v1.734h15.241V369.58Zm-10.966-.263a4.835,4.835,0,0,1,9.67,0Z" transform="translate(-4634.008 -355.852)" fill="#fff"/>
-        </g>
-      </svg>
-    </a>
-
-    <a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
-        <title>Meetup Logo</title>
-        <path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
-      </svg>
-    </a>
-
-    <a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
-      <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
-        <title>Discord Logo</title>
-        <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
-        <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
-      </svg>
-    </a>
-  </div>
-
-  <!-- Footer -->
-  <footer>
-      Love Angular?&nbsp;
-      <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
-        <div class="github-star-badge">
-            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
-          Star
-        </div>
-      </a>
-      <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-      </a>
-  </footer>
-
-  <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
-    <title>Gray Clouds Background</title>
-    <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
-  </svg>
-
-</div>
-
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
+<!--The content below is only a placeholder and can be replaced.-->
 <router-outlet></router-outlet>

src/app/app.component.spec.ts

-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'loom-frontend'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('loom-frontend');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('loom-frontend app is running!');
-  });
-});

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
-  title = 'loom-frontend';
+  constructor(
+    private router:Router
+  ) {
+    const agent:any = navigator.userAgent.toLowerCase();
+    const isIE = agent.indexOf('compatible') > -1 && agent.indexOf('MSIE') > -1;
+    const isIE11 = agent.indexOf('Trident') > -1 && agent.indexOf('rv:11.0') > -1;
+    const isEdge = agent.indexOf('Edge') > -1 && !isIE;
+    if (isIE || isIE11 || isEdge) {
+      this.router.navigateByUrl('/browser');
+    }
+  }
+
+  title = 'ChemZoo';
 }

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzSelectModule } from 'ng-zorro-antd/select';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -11,7 +20,15 @@ import { LoginComponent } from './page/login/login.component';
     LoginComponent],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    HttpClientModule,
+    NzFormModule,
+    NzIconModule,
+    NzInputModule,
+    NzCheckboxModule,
+    NzButtonModule,
+    NzSelectModule,
+    AppRoutingModule,
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/page/login/login.component.html

-<p>login works!</p>
+<div class="login-container" cols="24" rowHeight="100%">
+    <div class="login-content">
+        <img class="content-bg" src="assets/images/content-bg.png">
+        <div class="con-left">
+            <div class="welcome">
+                <p class="text-welcome">Welcome back<label style="font-weight:lighter;">!</label></p>
+                <p style="font-size: 25px;font-weight:lighter;">Bring Your Research into a New<br> Era of Pharmaceutical
+                    World</p>
+            </div>
+            <div class="text-box">
+                <p class="copy-right-text">&copy; 2020-2023 Cyberiee Intelligence Co., Ltd.</p>
+                <p class="powered-by-text">Powered By <span class="powered-by-mediprosav">CyberCloud</span><span
+                        class="tm">TM</span></p>
+            </div>
+        </div>
+        <div class="con-right">
+            <img class="con-right-bg" src="assets/images/con-right-bg.png">
+            <div class="con-right-content" *ngIf="step === 1">
+                <div style="margin: 170px 70px 0 70px;">
+                    <img class="sign-in-text" src="assets/images/sign-in-text.png">
+                    <div class="tip-label red_color">Version: v3.0.0</div>
+                    <div class="tip-label gray_color">Sign in to continue access system</div>
+                    <div *ngIf="loginMethod === 'username'">
+                        <form nz-form class="loom-form" [formGroup]="loginFormGroup">
+                            <nz-form-item class="margin-top-35px">
+                                <nz-form-control [nzErrorTip]="errorUser">
+                                    <nz-input-group [nzPrefix]="prefixTemplateUser" class="login-input">
+                                        <input nz-input placeholder="username" formControlName="usernameFormControl"
+                                            id="username" />
+                                    </nz-input-group>
+                                    <ng-template #prefixTemplateUser>
+                                        <i nz-icon nzType="icons:user" class="prefixIcon"></i>
+                                    </ng-template>
+                                    <ng-template #errorUser let-control>
+                                        <ng-container *ngIf="!usernameFormControl.hasError('required')">
+                                            Please enter a valid username
+                                        </ng-container>
+                                        <ng-container *ngIf="usernameFormControl.hasError('required')">
+                                            Username is <strong>required</strong>
+                                        </ng-container>
+                                    </ng-template>
+                                </nz-form-control>
+                            </nz-form-item>
+
+                            <nz-form-item class="margin-bottom-0px">
+                                <nz-form-control [nzErrorTip]="errorPwd">
+                                    <nz-input-group [nzPrefix]="prefixTemplatePwd" class="login-input">
+                                        <input nz-input placeholder="password" formControlName="passwordFormControl"
+                                            id="password" [type]="showPwd ? 'text' : 'password'" />
+                                    </nz-input-group>
+                                    <ng-template #prefixTemplatePwd>
+                                        <i nz-icon nzType="icons:password" class="prefixIcon"></i>
+                                    </ng-template>
+                                    <ng-template #errorPwd let-control>
+                                        <ng-container
+                                            *ngIf="passwordFormControl.hasError('password') && !passwordFormControl.hasError('required')">
+                                            Please enter a valid password
+                                        </ng-container>
+                                        <ng-container *ngIf="passwordFormControl.hasError('required')">
+                                            Password is <strong>required</strong>
+                                        </ng-container>
+                                    </ng-template>
+                                </nz-form-control>
+                            </nz-form-item>
+
+                            <div class="reset">
+                                <label nz-checkbox formControlName="rememberFormControl" (click)='checkbox()'
+                                    class="example-margin">Remember me</label>
+                                <a (click)="resetPassword()" class="btn btn-link top-space" class="reset-btn">Forget password?</a>
+                            </div>
+                            <div class="loom-buttom-view margin-top-35px">
+                                <div class="loom-flex-row ">
+                                    <!--  [disabled]="usernameFormControl.hasError('required') || passwordFormControl.hasError('required')" -->
+                                    <button nz-button nzBlock nzType="primary" [nzSize]="size" nzShape="round" class="login-btn" (click)="nextStep()">
+                                        CONTINUE
+                                        <i nz-icon nzType="right" class="right-icon"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+
+                    <div *ngIf="loginMethod === 'mobile'">
+                        <form nz-form class="loom-form" [formGroup]="mobileLoginForm">
+                            <nz-form-item class="margin-top-35px">
+                                <nz-form-control [nzErrorTip]="errorPhone">
+                                    <nz-input-group [nzSuffix]="suffixTemplateSend" [nzPrefix]="prefixTemplatePhone" class="login-input">
+                                        <input nz-input placeholder="Mobile number" formControlName="mobileFormControl"
+                                            id="mobile" />
+                                    </nz-input-group>
+                                    <ng-template #prefixTemplatePhone><i nz-icon nzType="icons:phone" class="prefixIcon"></i></ng-template>
+                                    <ng-template #suffixTemplateSend>
+                                        <button nz-button nzType="text" *ngIf="!showTimer" class="send-button"
+                                            (click)="onSendClick(mobileFormControl.hasError('required')|| mobileFormControl.hasError('pattern'))">SEND</button>
+                                        <button nz-button nzType="text" *ngIf="showTimer">{{seconds}} seconds</button>
+                                    </ng-template>
+                                    <ng-template #errorPhone let-control>
+                                        <ng-container *ngIf="!mobileFormControl.hasError('required')">
+                                            Please enter a valid mobile number
+                                        </ng-container>
+                                        <ng-container *ngIf="mobileFormControl.hasError('required')">
+                                            Mobile number is <strong>required</strong>
+                                        </ng-container>
+                                    </ng-template>
+                                </nz-form-control>
+                            </nz-form-item>
+
+                            <nz-form-item class="margin-bottom-0px">
+                                <nz-form-control [nzErrorTip]="errorValidation">
+                                    <nz-input-group [nzPrefix]="prefixTemplateValidation" class="login-input">
+                                        <input nz-input type="number" placeholder="Verification Code"
+                                            formControlName="codeFormControl" id="code" />
+                                    </nz-input-group>
+                                    <ng-template #prefixTemplateValidation><i nz-icon nzType="icons:validation" class="prefixIcon"></i></ng-template>
+                                    <ng-template #errorValidation let-control>
+                                        <ng-container
+                                            *ngIf="codeFormControl.hasError('code') && !codeFormControl.hasError('required')">
+                                            Verification code is invalid
+                                        </ng-container>
+                                        <ng-container *ngIf="codeFormControl.hasError('required')">
+                                            Verification code is <strong>required</strong>
+                                        </ng-container>
+                                    </ng-template>
+                                </nz-form-control>
+                            </nz-form-item>
+
+                            <div class="loom-buttom-view margin-top-80px">
+                                <div class="loom-flex-row ">
+                                    <button nz-button nzBlock nzType="primary" [nzSize]="size" nzShape="round" class="login-btn" (click)="nextStep()">
+                                        CONTINUE
+                                        <i nz-icon nzType="right" class="right-icon"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="login-method-tab">
+                    <div class="login-method" [ngClass]="{'active': loginMethod === 'username'}"
+                        (click)="loginMethod = 'username'">
+                        <div class="login-method-wrapper">
+                            <i nz-icon nzType="icons:login-username" class="login-method-icon"></i> Login via username
+                        </div>
+                    </div>
+                    <div class="login-method" [ngClass]="{'active': loginMethod === 'mobile'}"
+                        (click)="loginMethod = 'mobile'">
+                        <div class="login-method-wrapper">
+                            <i nz-icon nzType="icons:login-phone" class="login-method-icon"></i> Login via mobile
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="con-right-content step-two" *ngIf="step === 2">
+                <div style="margin: 100px 70px 0 70px;">
+                    <div class="user-Avatars">
+                        <div >
+                            <i nz-icon nzType="icons:Robot-Avatars"></i>
+                        </div>
+                    </div>
+                    <div class="user-name">Lastname Firstname</div>
+                    <div class="user-magager">Seinior Manager</div>
+                    <form nz-form class="loom-form" [formGroup]="roleFormGroup">
+                        <nz-form-item class="margin-top-35px margin-bottom-10px">
+                            <nz-form-control>
+                                <nz-select nzAllowClear nzPlaceHolder="Select role"  [nzSize]="'large'" [(ngModel)]="selectedValue" class="prefixSelect roleSwitch"
+                                    [nzDropdownClassName]="'login-select'">
+                                    <nz-option nzCustomContent nzLabel="System Admin" nzValue="1">
+                                        <div>System Admin</div>
+                                        <div class="option-des">CyberLAB system admin manages system administrator operations</div>
+                                    </nz-option>
+                                    <nz-option nzCustomContent nzLabel="Project Admin" nzValue="2">
+                                        <div>Project Admin</div>
+                                        <div class="option-des">CyberLAB system admin manages all project in system and all related operations</div>
+                                    </nz-option>
+                                    <nz-option nzCustomContent nzLabel="R&D Scientist" nzValue="3">
+                                        <div>R&D Scientist</div>
+                                        <div class="option-des">CyberLAB R&D Scientist manages all research and development data in system and all related operations</div>
+                                    </nz-option>
+                                    <nz-option nzCustomContent nzLabel="INST Admin" nzValue="4">
+                                        <div>INST Admin</div>
+                                        <div class="option-des">CyberLAB INST admin manages all instruments in system and all related operations</div>
+                                    </nz-option>
+                                  </nz-select>
+                            </nz-form-control>
+                        </nz-form-item>
+                        <div class="tip">Choose the proper role for login</div>
+
+                        <nz-form-item class="margin-top-35px margin-bottom-10px">
+                            <nz-form-control>
+                                <nz-select nzAllowClear nzPlaceHolder="Select project"  [nzSize]="'large'" [(ngModel)]="selectedValue" class="prefixSelect projSwitch"
+                                    [nzDropdownClassName]="'login-select'" [nzCustomTemplate]="defaultTemplate">
+                                    <nz-option nzCustomContent nzLabel="Project 111" nzValue="1">
+                                        <div>Project 111 <span class="option-manage">(Project Leader)</span></div>
+                                        <div class="option-des">Project 111 description</div>
+                                    </nz-option>
+                                    <nz-option nzCustomContent nzLabel="Project 222" nzValue="2">
+                                        <div>Project 222 <span class="option-manage">(Group Leader)</span></div>
+                                        <div class="option-des">Project 222 description</div>
+                                    </nz-option>
+                                    <nz-option nzCustomContent nzLabel="Project 333" nzValue="3">
+                                        <div>Project 333 <span class="option-manage">(Project Member)</span></div>
+                                        <div class="option-des">Project 333 description</div>
+                                    </nz-option>
+                                    <nz-option nzCustomContent nzLabel="Project 444" nzValue="4">
+                                        <div>Project 444 <span class="option-manage">(Project Admin/Viewer)</span></div>
+                                        <div class="option-des">Project 444 description</div>
+                                    </nz-option>
+                                </nz-select>
+                                <ng-template #defaultTemplate let-selected>
+                                    <div class="label-main">Project 111</div>
+                                    <div class="label-child">Project Leader</div>
+                                </ng-template>
+                            </nz-form-control>
+                        </nz-form-item>
+                        <div class="tip">Choose a project for mananging</div>
+                    </form>
+                </div>
+                    
+                <div class="botton-group">
+                    <button nz-button nzBlock nzType="primary" [nzSize]="size" nzShape="round" class="step-btn" (click)="previousStep()">
+                        <i nz-icon nzType="left" class="left-icon"></i>
+                        BACK
+                    </button>
+                    <button nz-button nzBlock nzType="primary" [nzSize]="size" nzShape="round" class="step-btn" (click)="onSubmit()">
+                        CONTINUE
+                        <i nz-icon nzType="right" class="right-icon"></i>
+                    </button>
+                </div>
+                
+            </div>
+        </div>
+    </div>
+</div>

src/app/page/login/login.component.scss

+.login-container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    background: url(../../../assets/images/bg.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+    min-height: 768px;
+
+    .login-content {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        box-shadow: 2px 2px 10px 4px #70707080;
+        border-radius: 50px;
+        overflow: hidden;
+
+        .content-bg {
+            width: 75vw;
+            display: block;
+        }
+
+        .con-left {
+            width: 57%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+
+            .welcome {
+                color: #fff;
+                position: absolute;
+                top: 44%;
+                left: 135px;
+
+                &>p {
+                    margin: 0;
+                }
+
+                .text-welcome {
+                    font-size: 35px;
+                    font-weight: bolder;
+                    margin-bottom: 10px;
+                }
+            }
+
+            .text-box {
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                color: white;
+                font-family: Helvetica;
+                font-weight: lighter;
+
+                .copy-right-text {
+                    text-align: center;
+                    margin-bottom: 0px;
+                }
+
+                .powered-by-text {
+                    text-align: center;
+                    margin-top: 0px;
+                }
+
+                .powered-by-mediprosav {
+                    color: #ff9c00;
+                    font-weight: normal;
+                }
+
+                .tm {
+                    vertical-align: super;
+                    font-size: 10px;
+                    color: #ff9c00;
+                    font-weight: normal;
+                }
+            }
+        }
+
+        .con-right {
+            width: 43%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 57%;
+
+            .con-right-bg {
+                width: 100%;
+                height: 100%;
+            }
+
+            .con-right-content {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+
+                .sign-in-text {
+                    display: block;
+                    width: 100%;
+                }
+
+                .tip-label {
+                    font-family: Helvetica;
+                    font-weight: 100;
+                    font-size: 16px;
+                    margin: 7px 0;
+
+                    &.red_color {
+                        color: #ff0000;
+                    }
+
+                    &.gray_color {
+                        color: #b3b3b3;
+                    }
+                }
+
+                &.step-two {
+                    text-align: center;
+                    .user-Avatars {
+                        font-size: 160px;
+                        line-height: 1;
+                        margin-bottom: 30px;
+                        &>div {
+                            width: 160px;
+                            height: 160px;
+                            border-radius: 160px;
+                            margin: auto;
+                            box-shadow: 0 4px 10px 4px #70707099;
+                        }
+                    }
+                    .user-name {
+                        font-family: Helvetica;
+                        font-weight: bolder;
+                        font-size: 20px;
+                    }
+                    .user-magager {
+                        font-family: Helvetica;
+                        font-weight: 100;
+                        font-size: 18px;
+                        color: #b3b3b3;
+                    }
+                }
+            }
+
+            .login-method-tab {
+                display: flex;
+                flex-direction: row;
+                height: 55px;
+                background: #fff;
+                width: 100%;
+                align-items: center;
+                border-radius: 0 0 25px 25px;
+                border-top: 1px solid #eeeeee;
+                position: absolute;
+                bottom: 0;
+
+                .login-method {
+                    width: 50%;
+                    height: 100%;
+                    cursor: pointer;
+                    background: #ecf7ef;
+                    color: #707070;
+
+                    &.active {
+                        color: #376408;
+                        box-shadow: 0px 3px 12px -7px #707070 inset;
+
+                        .login-method-wrapper {
+                            .login-method-icon {
+                                &.inactive {
+                                    display: none;
+                                }
+
+                                &.active {
+                                    display: initial;
+                                }
+                            }
+                        }
+                    }
+
+                    .login-method-wrapper {
+                        height: 100%;
+                        width: 100%;
+                        box-sizing: border-box;
+                        padding: 10px 20px;
+                        align-items: center;
+                        justify-content: center;
+                        display: flex;
+
+                        .login-method-icon {
+                            font-size: 30px;
+                            margin-right: 15px;
+
+                            &.active {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+
+                .login-method:first-child {
+                    border-radius: 0 0 0 25px;
+
+                    .login-method-wrapper {
+                        border-right: 1px solid #eeeeee;
+                    }
+                }
+
+                .login-method:last-child {
+                    border-radius: 0 0 25px 0;
+                }
+            }
+
+            .botton-group {
+                width: calc(100% - 30px);
+                display: flex;
+                justify-content: space-between;
+                position: absolute;
+                bottom: 0;
+                margin: 20px 15px;
+                .step-btn {
+                    width: 49%;
+                    font-size: 16px;
+                    height: 50px;
+                    border-radius: 50px;
+                    background: linear-gradient(to right, #83d0ea, #9eeeac);
+                    border: 0;
+                    box-shadow: 0 4px 10px 0 #70707080;
+                    font-family: Helvetica;
+                    font-weight: lighter;
+                }
+            
+                .step-btn[disabled] {
+                    background: linear-gradient(to right, #ccc, #999) !important;
+                    color: rgba(0, 0, 0, 0.38) !important;
+                    cursor: not-allowed;
+                }
+            }
+
+        }
+    }
+
+    .reset {
+        height: 45px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: lighter;
+        .example-margin {
+            color: #8d8d8d;
+            font-size: 15px;
+        }
+        .reset-btn {
+            text-decoration: none;
+            padding: 0;
+            display: block;
+            text-align: center;
+            color: #8d8d8d;
+            font-family: '黑体';
+            font-size: 15px;
+            letter-spacing: 0.6px;
+            height: 21px;
+          }
+    }
+
+    .login-input {
+        border: 0;
+        height: 50px;
+        background: #f0f0f0;
+        border-radius: 50px;
+        box-shadow: none !important;
+        &>input {
+            background: #f0f0f0;
+            color: #8d8d8d;
+        }
+    }
+
+    .login-btn {
+        font-size: 16px;
+        height: 50px;
+        border-radius: 50px;
+        background: linear-gradient(to right, #83d0ea, #9eeeac);
+        border: 0;
+        box-shadow: 4px 4px 10px 0px #70707080;
+        font-family: Helvetica;
+        font-weight: lighter;
+    }
+
+    .login-btn[disabled] {
+        background: linear-gradient(to right, #ccc, #999) !important;
+        color: rgba(0, 0, 0, 0.38) !important;
+        cursor: not-allowed;
+    }
+
+    .left-icon {
+        position: absolute;
+        left: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .right-icon {
+        position: absolute;
+        right: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .margin-top-35px {
+        margin-top: 35px;
+    }
+
+    .margin-bottom-0px {
+        margin-bottom: 0;
+    }
+
+    .margin-bottom-10px {
+        margin-bottom: 10px;
+    }
+
+    .margin-top-80px {
+        margin-top: 80px;
+    }
+
+    .prefixIcon {
+        font-size: 25px;
+        margin-right: 5px;
+    }
+
+    .send-button {
+        color: #fff;
+        background: #83d0ea;
+        border-radius: 50px;
+        cursor: pointer;
+    }
+
+    .tip {
+        text-align: left;
+        font-family: Helvetica;
+        font-weight: 100;
+        color: #b3b3b3;
+    }
+}
\ No newline at end of file

src/app/page/login/login.component.ts

@@ -6,8 +6,22 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
+  loginMethod = 'username';
+
+  step = 1;
+
   constructor() { }
 
   ngOnInit():void {
+
+
+  }
+
+  nextStep() {
+    this.step = 2;
+  }
+
+  previousStep() {
+    this.step = 1;
   }
 }

src/assets/icons/Robot-Avatars.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#db1b1b;}.cls-2{fill:#bc1b1b;}.cls-3{fill:#b0d46c;}.cls-4{fill:#a3c163;}.cls-5{fill:#83964d;}.cls-6{fill:#97b25b;}.cls-7{fill:#27273d;}.cls-8{fill:#00b564;}.cls-9{fill:#cbe591;}.cls-10{fill:none;stroke:#27273d;stroke-linecap:round;stroke-miterlimit:10;stroke-width:15px;}.cls-11{fill:#f7bb38;}</style></defs><title>Robot Avatars</title><g id="BULINE"><circle class="cls-1" cx="256" cy="256" r="256"/></g><g id="Icons"><path class="cls-2" d="M484.77,371a255.88,255.88,0,0,1-361,104.27l0,0A257.19,257.19,0,0,1,27.23,371a256.81,256.81,0,0,1,75-89.7q5.4-4.07,11-7.85,5.07-3.4,10.32-6.59h0a254.42,254.42,0,0,1,36.11-18.13q4.18-1.69,8.45-3.26h0a252.53,252.53,0,0,1,27-8.19c1.64-.4,3.29-.79,4.95-1.15q8.85-2,17.93-3.33a258.67,258.67,0,0,1,72.3-.51q9.78,1.31,19.32,3.35a251.31,251.31,0,0,1,34.85,10.08,254.65,254.65,0,0,1,44.61,21.57q4.67,2.83,9.19,5.88,5.61,3.75,11,7.8a256.81,256.81,0,0,1,75.46,90Z"/><circle class="cls-3" cx="254.51" cy="264.17" r="172"/><path class="cls-4" d="M280,434.29a172,172,0,1,1,0-340.24,172,172,0,0,0,0,340.24Z"/><rect class="cls-5" x="198.01" y="78.01" width="113" height="122" rx="26.29"/><rect class="cls-6" x="206.04" y="86.67" width="96.95" height="104.67" rx="22.56"/><rect class="cls-7" x="152.51" y="215.59" width="204" height="86" rx="19.25"/><path class="cls-7" d="M192.68,348.21H316.34a0,0,0,0,1,0,0v.95a40,40,0,0,1-40,40H232.65a40,40,0,0,1-40-40v-.95A0,0,0,0,1,192.68,348.21Z"/><circle class="cls-8" cx="198.01" cy="258.59" r="20.44"/><circle class="cls-8" cx="311.01" cy="258.59" r="20.44"/><ellipse class="cls-9" cx="353.24" cy="155.6" rx="8.76" ry="19.27" transform="translate(-28.89 210.09) rotate(-31.89)"/><ellipse class="cls-9" cx="377.84" cy="195.15" rx="6.78" ry="14.91" transform="translate(-46.06 229.06) rotate(-31.89)"/><ellipse class="cls-5" cx="106.57" cy="264.26" rx="15.5" ry="48"/><ellipse class="cls-5" cx="404.3" cy="264.26" rx="15.5" ry="48"/><line class="cls-10" x1="106.57" y1="264.26" x2="36.57" y2="264.26"/><circle class="cls-11" cx="36.57" cy="264.26" r="25"/><line class="cls-10" x1="404.3" y1="264.26" x2="474.3" y2="264.26"/><circle class="cls-11" cx="474.3" cy="264.26" r="25"/></g></svg>
\ No newline at end of file

src/assets/icons/arrow-down.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649428002641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13640" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M904.533333 311.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0L512 644.266667 179.2 311.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0-17.066667 17.066667-17.066667 42.666667 0 59.733333l362.666666 362.666667c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866667-12.8l362.666666-362.666667c17.066667-17.066667 17.066667-42.666667 0-59.733333z" p-id="13641" fill="#707070"></path></svg>
\ No newline at end of file

src/assets/icons/login-phone.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649415181225" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6709" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M368.992 830.304l0 1.184c-6.496 0-11.264 0.512-14.048 0.512l-3.296 0c-69.248 0-124.992-55.36-126.944-124.512-1.056-33.952 11.2-66.816 34.464-91.488 23.264-24.672 54.72-39.136 88.64-40.096 0.32 0 3.744-0.192 4.032-0.192 26.592 0 52.064 8.32 73.984 24.288 30.752 10.848 61.824-4.32 92.192-45.024 30.208-40.416 36.576-72.448 18.88-95.232-6.304-4.544-12.352-9.92-18.368-16.32-1.056-1.024-2.048-2.144-2.976-3.296-19.872-22.432-31.264-50.816-32.16-80.064-1.92-70.176 53.376-128.8 123.232-130.784 0.32 0 3.584-0.064 3.904-0.064 58.784 0 110.752 41.664 123.552 99.072 10.336 31.872 36.704 158.176-90.176 327.84C526.528 813.312 412.576 830.304 368.992 830.304zM364.896 766.208c18.976 0.416 118.592-2.24 227.616-148.416 111.36-148.928 86.016-253.376 79.776-272.832-7.104-31.168-32.8-51.776-61.888-51.776-36.704 1.024-64.096 30.144-63.168 64.992 0.576 18.496 9.312 31.968 16.544 39.968 0.224 0.256 0.48 0.544 0.672 0.8 4.032 4.352 7.808 7.648 11.552 10.08 2.368 1.568 4.576 3.424 6.432 5.568 19.616 22.112 57.6 83.84-13.28 178.624-45.792 61.28-92.704 74.112-124 74.144-16.096 0-32.096-3.296-47.52-9.728-2.656-1.12-5.184-2.592-7.456-4.384-7.968-6.272-21.088-13.76-38.432-13.76-18.976 0.544-34.56 7.52-46.048 19.712-11.52 12.256-17.6 28.288-17.088 45.12 0.96 34.4 28.64 61.248 62.976 61.248 0.16 0 0.192 0.032 0.064 0.064 1.184-0.192 2.496-0.352 3.264-0.416C358.336 765.184 361.696 765.44 364.896 766.208z" p-id="6710"></path><path d="M512 963.328c-60.224 0-118.624-11.744-173.6-34.88-16.288-6.88-23.936-25.632-17.056-41.92 6.848-16.32 25.632-23.904 41.92-17.088 47.072 19.808 97.12 29.888 148.768 29.888 211.744 0 384-172.256 384-384 0-211.744-172.256-384-384-384-211.744 0-384 172.256-384 384 0 72.384 20.256 142.88 58.56 203.904 9.376 14.976 4.864 34.72-10.08 44.096-14.976 9.408-34.72 4.896-44.128-10.08C87.616 681.984 64 599.712 64 515.328c0-247.008 200.96-448 448-448s448 200.96 448 448C960 762.336 759.04 963.328 512 963.328z" p-id="6711"></path></svg>
\ No newline at end of file

src/assets/icons/login-username.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649414858341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5498" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z" p-id="5499"></path></svg>
\ No newline at end of file

src/assets/icons/password.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649413491729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3726" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M868.593046 403.832442c-30.081109-28.844955-70.037123-44.753273-112.624057-44.753273L265.949606 359.079168c-42.554188 0-82.510202 15.908318-112.469538 44.690852-30.236652 28.782533-46.857191 67.222007-46.857191 108.198258l0 294.079782c0 40.977273 16.619516 79.414701 46.702672 108.136859 29.959336 28.844955 70.069869 44.814672 112.624057 44.814672l490.019383 0c42.585911 0 82.696444-15.969717 112.624057-44.814672 30.082132-28.844955 46.579875-67.222007 46.579875-108.136859L915.172921 511.968278C915.171897 471.053426 898.675178 432.677397 868.593046 403.832442zM841.821309 806.049083c0 22.098297-8.882298 42.772152-25.099654 58.306964-16.154935 15.661701-37.81935 24.203238-60.752666 24.203238L265.949606 888.559285c-22.934339 0-44.567032-8.54256-60.877509-24.264637-16.186657-15.474436-25.067932-36.148291-25.067932-58.246589L180.004165 511.968278c0-22.035876 8.881274-42.772152 25.192775-58.307987 16.186657-15.536858 37.81935-24.139793 60.753689-24.139793l490.019383 0c22.933315 0 44.597731 8.602935 60.752666 24.139793 16.21838 15.535835 25.099654 36.272112 25.099654 58.307987L841.822332 806.049083zM510.974136 135.440715c114.914216 0 208.318536 89.75214 208.318536 200.055338l73.350588 0c0-149.113109-126.366036-270.496667-281.669124-270.496667-155.333788 0-281.699824 121.383558-281.699824 270.496667l73.350588 0C302.623877 225.193879 396.059919 135.440715 510.974136 135.440715zM474.299865 747.244792l73.350588 0L547.650453 629.576859l-73.350588 0L474.299865 747.244792z" p-id="3727" fill="#8d8d8d"></path></svg>
\ No newline at end of file

src/assets/icons/phone.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649473787341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4536" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M942.08 738.304c-25.6-23.552-55.296-47.104-76.8-61.44-27.648-19.456-57.344-38.912-84.992-51.2-43.008-21.504-59.392-25.6-70.656-25.6-19.456 0-35.84 10.24-51.2 29.696-8.192 12.288-17.408 29.696-23.552 45.056-4.096 10.24-12.288 27.648-17.408 33.792-8.192-2.048-31.744-12.288-70.656-37.888-35.84-25.6-74.752-57.344-104.448-84.992-29.696-29.696-59.392-68.608-84.992-104.448-25.6-37.888-35.84-61.44-37.888-70.656 6.144-4.096 23.552-12.288 33.792-17.408 15.36-6.144 31.744-12.288 45.056-23.552 21.504-15.36 29.696-31.744 29.696-51.2 0-10.24-2.048-27.648-25.6-70.656-12.288-25.6-31.744-55.296-51.2-84.992-15.36-21.504-38.912-51.2-61.44-76.8-27.648-27.648-47.104-40.96-66.56-40.96-47.104 0-100.352 68.608-114.688 87.04-19.456 25.6-66.56 96.256-66.56 159.744 0 59.392 40.96 138.24 74.752 194.56 45.056 72.704 108.544 153.6 177.152 224.256l21.504 21.504 0 0c70.656 68.608 149.504 132.096 224.256 177.152 23.552 15.36 51.2 29.696 78.848 43.008l0 0c4.096 2.048 6.144 2.048 10.24 2.048 15.36 0 27.648-12.288 27.648-27.648 0-10.24-6.144-21.504-17.408-25.6-21.504-10.24-45.056-23.552-70.656-38.912-70.656-43.008-145.408-102.4-212.992-168.96l-21.504-21.504c-66.56-68.608-125.952-143.36-168.96-212.992-43.008-68.608-66.56-128-66.56-163.84 0-31.744 19.456-78.848 53.248-123.904 15.36-19.456 29.696-37.888 45.056-51.2 15.36-13.312 23.552-17.408 27.648-17.408 10.24 4.096 43.008 31.744 87.04 98.304 17.408 25.6 33.792 51.2 45.056 74.752 15.36 27.648 17.408 40.96 17.408 43.008 0 0-4.096 4.096-10.24 8.192-8.192 4.096-21.504 10.24-31.744 15.36-15.36 6.144-27.648 12.288-40.96 19.456-19.456 12.288-27.648 27.648-27.648 45.056 0 8.192 0 33.792 49.152 104.448 25.6 37.888 59.392 80.896 92.16 112.64l0 0c31.744 31.744 74.752 66.56 112.64 92.16 70.656 47.104 96.256 49.152 104.448 49.152l0 0c17.408 0 31.744-8.192 45.056-27.648 8.192-10.24 12.288-25.6 19.456-40.96 4.096-10.24 10.24-23.552 15.36-31.744 6.144-4.096 10.24-6.144 10.24-6.144 2.048 0 15.36 2.048 43.008 17.408 21.504 12.288 49.152 27.648 74.752 45.056 63.488 45.056 94.208 76.8 98.304 87.04-2.048 4.096-6.144 12.288-17.408 27.648-12.288 15.36-31.744 31.744-51.2 45.056-29.696 21.504-61.44 38.912-87.04 47.104l0 0c-10.24 4.096-17.408 15.36-17.408 25.6 0 15.36 12.288 27.648 27.648 27.648 2.048 0 4.096 0 6.144-2.048l0 0c2.048 0 2.048 0 4.096-2.048l0 0c45.056-15.36 82.944-40.96 102.4-55.296 21.504-15.36 87.04-70.656 87.04-115.712C982.016 785.408 969.728 765.952 942.08 738.304z" p-id="4537" fill="#707070"></path></svg>
\ No newline at end of file

src/assets/icons/proj-switch.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649427824115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3460" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M216.96 231.04h-102.4a31.36 31.36 0 0 1 0-64h102.4a31.36 31.36 0 0 1 0 64zM216.96 339.84h-102.4a31.36 31.36 0 1 1 0-64h102.4a31.36 31.36 0 1 1 0 64z" fill="#707070" p-id="3461"></path><path d="M229.12 951.04h-128a93.44 93.44 0 0 1-92.16-94.08V161.92A93.44 93.44 0 0 1 102.4 67.84h128a94.08 94.08 0 0 1 92.8 94.08v695.04a94.08 94.08 0 0 1-94.08 94.08zM102.4 128a30.72 30.72 0 0 0-30.72 31.36v697.6a30.72 30.72 0 0 0 30.72 31.36h128a31.36 31.36 0 0 0 31.36-31.36V161.92A31.36 31.36 0 0 0 229.12 128z" fill="#707070" p-id="3462"></path><path d="M165.76 748.8m-44.16 0a44.16 44.16 0 1 0 88.32 0 44.16 44.16 0 1 0-88.32 0Z" fill="#707070" p-id="3463"></path><path d="M469.12 231.04H366.08a31.36 31.36 0 0 1 0-64h103.04a31.36 31.36 0 0 1 0 64zM469.12 339.84H366.08a31.36 31.36 0 0 1 0-64h103.04a31.36 31.36 0 0 1 0 64z" fill="#707070" p-id="3464"></path><path d="M480.64 951.04h-128a94.08 94.08 0 0 1-93.44-94.08V161.92a94.08 94.08 0 0 1 94.72-94.08h128A94.08 94.08 0 0 1 576 161.92v695.04a94.08 94.08 0 0 1-95.36 94.08zM353.92 128a31.36 31.36 0 0 0-30.72 31.36v697.6a31.36 31.36 0 0 0 30.72 31.36h128a31.36 31.36 0 0 0 30.08-31.36V161.92A31.36 31.36 0 0 0 480.64 128z" fill="#707070" p-id="3465"></path><path d="M417.28 748.8m-44.16 0a44.16 44.16 0 1 0 88.32 0 44.16 44.16 0 1 0-88.32 0Z" fill="#707070" p-id="3466"></path><path d="M648.96 225.28a31.36 31.36 0 0 1-7.68-64l99.2-25.6a31.36 31.36 0 1 1 15.36 60.8l-99.2 24.96a16 16 0 0 1-7.68 3.84zM675.84 330.88a31.36 31.36 0 0 1-7.68-64L768 243.84a30.72 30.72 0 0 1 37.76 22.4 31.36 31.36 0 0 1-22.4 38.4l-99.2 24.96z" fill="#707070" p-id="3467"></path><path d="M798.72 928a93.44 93.44 0 0 1-90.88-70.4L536.96 183.04a92.16 92.16 0 0 1 10.24-71.04 95.36 95.36 0 0 1 57.6-42.88l122.88-31.36a93.44 93.44 0 0 1 113.92 68.48l170.88 673.92a95.36 95.36 0 0 1-10.24 71.04 93.44 93.44 0 0 1-57.6 42.88l-122.88 31.36a94.08 94.08 0 0 1-23.04 2.56z m-48-832h-7.68L620.16 128a30.72 30.72 0 0 0-19.2 14.08 33.92 33.92 0 0 0-3.2 23.68L768 842.24a31.36 31.36 0 0 0 37.76 22.4l123.52-32.64a32.64 32.64 0 0 0 19.2-14.08 33.28 33.28 0 0 0 0-23.68L780.8 121.6a30.72 30.72 0 0 0-30.08-23.68z" fill="#707070" p-id="3468"></path><path d="M833.28 713.6m-44.16 0a44.16 44.16 0 1 0 88.32 0 44.16 44.16 0 1 0-88.32 0Z" fill="#707070" p-id="3469"></path></svg>
\ No newline at end of file

src/assets/icons/role-switch.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649427790606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11452" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M681.472 838.656c-7.68 0-15.872-3.072-21.504-9.216-11.776-11.776-11.776-31.232 0-43.52l68.096-68.096c11.776-11.776 31.232-11.776 43.52 0 11.776 11.776 11.776 31.232 0 43.52L702.976 829.44c-5.632 6.144-13.824 9.216-21.504 9.216z" fill="#707070" p-id="11453"></path><path d="M749.568 770.56h-210.432c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h210.432c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72zM538.624 684.032c-7.68 0-15.872-3.072-21.504-9.216-11.776-11.776-11.776-31.232 0-43.52l68.096-68.096c11.776-11.776 31.232-11.776 43.52 0 11.776 11.776 11.776 31.232 0 43.52l-68.096 68.096c-6.144 6.144-13.824 9.216-22.016 9.216z" fill="#707070" p-id="11454"></path><path d="M749.568 684.032h-210.432c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h210.432c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72z" fill="#707070" p-id="11455"></path><path d="M820.224 951.296h-614.4c-73.216 0-133.12-59.904-133.12-133.12v-614.4c0-73.216 59.904-133.12 133.12-133.12h614.4c73.216 0 133.12 59.904 133.12 133.12v614.4c0 73.216-59.392 133.12-133.12 133.12z m-614.4-819.2c-39.424 0-71.68 32.256-71.68 71.68v614.4c0 39.424 32.256 71.68 71.68 71.68h614.4c39.424 0 71.68-32.256 71.68-71.68v-614.4c0-39.424-32.256-71.68-71.68-71.68h-614.4z" fill="#707070" p-id="11456"></path><path d="M513.024 541.696c-95.744 0-174.08-78.336-174.08-174.08s78.336-174.08 174.08-174.08 174.08 78.336 174.08 174.08-77.824 174.08-174.08 174.08z m0-286.72c-61.952 0-112.64 50.688-112.64 112.64s50.688 112.64 112.64 112.64 112.64-50.688 112.64-112.64-50.176-112.64-112.64-112.64z" fill="#707070" p-id="11457"></path><path d="M292.864 833.536c-16.896 0-30.72-13.824-30.72-30.72v-189.44c0-73.216 59.904-133.12 133.12-133.12h15.36c6.144 0 14.336 0 23.552-0.512 20.992-0.512 50.176-1.024 79.36 0 16.896 0.512 30.208 14.336 29.696 31.744-0.512 16.896-14.848 30.208-31.744 29.696-28.16-1.024-55.296-0.512-76.8 0-9.728 0-17.92 0.512-24.576 0.512h-15.36c-39.424 0-71.68 32.256-71.68 71.68v189.44c0.512 16.896-12.8 30.72-30.208 30.72z" fill="#707070" p-id="11458"></path></svg>
\ No newline at end of file

src/assets/icons/user.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649412551780" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2845" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" p-id="2846" fill="#8d8d8d"></path></svg>
\ No newline at end of file

src/assets/icons/validation.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649473809375" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15436" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M874.666667 896H149.333333c-83.2 0-149.333333-66.133333-149.333333-149.333333V277.333333c0-83.2 66.133333-149.333333 149.333333-149.333333h725.333334c83.2 0 149.333333 66.133333 149.333333 149.333333v469.333334c0 83.2-66.133333 149.333333-149.333333 149.333333zM149.333333 213.333333c-36.266667 0-64 27.733333-64 64v469.333334c0 36.266667 27.733333 64 64 64h725.333334c36.266667 0 64-27.733333 64-64V277.333333c0-36.266667-27.733333-64-64-64H149.333333z" p-id="15437" fill="#707070"></path><path d="M270.933333 597.333333h-10.666666c-44.8 0-81.066667-36.266667-81.066667-81.066666v-10.666667c0-44.8 36.266667-81.066667 81.066667-81.066667h10.666666c44.8 0 81.066667 36.266667 81.066667 81.066667v10.666667c0 44.8-36.266667 81.066667-81.066667 81.066666zM512 597.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333-38.4 85.333333-85.333333 85.333333zM757.333333 597.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333334 85.333333-38.4 85.333333-85.333334 85.333333z" p-id="15438" fill="#707070"></path></svg>
\ No newline at end of file

src/styles.scss

 /* You can add global styles to this file, and also import other style files */
+@import "~ng-zorro-antd/style/index.min.css";
+@import "~ng-zorro-antd/form/style/index.min.css";
+@import "~ng-zorro-antd/icon/style/index.min.css";
+@import "~ng-zorro-antd/input/style/index.min.css";
+@import "~ng-zorro-antd/checkbox/style/index.min.css";
+@import "~ng-zorro-antd/button/style/index.min.css";
+@import "~ng-zorro-antd/select/style/index.min.css";
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
+    min-width: 1024px;
+    overflow-y: hidden;
+}
+
+.prefixSelect {
+    text-align: left;
+    position: relative;
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 60px;
+        height: 50px;
+        display: block;
+        background-size: 28px 28px;
+        background-repeat: no-repeat;
+        background-position: center;
+        z-index: 1;
+    }
+    &.roleSwitch::before {
+        background-image: url(assets/icons/role-switch.svg);
+    }
+    &.projSwitch::before {
+        background-image: url(assets/icons/proj-switch.svg);
+    }
+    .ant-select-selector {
+        height: 50px !important;
+        padding-left: 60px !important;
+        border-radius: 10px !important;
+        border: 0 !important;
+        box-shadow: 0 4px 10px 0 #70707080;
+        .ant-select-selection-search {
+            left: 60px;
+            .ant-select-selection-search-input {
+                height: 50px !important;
+
+            }
+        }
+        .ant-select-selection-item,
+        .ant-select-selection-placeholder {
+            line-height: 50px !important;
+        }
+        .ant-select-selection-item {
+            .label-main {
+                line-height: 20px !important;
+                padding-top: 5px;
+            }
+            .label-child {
+                line-height: 20px !important;
+                font-size: 12px;
+                font-family: Helvetica;
+                font-weight: 100;
+                color: #b3b3b3;
+            }
+        }
+    }
+}
+
+.login-select{
+    .ant-select-item-option {
+        &:not(:last-child) {
+            border-bottom: 1px solid #ccc;
+        }
+    }
+    .option-manage {
+        font-weight: 100;
+    }
+    .option-des {
+        font-weight: 100;
+        color: #bbb;
+        white-space: initial;
+        padding-bottom: 5px;
+    }
+}

yarn.lock

@@ -181,6 +181,15 @@
   dependencies:
     tslib "^2.0.0"
 
+"@angular/cdk@^11.0.2":
+  version "11.2.13"
+  resolved "https://registry.npmmirror.com/@angular/cdk/-/cdk-11.2.13.tgz#d54c9187e3b8cf3f8ba190b1edddc08ed2b740de"
+  integrity sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug==
+  dependencies:
+    tslib "^2.0.0"
+  optionalDependencies:
+    parse5 "^5.0.0"
+
 "@angular/cli@~11.2.12":
   version "11.2.19"
   resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-11.2.19.tgz#b170e3007b9c014ff405ecb7a86b18adc6e74cc4"
@@ -289,6 +298,21 @@
   dependencies:
     tslib "^2.0.0"
 
+"@ant-design/colors@^5.0.0":
+  version "5.1.1"
+  resolved "https://registry.npmmirror.com/@ant-design/colors/-/colors-5.1.1.tgz#800b2186b1e27e66432e67d03ed96af3e21d8940"
+  integrity sha512-Txy4KpHrp3q4XZdfgOBqLl+lkQIc3tEvHXOimRN1giX1AEC7mGtyrO9p8iRGJ3FLuVMGa2gNEzQyghVymLttKQ==
+  dependencies:
+    "@ctrl/tinycolor" "^3.3.1"
+
+"@ant-design/icons-angular@^11.0.1":
+  version "11.0.1"
+  resolved "https://registry.npmmirror.com/@ant-design/icons-angular/-/icons-angular-11.0.1.tgz#8ff3131f3d9b4b25fd28c64c4a9bdfe36da54942"
+  integrity sha512-WwxVx/aToxTjWmB5+O+3rOjSYdF8FC/Yd/8jF1ZGQMtLWAzP8/foQmKvPAktTUsh0/Ijhtur7LrHN2VuUedMcA==
+  dependencies:
+    "@ant-design/colors" "^5.0.0"
+    tslib "^2.0.0"
+
 "@babel/code-frame@7.12.11":
   version "7.12.11"
   resolved "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@@ -1175,6 +1199,11 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@ctrl/tinycolor@^3.3.1":
+  version "3.4.1"
+  resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32"
+  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
+
 "@discoveryjs/json-ext@0.5.2":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz#8f03a22a04de437254e8ce8cc84ba39689288752"
@@ -3297,6 +3326,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^2.10.0:
+  version "2.28.0"
+  resolved "https://registry.npmmirror.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
 date-format@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.7.tgz#aa1cf4400badfe693c8462bbfcba43ab821d7d14"
@@ -6375,6 +6409,17 @@ neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+ng-zorro-antd@11.4.2:
+  version "11.4.2"
+  resolved "https://registry.npmmirror.com/ng-zorro-antd/-/ng-zorro-antd-11.4.2.tgz#c19f12fee9166cbed0b6c7c63fa37da0464413e7"
+  integrity sha512-1dMIz5zBma+CfUYYKmIKWIB9mXX837L+WKGGHhl2KrmIIbsbNLh3WTKudCBuyqL58EEgiVhTZYwl841xdz+vLw==
+  dependencies:
+    "@angular/cdk" "^11.0.2"
+    "@ant-design/icons-angular" "^11.0.1"
+    date-fns "^2.10.0"
+    resize-observer-polyfill "^1.5.1"
+    tslib "^2.0.0"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -6935,6 +6980,11 @@ parse5-sax-parser@^6.0.1:
   dependencies:
     parse5 "^6.0.1"
 
+parse5@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+
 parse5@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
@@ -7849,6 +7899,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"