mail/src/tpl/login-set-credentials.html

<section class="page">
  <div class="page__canvas">
    <header class="page__header">
      <img src="img/whiteout_logo.svg" alt="whiteout.io">
    </header>
    <main class="page__main">
      <h2 class="typo-title">Login</h2>
      <p class="typo-paragraph" ng-hide="useOAuth">
        Please enter your password. The password is used to authenticate with your mail provider over an encrypted connection. We cannot read your password. <a href="https://github.com/whiteout-io/mail-html5/wiki/FAQ#is-my-password-secure" target="_blank">Learn more</a>
      </p>
      <p class="typo-paragraph" ng-show="useOAuth">
        Please confirm the Google account your device is currently logged into. If you have multiple Google accounts and need help, please <a href="https://github.com/whiteout-io/mail-html5/wiki/FAQ#how-does-sign-in-with-google-work" target="_blank">click here</a>.
      </p>

      <form class="form" name="form">
        <fieldset class="form-fieldset form-fieldset--standalone form-fieldset--error" ng-show="connectionError">
          <legend>Connection Error</legend>
          <p class="typo-paragraph">{{connectionError.message}}</p>
          <p class="typo-paragraph" ng-show="connectionError.underlyingError">
            Underlying Cause: <em>{{connectionError.underlyingError.message}}</em>
          </p>
          <p class="typo-paragraph">
            <a href="https://github.com/whiteout-io/mail-html5/wiki/FAQ#troubleshooting" target="_blank">
              Find out more in the FAQ.
            </a>
          </p>
        </fieldset>

        <div class="form__row">
          <input class="input-text" type="email" required ng-model="emailAddress"
            placeholder="Email address" tabindex="1" spellcheck="false">
        </div>
        <div class="form__row">
          <input class="input-text" type="text" ng-model="realname"
            placeholder="Full name (optional)" tabindex="2">
        </div>
        <div class="form__row" ng-hide="useOAuth">
          <input ng-required="!useOAuth" class="input-text" type="password"
            ng-model="password" placeholder="Password" tabindex="3">
        </div>

        <p class="typo-paragraph">
          <br>
          <a href="#" wo-touch="$event.preventDefault(); showDetails = !showDetails">
            {{showDetails ? "Hide Options" : "Show Options"}}
          </a>
          <br><br>
        </p>

        <div ng-show="showDetails">
          <div class="form__row" ng-hide="useOAuth">
            <input class="input-text" type="text" ng-model="username" placeholder="User (optional)">
          </div>

          <fieldset class="form-fieldset">
            <legend>IMAP</legend>
            <div class="form__row form__row--multi">
              <div class="form__col form__col--2">
                <input required class="input-text" type="text"
                ng-model="imapHost" placeholder="Host"
                pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$|^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$"
                autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
              </div>
              <div class="form__col">
                <input required class="input-text" type="number"
                  ng-model="imapPort" placeholder="Port" min="0" max="65535" step="1" pattern="\d+">
              </div>
            </div>
            <div class="form__row">
              <label class="input-select">
                <select required ng-model="imapEncryption">
                  <option value="" disabled selected style="display:none">Encryption method</option>
                  <option value="2">TLS</option>
                  <option value="1">STARTTLS</option>
                  <option value="0">None</option>
                </select>
              </label>
            </div>
          </fieldset>

          <fieldset class="form-fieldset">
            <legend>SMTP</legend>
            <div class="form__row form__row--multi">
              <div class="form__col form__col--2">
                <input required class="input-text" type="text"
                  ng-model="smtpHost" placeholder="Host"
                  pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$|^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$"
                  autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
              </div>
              <div class="form__col">
                <input required class="input-text" type="number"
                  ng-model="smtpPort" placeholder="Port" min="0" max="65535" step="1" pattern="\d+">
              </div>
            </div>
            <div class="form__row">
              <label class="input-select">
                <select required ng-model="smtpEncryption">
                  <option value="" disabled selected style="display:none">Encryption method</option>
                  <option value="2">TLS</option>
                  <option value="1">STARTTLS</option>
                  <option value="0">None</option>
                </select>
              </label>
            </div>
          </fieldset>
        </div>
        <div class="spinner-block" ng-show="busy">
          <span class="spinner spinner--big"></span>
        </div>
        <div class="form__row">
          <button type="submit" ng-click="test()" class="btn">Login</button>
        </div>
      </form>
    </main>
    <div ng-include="'tpl/page-footer.html'"></div>
  </div>
</section>