2014-11-05 10:03:48 -05:00
< 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" >
2015-02-24 08:10:21 -05:00
Please enter your credentials. 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 >
2014-11-05 10:03:48 -05:00
< / p >
< p class = "typo-paragraph" ng-show = "useOAuth" >
2014-11-08 07:02:24 -05:00
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 > .
2014-11-05 10:03:48 -05:00
< / p >
2014-07-01 13:49:19 -04:00
2014-11-05 10:03:48 -05:00
< form class = "form" name = "form" >
< fieldset class = "form-fieldset form-fieldset--standalone form-fieldset--error" ng-show = "connectionError" >
2014-09-23 11:40:19 -04:00
< legend > Connection Error< / legend >
2014-11-05 10:03:48 -05:00
< 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 >
2014-09-23 11:40:19 -04:00
< / fieldset >
2014-09-20 14:47:32 -04:00
2014-11-05 10:03:48 -05:00
< div class = "form__row" >
< input class = "input-text" type = "text" ng-model = "realname"
2015-03-01 13:11:16 -05:00
placeholder="Full name (optional)" tabindex="1">
2014-11-05 10:03:48 -05:00
< / div >
2015-03-01 13:06:43 -05:00
< div class = "form__row" >
< input class = "input-text" type = "email" required ng-model = "emailAddress"
2015-03-01 13:11:16 -05:00
placeholder="Email address" tabindex="2" spellcheck="false">
2015-03-01 13:06:43 -05:00
< / div >
2014-11-05 10:03:48 -05:00
< div class = "form__row" ng-hide = "useOAuth" >
2014-11-09 14:58:13 -05:00
< input ng-required = "!useOAuth" class = "input-text" type = "password"
2014-11-05 10:03:48 -05:00
ng-model="password" placeholder="Password" tabindex="3">
< / div >
2014-07-01 13:49:19 -04:00
2014-11-05 10:03:48 -05:00
< p class = "typo-paragraph" >
< br >
2014-12-04 06:47:57 -05:00
< a href = "#" wo-touch = "$event.preventDefault(); showDetails = !showDetails" >
2014-11-05 10:03:48 -05:00
{{showDetails ? "Hide Options" : "Show Options"}}
< / a >
< br > < br >
< / p >
2014-09-05 13:02:02 -04:00
2014-11-05 10:03:48 -05:00
< div ng-show = "showDetails" >
< div class = "form__row" ng-hide = "useOAuth" >
< input class = "input-text" type = "text" ng-model = "username" placeholder = "User (optional)" >
2014-09-05 13:02:02 -04:00
< / div >
2014-07-01 13:49:19 -04:00
2014-11-05 10:03:48 -05:00
< fieldset class = "form-fieldset" >
< legend > IMAP< / legend >
< div class = "form__row form__row--multi" >
< div class = "form__col form__col--2" >
2014-11-08 07:02:24 -05:00
< input required class = "input-text" type = "text"
2014-11-05 10:03:48 -05:00
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" >
2014-11-08 07:02:24 -05:00
< input required class = "input-text" type = "number"
2014-11-05 10:03:48 -05:00
ng-model="imapPort" placeholder="Port" min="0" max="65535" step="1" pattern="\d+">
< / div >
< / div >
< div class = "form__row" >
< label class = "input-select" >
2014-11-08 07:02:24 -05:00
< select required ng-model = "imapEncryption" >
2014-11-05 10:03:48 -05:00
< 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 >
2014-07-01 13:49:19 -04:00
2014-11-05 10:03:48 -05:00
< fieldset class = "form-fieldset" >
< legend > SMTP< / legend >
< div class = "form__row form__row--multi" >
< div class = "form__col form__col--2" >
2014-11-08 07:02:24 -05:00
< input required class = "input-text" type = "text"
2014-11-05 10:03:48 -05:00
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" >
2014-11-08 07:02:24 -05:00
< input required class = "input-text" type = "number"
2014-11-05 10:03:48 -05:00
ng-model="smtpPort" placeholder="Port" min="0" max="65535" step="1" pattern="\d+">
< / div >
< / div >
< div class = "form__row" >
< label class = "input-select" >
2014-11-08 07:02:24 -05:00
< select required ng-model = "smtpEncryption" >
2014-11-05 10:03:48 -05:00
< 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" >
2014-11-12 10:12:26 -05:00
< button type = "submit" ng-click = "test()" class = "btn" > Login< / button >
2014-11-05 10:03:48 -05:00
< / div >
< / form >
< / main >
< div ng-include = "'tpl/page-footer.html'" > < / div >
< / div >
< / section >