@model BuddyFinance.Integration.Models.Account.AccountLoginModel
@{ ViewData["Title"] = "Account Login"; }

<style>
    .logo-img-active {
        display: none !important;
    }

    .form-signin {
        max-width: 330px;
        padding: 15px;
        margin: 0 auto;
        padding-top: 90px
    }

    .login-logo {
        margin-left: auto;
        margin-right: auto;
    }
</style>

@section scripts {
    <script>
        BuddyFinance.resetUrl = '@ViewData["resetPassworUrl"]';
    </script>

    <script src="~/lib/urijs/uri.js"></script>
    <script src="~/app/Models/enums.js"></script>
    <script src="~/app/Models/AccountLoginModel.js"></script>
    <script src="~/app/controllers/AccountLoginController.js"></script>
}

<div ng-app="app" ng-controller="AccountLoginCtrl"
     ng-init="retunUrl = '@Model.ReturnUrl'">
    <div ng-cloak class="login text-center input-form form-signin">
        <img class="img-responsive login-logo clearfix" src=@Url.Content("~/images/main-logo.svg") />

        <div ng-show="modelIsValid == false" class="alert alert-danger error-messages" style="padding: 10px">
            <ul ng-repeat="err in valResult" style="list-style: none">
                <li>{{ err }}</li>
            </ul>
        </div>

        <div ng-switch="viewMode" style="padding: 10px">

            <div ng-switch-when="forgorpassword">
                <form asp-action="ForgotPassword">
                    <div class="form-group">
                        <input ng-model="accountModel.Username" class="form-control centered" />
                    </div>

                    <div class="form-group">
                        <input type="button" ng-click="reset()" value="reset" class="btn btn-success btn-block centered" />
                    </div>
                </form>
                <div class="form-group" style="text-align: center">
                    <a style="cursor: pointer" ng-click="goforLogin()">Login with an existing account</a>
                </div>
            </div>

            <div ng-switch-when="passwordResetSent" style="padding: 15px">
                <h3 class="heading">Forgot Password</h3>
                <p class="buddy-paragraph">
                    Password reset email has been sent. Please check your inbox and click the "reset" button
                </p>
            </div>

            <div ng-switch-when="login">
                <form>

                    <input type="hidden" value="@Model.ReturnUrl" ng-model="retunUrl" />

                    <div class="form-group">
                        <input tabindex="1" ng-model="accountModel.Username" class="form-control centered"
                               placeholder="username" />
                    </div>
                    <div class="form-group">
                        <input tabindex="2" ng-model="accountModel.Password" class="form-control centered" type="password"
                               placeholder="password" />
                    </div>
                    <div class="form-group">
                        <input type="button" tabindex="3" ng-click="login()" value="login" class="btn btn-success btn-block centered" />
                    </div>

                    <div class="form-group" style="text-align: center">
                        <span id="resentLink" style="display: none">
                            <a class="btn btn-default btn-xs"
                               ng-click="resendVerification()">Resend Link</a>
                            <br /><br />
                        </span>
                        <a class="action-btn" ng-click="forgorpassword()">Forgot Password ?</a> <br /><br />
                        don't have an account? <a class="action-btn" href="@Url.Action("Register", "Account")" title="Register a new Account">register here</a>
                    </div>
                </form>
            </div>

            <div ng-switch-when="changepassword">
                <form>


                    <input type="hidden" value="@Model.ReturnUrl" ng-model="retunUrl" />

                    <h3>Your password must be updated.</h3>

                    <div class="form-group">
                        <input ng-model="accountModel.OldPassword"
                               class="form-control centered" type="password" placeholder="current password" />
                    </div>
                    <div class="form-group">
                        <input ng-model="accountModel.NewPassword" class="form-control centered"
                               type="password" placeholder="new password" />
                    </div>
                    <div class="form-group">
                        <input ng-model="accountModel.ConfirmNewPassword"
                               class="form-control centered" type="password" placeholder="confrim new password" />
                    </div>

                    <div class="form-group">
                        <input type="button" ng-click="changepassword()" value="change password"
                               class="btn btn-success btn-block centered" />

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>