tfabrica/ClientApp/app/components/login/tfabrica.login.component.html

library for TFabrica - TechSol

<div 
     class="flex-container login-container"
     fxLayout="row"
     fxLayoutAlign="center center"
     color="primary"
     style="height: 100%;">

    <div class="flex-item"
         fxFlex="20%"
         fxFlex.xs="90%"
         fxFlex.sm="60%"
         fxLayout="column"
         style="background: white;">

        <md-toolbar flex color="primary">
            <h2>Login</h2>
        </md-toolbar>

        <md-progress-bar *ngIf="loading == true" mode="indeterminate"></md-progress-bar>

        <div fxLayout="column" style="padding: 10px;">
            <md-input-container>
                <input md-input mdInput
                       name="username" id="username"
                       required placeholder="Username" #Username>
            </md-input-container>
            <small [hidden]="Username.value != ''" class="error-message">
                {{ 'TK_USERNAME_REQ_MESSAGE' | translate }}
            </small>
            <md-input-container>
                <input md-input  mdInput required placeholder="Password" #Password type="password">
            </md-input-container>
            <small [hidden]="Password.value != ''" class="error-message">
                {{ 'TK_PASSWORD_REQ_MESSAGE' | translate }}
            </small>

            <button md-raised-button
                    color="primary"
                    (click)="startLogin(Username, Password)">
                Login
            </button>

        </div>

    </div>

</div>