Asymmetrik/mean2-starter

View on GitHub
src/client/app/admin/password/reset-password.component.html

Summary

Maintainability
Test Coverage
<section>

    <div class="row">
        <h3 class="col-md-12 text-center">Reset your password</h3>
        <p class=" col-md-4 col-md-offset-4 small text-center">
            Use this form to reset your password. When you hit 'Reset Password', we will reset your password and log you in.
        </p>
    </div>


    <br/>
    <div class="row">
        <div class="col-md-offset-5 col-md-2">

            <form class="signin form-horizontal" autocomplete="off">
                <fieldset>

                    <div class="text-center form-group">
                        <label for="newPassword">New Password</label>
                        <input type="password" id="newPassword" name="newPassword" class="form-control" [(ngModel)]="newPassword" [disabled]="invalid" placeholder="New Password">
                    </div>
                    <div class="text-center form-group">
                        <label for="verifyPassword">Verify Password</label>
                        <input type="password" id="verifyPassword" name="verifyPassword" class="form-control" [(ngModel)]="verifyPassword" [disabled]="invalid" placeholder="Verify Password">
                    </div>
                    <div class="text-center form-group">
                        <button class="btn btn-primary btn" type="button" [disabled]="invalid" (click)="resetPassword()">
                            Reset Password
                        </button>
                    </div>

                </fieldset>
            </form>

        </div>
    </div>

    <div class="row">
        <div class="col-md-offset-4 col-md-4 text-center text-danger" [hidden]="!invalid">
            <strong>The password reset request is invalid or has already expired. You can submit another request <a routerLink="/password/forgot">here</a>.</strong>
        </div>

        <div class="col-md-offset-4 col-md-4 text-center text-danger" [hidden]="!error">
            <strong>{{ error }}</strong>
        </div>

        <div class="col-md-offset-4 col-md-4 text-center text-success" [hidden]="!success">
            <strong>{{ success }}</strong>
        </div>
    </div>

</section>