zeppelin-web-angular/src/app/pages/login/login.component.html

<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="content">
  <div class="inner">
    <div class="form">
      <form nz-form nzLayout="vertical">
        <nz-form-item>
          <nz-form-label nzRequired>User Name</nz-form-label>
          <nz-form-control>
            <nz-input-group nzPrefixIcon="user">
              <input nz-input [(ngModel)]="userName" placeholder="User Name" name="userName" required />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzRequired>Password</nz-form-label>
          <nz-form-control>
            <nz-input-group nzPrefixIcon="lock">
              <input nz-input [(ngModel)]="password" placeholder="Password" name="password" type="password" required />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <button nz-button nzType="primary" (click)="login()" [nzLoading]="loading">Login</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>
    <div class="sidebar">
      <h1>Welcome to Zeppelin!</h1>
      Zeppelin is web-based notebook that enables interactive data analytics.
      <br />
      You can make beautiful data-driven, interactive, collaborative document with SQL, code and even more!
      <br />
    </div>
  </div>
</div>