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="30%"
         fxFlex.xs="90%"
         fxFlex.sm="50%"
         fxLayout="column"
         style="background: white;">

        <md-toolbar fxFlex color="primary" >
            <div fxFlexAlign="center center" fxFlex style="text-align:center">
                <h2 fxFlexAlign="center center" fxFlex>Login</h2>
            </div>
        </md-toolbar>

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

        <div fxLayout="column" style="padding: 20px; min-height: 240px;">
            <md-input-container  style="margin-top: 10px;">
                <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  style="margin-top: 10px;">
                <input md-input  mdInput required placeholder="Password" #Password type="password" 
                       (keydown.Enter)="startLogin(Username, Password)">
            </md-input-container>
            <small [hidden]="Password.value != ''" class="error-message">
                {{ 'TK_PASSWORD_REQ_MESSAGE' | translate }}
            </small>
            <button color="primary" md-raised-button style="margin-top: 10px;"
                    (click)="startLogin(Username, Password)">
                Login
            </button>

        </div>

    </div>

</div>