<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <meta http-equiv="Content-Security-Policy" content="default-src <%= apiOrigin %> 'unsafe-inline' 'unsafe-eval' 'self'; img-src <%= apiOrigin %> 'self'" />

    <!-- this gets changed once we get the status (because angular has not loaded yet, we see template string for a flash) -->
    <title>&lrm;</title>

    <link id="favicon" href="<%= apiOrigin %>/api/v1/cloudron/avatar" rel="icon" type="image/png">

    <!-- Theme CSS -->
    <link type="text/css" rel="stylesheet" href="/theme.css?<%= revision %>">

    <!-- Fontawesome -->
    <link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.css?<%= revision %>"/>

    <!-- jQuery-->
    <script type="text/javascript" src="/3rdparty/js/jquery.min.js?<%= revision %>"></script>

    <!-- async -->
    <script type="text/javascript" src="/3rdparty/js/async-3.2.0.min.js?<%= revision %>"></script>

    <!-- Bootstrap Core JavaScript -->
    <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js?<%= revision %>"></script>

    <!-- Showdown (markdown converter) -->
    <script type="text/javascript" src="/3rdparty/js/showdown-1.9.1.min.js?<%= revision %>"></script>

    <!-- Angularjs scripts -->
    <script type="text/javascript" src="/3rdparty/js/angular.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-loader.min.js?<%= revision %>"></script>
    <!-- <script type="text/javascript" src="/3rdparty/js/angular-md5.min.js"></script> -->
    <!-- <script type="text/javascript" src="/3rdparty/js/angular-ui-notification.js"></script> -->
    <script type="text/javascript" src="/3rdparty/js/angular-cookies.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/autofill-event.js?<%= revision %>"></script>

    <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
    <script type="text/javascript" src="/3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js?<%= revision %>"></script>

    <!-- Angular translate https://angular-translate.github.io/ -->
    <script type="text/javascript" src="/3rdparty/js/angular-translate.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-translate-loader-static-files.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-cookie.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-local.min.js?<%= revision %>"></script>

    <!-- Setup Application -->
    <script type="text/javascript" src="/js/login.js?<%= revision %>"></script>

</head>

<body ng-app="Application" ng-controller="LoginController">

<div class="layout-root" ng-show="initialized">

  <div class="layout-content" ng-show="mode === 'login'">
    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
          <br/>
          <h1><small>{{ 'login.loginTo' | tr }}</small> {{ status.cloudronName || 'Cloudron' }}</h1>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col-md-12">
          <h4 class="has-error" ng-show="error">{{ 'login.errorIncorrectCredentials' | tr }}</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <form name="loginForm" ng-submit="onLogin()">
            <div class="form-group">
              <label class="control-label" for="inputUsername">{{ 'login.username' | tr }}</label>
              <input type="text" class="form-control" id="inputUsername" name="username" ng-model="username" ng-disabled="busy" autofocus required>
            </div>
            <div class="form-group">
              <label class="control-label" for="inputPassword">{{ 'login.password' | tr }}</label>
              <input type="password" class="form-control" name="password" id="inputPassword" ng-model="password" ng-disabled="busy" required>
            </div>
            <div class="form-group">
              <label class="control-label" for="inputTotpToken">{{ 'login.2faToken' | tr }}</label>
              <input type="text" class="form-control" name="totpToken" id="inputTotpToken" ng-model="totpToken" ng-disabled="busy" value="">
            </div>
            <button class="btn btn-primary btn-outline pull-right" type="submit" ng-disabled="busy || loginForm.$invalid"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> {{ 'login.signInAction' | tr }}</button>
          </form>
          <a ng-href="" class="hand" ng-click="showPasswordReset()">{{ 'login.resetPasswordAction' | tr }}</a>
        </div>
      </div>
    </div>
  </div>

  <div class="layout-content" ng-show="mode === 'passwordReset'">
    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
          <br/>
          <h2>{{ 'passwordReset.title' | tr }}</h2>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col-md-12">
          <form name="passwordResetForm" ng-submit="onPasswordReset()">
            <div class="form-group">
              <label class="control-label" for="inputPasswordResetIdentifier">{{ 'passwordReset.usernameOrEmail' | tr }}</label>
              <input type="text" class="form-control" id="inputPasswordResetIdentifier" name="passwordResetIdentifier" ng-model="passwordResetIdentifier" ng-disabled="busy" autofocus required>
            </div>
            <br/>
            <button class="btn btn-primary btn-outline pull-right" type="submit" ng-disabled="busy || passwordResetForm.$invalid"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> {{ 'passwordReset.resetAction' | tr }}</button>
          </form>
          <a ng-href="" class="hand" ng-click="showLogin()">{{ 'passwordReset.backToLoginAction' | tr }}</a>
        </div>
      </div>
    </div>
  </div>

  <div class="layout-content" ng-show="mode === 'passwordResetDone'">
    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
          <br/>
          <h2>{{ 'passwordReset.emailSent.title' | tr }}</h2>
          <br/>
          <button class="btn btn-primary" ng-click="showLogin()">{{ 'passwordReset.backToLoginAction' | tr }}</button>
        </div>
      </div>
    </div>
  </div>

  <div class="layout-content" ng-show="mode === 'newPassword'">
    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
          <br/>
          <h2>{{ 'passwordReset.newPassword.title' | tr }}</h2>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col-md-12">
          <h4 class="has-error" ng-show="error">{{ error }}</h4>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col-md-12">
          <form name="newPasswordForm" ng-submit="onNewPassword()">
            <input type="password" style="display: none;"/>
            <div class="form-group" ng-class="{ 'has-error': newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid }">
              <label class="control-label" for="inputNewPassword">{{ 'passwordReset.newPassword.password' | tr }}</label>
              <div class="control-label" ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
                <small ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">{{ 'passwordReset.newPassword.errorLength' | tr }}</small>
              </div>
              <input type="password" class="form-control" id="inputNewPassword" ng-model="newPassword" name="newPassword" ng-minlength="8" ng-maxlength="256" autofocus required>
            </div>
            <div class="form-group" ng-class="{ 'has-error': newPasswordForm.newPasswordRepeat.$dirty && (newPassword !== newPasswordRepeat) }">
              <label class="control-label" for="inputNewPasswordRepeat">{{ 'passwordReset.newPassword.passwordRepeat' | tr }}</label>
              <div class="control-label" ng-show="newPasswordForm.newPasswordRepeat.$dirty && (newPassword !== newPasswordRepeat)">
                <small ng-show="newPasswordForm.newPasswordRepeat.$dirty && (newPassword !== newPasswordRepeat)">{{ 'passwordReset.newPassword.errorMismatch' | tr }}</small>
              </div>
              <input type="password" class="form-control" id="inputNewPasswordRepeat" ng-model="newPasswordRepeat" name="newPasswordRepeat" required>
            </div>
            <br/>
            <button class="btn btn-primary btn-outline pull-right" type="submit" ng-disabled="busy || newPasswordForm.$invalid || newPassword !== newPasswordRepeat"><i class="fa fa-circle-notch fa-spin" ng-show="busy"></i> {{ 'passwordReset.passwordChanged.submitAction' | tr }}</button>
          </form>
          <a ng-href="" class="hand" ng-click="showLogin()">{{ 'passwordReset.backToLoginAction' | tr }}</a>
        </div>
      </div>
    </div>
  </div>

  <div class="layout-content" ng-show="mode === 'newPasswordDone'">
    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
      <div class="row">
        <div class="col-md-12" style="text-align: center;">
          <img width="128" height="128" style="margin-top: -84px" src="<%= apiOrigin %>/api/v1/cloudron/avatar"/>
          <br/>
          <h2>{{ 'passwordReset.success.title' | tr }}</h2>
          <br/>
          <a href="/" class="btn btn-primary">{{ 'passwordReset.success.openDashboardAction' | tr }}</a>
        </div>
      </div>
    </div>
  </div>

  <footer class="text-center ng-cloak">
    <span class="text-muted" ng-bind-html="status.footer | markdown2html"></span>
  </footer>

</div>

</body>
</html>

