Add faq links and rework google/password login workflow

src/js/controller/add-account.js

@@ -22,49 +22,80 @@ var AddAccountCtrl = function($scope, $location, $routeParams, $http) {
 
         $http.get(url).success(function(config) {
             $scope.busy = false;
-            $scope.state.mailConfig = config;
+            $scope.state.login = {
-            $scope.state.emailAddress = $scope.emailAddress;
+                mailConfig: config,
+                emailAddress: $scope.emailAddress
+            };
 
-            // check for gmail/oauth server
             var hostname = config.imap.hostname;
-            if (hostname.match(/.gmail.com$/) || hostname.match(/.googlemail.com$/)) {
+            if (hostname && hostname.match(/.gmail.com$/) || hostname.match(/.googlemail.com$/)) {
+                // check for gmail/oauth support
                 $scope.connectToGoogle();
-                return;
+            } else if (config.imap.source === 'guess') {
+                // use standard password login... show config details due to guess
+                setCredentials('custom');
+            } else {
+                // use standard password login... hide config details
+                setCredentials();
             }
 
         }).error(function() {
             $scope.busy = false;
-            $scope.errMsg = 'Error getting IMAP settings for that email address!';
+            $scope.errMsg = 'Error fetching IMAP settings for that email address!';
         });
     };
 
     $scope.connectToGoogle = function() {
         // test for oauth support
         if (appCtrl._auth._oauth.isSupported()) {
-            // fetches the email address from the chrome identity api
+            // ask user to use the platform's native OAuth api
-            appCtrl._auth.getOAuthToken(function(err) {
+            $scope.onError({
-                if (err) {
+                title: 'Google Account Login',
-                    return $scope.onError(err);
+                message: 'You are signing into a Google account. Would you like to sign in with Google or just continue with a password login?',
+                positiveBtnStr: 'Google sign in',
+                negativeBtnStr: 'Password',
+                showNegativeBtn: true,
+                faqLink: 'https://github.com/whiteout-io/mail-html5/wiki/FAQ#how-does-sign-in-with-google-work',
+                callback: function(granted) {
+                    if (granted) {
+                        useOAuth();
+                    } else {
+                        setGmailPassword();
+                        $scope.$apply();
+                    }
                 }
-                $location.path('/login-set-credentials').search({
-                    provider: 'gmail'
-                });
-                $scope.$apply();
             });
-            return;
+        } else {
+            // no oauth support
+            setGmailPassword();
         }
-
-        // use normal user/password login
-        $location.path('/login-set-credentials').search({
-            provider: 'gmail'
-        });
     };
 
-    $scope.connectTo = function(provider) {
+    //
+    // Helper functions
+    //
+
+    function useOAuth() {
+        // fetches the email address from the chrome identity api
+        appCtrl._auth.getOAuthToken(function(err) {
+            if (err) {
+                return $scope.onError(err);
+            }
+            setCredentials('gmail');
+            $scope.$apply();
+        });
+    }
+
+    function setGmailPassword() {
+        // use normal user/password login
+        setCredentials('gmail');
+    }
+
+    function setCredentials(provider) {
         $location.path('/login-set-credentials').search({
             provider: provider
         });
-    };
+    }
 };
 
 module.exports = AddAccountCtrl;

src/js/controller/login-set-credentials.js

@@ -21,44 +21,46 @@ var SetCredentialsCtrl = function($scope, $location, $routeParams) {
     //
 
     var provider = $location.search().provider;
-    $scope.hasProviderPreset = !!config[provider];
+    $scope.hasProviderPreset = ($scope.state.login && $scope.state.login.mailConfig);
     $scope.useOAuth = !!auth.oauthToken;
     $scope.showDetails = (provider === 'custom');
 
+    // set email address
     if ($scope.useOAuth) {
         $scope.emailAddress = auth.emailAddress;
-    } else if ($scope.state.emailAddress) {
+    } else if ($scope.state.login) {
-        $scope.emailAddress = $scope.state.emailAddress;
+        $scope.emailAddress = $scope.state.login.emailAddress;
     }
 
     if ($scope.hasProviderPreset) {
-        // use non-editable presets
+        // use editable presets
+        var mailConfig = $scope.state.login.mailConfig;
 
         // SMTP config
-        $scope.smtpHost = config[provider].smtp.host;
+        $scope.smtpHost = mailConfig.smtp.hostname;
-        $scope.smtpPort = config[provider].smtp.port;
+        $scope.smtpPort = parseInt(mailConfig.smtp.port, 10);
-        $scope.smtpCert = config[provider].smtp.ca;
+        // $scope.smtpCert = config[provider].smtp.ca;
-        $scope.smtpPinned = config[provider].smtp.pinned;
+        // $scope.smtpPinned = config[provider].smtp.pinned;
 
         // transport encryption method
-        if (config[provider].smtp.secure && !config[provider].smtp.ignoreTLS) {
+        if (mailConfig.smtp.secure && !mailConfig.smtp.ignoreTLS) {
             $scope.smtpEncryption = ENCRYPTION_METHOD_TLS;
-        } else if (!config[provider].smtp.secure && !config[provider].smtp.ignoreTLS) {
+        } else if (!mailConfig.smtp.secure && !mailConfig.smtp.ignoreTLS) {
             $scope.smtpEncryption = ENCRYPTION_METHOD_STARTTLS;
         } else {
             $scope.smtpEncryption = ENCRYPTION_METHOD_NONE;
         }
 
         // IMAP config
-        $scope.imapHost = config[provider].imap.host;
+        $scope.imapHost = mailConfig.imap.hostname;
-        $scope.imapPort = config[provider].imap.port;
+        $scope.imapPort = parseInt(mailConfig.imap.port, 10);
-        $scope.imapCert = config[provider].imap.ca;
+        // $scope.imapCert = config[provider].imap.ca;
-        $scope.imapPinned = config[provider].imap.pinned;
+        // $scope.imapPinned = config[provider].imap.pinned;
 
         // transport encryption method
-        if (config[provider].imap.secure && !config[provider].imap.ignoreTLS) {
+        if (mailConfig.imap.secure && !mailConfig.imap.ignoreTLS) {
             $scope.imapEncryption = ENCRYPTION_METHOD_TLS;
-        } else if (!config[provider].imap.secure && !config[provider].imap.ignoreTLS) {
+        } else if (!mailConfig.imap.secure && !mailConfig.imap.ignoreTLS) {
             $scope.imapEncryption = ENCRYPTION_METHOD_STARTTLS;
         } else {
             $scope.imapEncryption = ENCRYPTION_METHOD_NONE;

src/tpl/add-account.html

@@ -4,14 +4,15 @@
       <img src="img/whiteout_logo.svg" alt="whiteout.io">
     </header>
     <main class="page__main">
-      <h2 class="typo-title">Connect email account</h2>
+      <h2 class="typo-title">Connect your email account</h2>
-      <p class="typo-paragraph">Connect the Whiteout Mail client to your existing email account via IMAP for easy to use end-to-end encryption. We cannot read your password or messages. <a href="https://github.com/whiteout-io/mail-html5/wiki/FAQ#encryption-and-security" target="_blank">Learn more</a></p>
+      <p class="typo-paragraph">Connect the Whiteout Mail client to your existing email account via IMAP for easy to use end-to-end encryption. We cannot read your password or messages. <a href="https://github.com/whiteout-io/mail-html5/wiki/FAQ#email-account-login" target="_blank">Learn more</a></p>
 
       <form class="form" name="form">
         <p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>
-        <p class="form__error-message" ng-show="form.$invalid">Please fill out all required fields!</p>
+        <p class="form__error-message" ng-show="form.$invalid">Please enter a valid email address!</p>
         <div class="form__row">
-          <input type="email" ng-model="emailAddress" class="input-text input-text--big" placeholder="Enter email address" required>
+          <input type="email" ng-model="emailAddress" class="input-text input-text--big" placeholder="Enter email address" required
+          autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
         </div>
         <div class="spinner-block" ng-show="busy">
           <span class="spinner spinner--big"></span>

src/tpl/create-account.html

@@ -5,7 +5,7 @@
     </header>
     <main class="page__main">
       <h2 class="typo-title">Create Whiteout account</h2>
-      <p class="typo-paragraph">Please fill out the following form. You will need a <em>beta access code</em> during the private beta period.</p>
+      <p class="typo-paragraph">Please fill out the following form. You will need a <em>beta access code</em> during the private beta period. To participate in the private beta just <a href="mailto:support@whiteout.io?subject=Beta%20Access%20Code&body=I%20would%20like%20to%20try%20the%20encrypted%20Whiteout%20Mailbox%20service.%20Please%20send%20me%20a%20beta%20access%20code." target="_blank">get in touch</a>.</p>
       <form class="form" name="form">
         <p class="form__error-message" ng-show="errMsg">{{errMsg}}</p>
         <p class="form__error-message" ng-show="form.$invalid">Please fill out all required fields!</p>

src/tpl/login-set-credentials.html

@@ -6,10 +6,10 @@
     <main class="page__main">
       <h2 class="typo-title">Login</h2>
       <p class="typo-paragraph" ng-hide="useOAuth">
-        Please enter your email address and 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#encryption-and-security" target="_blank">Learn more</a>
+        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 your email address. Your account will authenticate with your mail provider over an encrypted connection. <a href="https://github.com/whiteout-io/mail-html5/wiki/FAQ#encryption-and-security" target="_blank">Learn more</a>
+        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">
@@ -61,19 +61,19 @@
             <legend>IMAP</legend>
             <div class="form__row form__row--multi">
               <div class="form__col form__col--2">
-                <input required ng-disabled="hasProviderPreset" class="input-text" type="text"
+                <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 ng-disabled="hasProviderPreset" class="input-text" type="number"
+                <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-disabled="hasProviderPreset" ng-model="imapEncryption">
+                <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>
@@ -87,19 +87,19 @@
             <legend>SMTP</legend>
             <div class="form__row form__row--multi">
               <div class="form__col form__col--2">
-                <input required ng-disabled="hasProviderPreset" class="input-text" type="text"
+                <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 ng-disabled="hasProviderPreset" class="input-text" type="number"
+                <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-disabled="hasProviderPreset" ng-model="smtpEncryption">
+                <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>