import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';

import { AuthService } from '../../shared/auth.service';
import { Service, CredentialsViewModel } from '../../core/api.client.generated';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-dashboard',
  templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;
  dbName: string = '';
  loading = false;
  submitted = false;
  returnUrl: string;
  error = '';
  showPassBtnLabel = 'Show';

  // SAP Companies

  constructor(
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private authService: AuthService,
    private apiService: Service
  ) {

  }
  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });

    // reset login status
    this.authService.logout();

    // get return url from route parameters or default to '/'
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }


  showPassword(input: any): any {
    input.type = input.type === 'password' ? 'text' : 'password';
  }

  get f() { return this.loginForm.controls; }

  onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.loginForm.invalid) {
      return;
    }

    this.loading = true;
    const credential = new CredentialsViewModel();
    credential.dbName = this.dbName;
    credential.userName = this.f.username.value;
    credential.password = this.f.password.value;
    credential.address = '172.24.11.164';
    credential.dbName = 'SBOLIVE_AM';
    this.apiService.login(credential)
      .subscribe(
        response => {
          if (response.result === 'success') {
            localStorage.setItem('currentUser', JSON.stringify(response.resultData));
            this.router.navigate(['sellout']);
            const toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 3000
            });

            toast.fire({
              type: 'success',
              title: 'Signed in successfully'
            });
          } else {
            this.error = response.message;
          }
          this.loading = false;
        },
        error => {
          this.error = error;
          this.loading = false;
        }
      );
  }
}


<div class="app-body">
  <main class="main d-flex align-items-center">
    <div class="container">
      <div class="row" style="padding-left: 1rem; padding-right: 1rem;">
        <div class="col-sm-5 bg-white rounded">
          <div class="ibox-content" style="padding-bottom: 1rem;">
            <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
              <div class="text-center">
                <img src="assets/img/avatars/RPO.png" class="ml-auto mt-3 mb-3" width="25%" />
              </div>
              <div *ngIf="error" class="alert alert-danger">{{error}}</div>
              <p class="text-muted">Sign In to your account</p>
              <div class="input-group mb-1">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="icon-user"></i></span>
                </div>
                <input type="text" formControlName="username" class="form-control"
                  [ngClass]="{ 'is-invalid': submitted && f.username.errors }" placeholder="Username">
                <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                  <div *ngIf="f.username.errors.required">Username is required</div>
                </div>
              </div>
              <div class="input-group mb-1">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="icon-lock"></i></span>
                </div>
                <input #inputPass type="password" formControlName="password" class="form-control"
                  [ngClass]="{ 'is-invalid': submitted && f.password.errors }" placeholder="Password" />
                <div class="input-group-append">
                  <button class="btn btn-outline-primary" type="button" (click)="showPassword(inputPass)"><i
                      [ngClass]="inputPass.type == 'password' ? 'fa fa-eye' : 'fa fa-eye-slash'"></i></button>
                </div>
                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                  <div *ngIf="f.password.errors.required">Password is required</div>
                </div>
              </div>

              <button [disabled]="loading" type="submit" class="btn btn-primary btn-block"
                style="margin-top: 2rem;">Login <img *ngIf="loading"
                  src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /></button>

              <!-- <a class="mb-10" href="#">
                <small>Forgot password?</small>
              </a>

              <p class="text-muted text-center">
                <small>Do not have an account?</small>
              </p>
              <button type="button" class="btn btn-outline-primary btn-sm btn-block">Create an account</button> -->

            </form>
          </div>
        </div>
        <div class="col-sm-7">
          <h2 class="font-bold">RPO Software Solutions Inc.,</h2>
          <small>Powered by <a href="#">RPO Dev Team</a> &copy; 2019</small>
          <div class="card-body">
            <carousel [interval]="3000">
              <slide>
                <img src="../../../assets/img/p_big1.jpg" alt="First slide" style="display: block; width: 100%;">
              </slide>
              <slide>
                <img src="../../../assets/img/p_big2.jpg" alt="Second slide" style="display: block; width: 100%;">
              </slide>
              <slide>
                <img src="../../../assets/img/p_big3.jpg" alt="Third slide" style="display: block; width: 100%;">
              </slide>
            </carousel>
          </div>
        </div>

      </div>
      <hr />
      <div class="row">
        <div class="col-md-6">
          Copyright <a href="#">RPO Software Solutions Inc.,</a>
        </div>
        <div class="col-md-6 text-right">
          <small>© 2019</small>
        </div>
      </div>
    </div>

  </main>
</div>