Login component template

login.component.html

<section class="hero   ">
  <div class="hero-body">
    <div class="container">
      <div class="column is-8 is-offset-2">
          <div>
              <h3 class="title has-text-grey">Login</h3>
              <p class="subtitle has-text-grey">Please login to proceed.</p>
              <div class="box">
                <div class="notification is-danger" [hidden]="!error">
                  
                  "Unable to log in with provided credentials."
                </div>
                <form >
                  <div class="field">
                    <div class="control">
                      <input class="input is-large" 
                             type="email" 
                             placeholder="Your email" 
                             autofocus=""
                             formControlName="email">
                    </div>
                  </div>
            
                  <div class="field">
                    <div class="control">
                      <input class="input is-large" 
                             type="password" 
                             placeholder="Your password" 
                             formControlName="password">
                    </div>
                  </div>
            
                  <button class="button is-block is-info is-large is-fullwidth" >Login</button>
                </form>
              </div>
            </div>
      </div>
    </div>
  </div>
</section>