Sign in with Google button

webextension/css/common.css

@@ -204,6 +204,16 @@ button.selected:focus-visible {
     background-color: #85518E !important;
 }
 
+.btn-white {
+    background-color: #fff;
+    color: #333 !important;
+    border: 1px solid #ccc;
+}
+.btn-white:hover,
+.btn-white:focus-visible {
+    background-color: #f6f6f6;
+}
+
 .btn-light-gray {
     background-color: #737373;
     color: #eee !important;
@@ -305,6 +315,15 @@ button.selected:focus-visible {
         color: #fff;
     }
 
+    .btn-white {
+        background-color: #bbb;
+        border: 1px solid #eee;
+    }
+    .btn-white:hover,
+    .btn-white:focus-visible {
+        background-color: #ccc;
+    }
+
     .btn-yellow {
         background-color: #886600 !important;
         border: 1px solid #CCAA00 !important;

webextension/css/index.css

@@ -57,6 +57,11 @@ body {
     height: 25px;
 }
 
+.g-login-icon {
+    width: 20px;
+    height: 20px;
+}
+
 .feedback-icon-svg {
     width: 27px;
     height: 27px;
@@ -437,10 +442,27 @@ body {
     margin: 5px 2px 10px 2px;
 }
 
-.login-form * {
+.login-form div,
+.login-form input,
+.login-form button {
     margin-top: 8px;
 }
 
+hr.or-line {
+    margin: 15px 3px 0 3px;
+    padding-bottom: 7px;
+    text-align: center;
+    overflow: visible;
+}
+hr.or-line:after {
+    font-size: 12px;
+    content: 'OR';
+    padding: 0 8px;
+    position: relative;
+    top: -10px;
+    background-color: #eee;
+}
+
 /* flipping effect */
 
 .flip {
@@ -545,4 +567,7 @@ body {
         background-color: #666;
     }
 
+    hr.or-line:after {
+        background-color: #2C2C2C;
+    }
 }

webextension/index.html

@@ -375,8 +375,12 @@
     <div class="text-center">
       <img src="images/app-icon/app-icon128.png" alt="Internet Archive" class="ia-logo">
       <p id="login-label"></p>
-      <span id="login-message"></span>
       <form class="login-form">
+        <button type="button" class="btn btn-sm btn-wide btn-white" id="g-login-btn"><img src="images/g-icon40.png" alt="Google Icon" class="g-login-icon">
+          Sign in with Google
+        </button>
+        <hr class="or-line">
+        <span id="login-message"></span>
         <div class="bootstrap-typeahead-input" tabindex="-1">
           <input id="email-input" type="email" placeholder="Email Address" value="" autocomplete="off"
             class="form-control has-aux bootstrap-typeahead-input-main has-selection login-input">
@@ -385,10 +389,9 @@
           <input id="password-input" type="password" placeholder="Password" value="" autocomplete="off"
             class="form-control has-aux bootstrap-typeahead-input-main has-selection login-input">
         </div>
-        <input tabindex="0" type="submit" value="Log In" class="btn btn-sm btn-wide btn-red" id="login-btn">
-        <input tabindex="0" type="button" value="Sign Up" class="btn btn-sm btn-wide btn-dark-gray" id="signup-btn">
-        <input tabindex="0" type="button" value="Forgot Password?" class="btn btn-sm btn-wide btn-dark-gray"
-          id="forgot-pw-btn">
+        <button type="submit" class="btn btn-sm btn-wide btn-red" id="login-btn">Log In</button>
+        <button type="button" class="btn btn-sm btn-wide btn-dark-gray" id="signup-btn">Sign Up</button>
+        <button type="button" class="btn btn-sm btn-wide btn-dark-gray" id="forgot-pw-btn">Forgot Password?</button>
       </form>
     </div>
 

webextension/manifest.json

@@ -38,7 +38,8 @@
       "<all_urls>"
   ],
   "optional_permissions": [
-      "bookmarks"
+      "bookmarks",
+      "identity"
   ],
   "background": {
     "scripts": ["scripts/utils.js",

webextension/scripts/login.js

@@ -14,6 +14,7 @@ $(function() {
   $('#signup-btn').click(signUp)
   $('#forgot-pw-btn').click(forgotPassword)
   $('#login-btn').click(doLogin)
+  $('#g-login-btn').click(doGoogleLogin)
   $('#logout-tab-btn').click(doLogout)
 })
 
@@ -96,3 +97,51 @@ function doLogout() {
   loginError()
   clearSettingsOnLogout()
 }
+
+function doGoogleLogin(e) {
+
+  chrome.permissions.request({ permissions: ['identity'] }, (granted) => {
+    // 'identity' permission shouldn't popup a warning and should be granted automatically
+    if (granted) {
+
+      // temp solution until we can get the OAuth flow working
+      openByWindowSetting('https://archive.org/account/login', 'tab')
+
+      // TODO: move code that calls chrome.identity here
+    }
+  })
+
+  /*
+  const CLIENT_ID = encodeURIComponent('41383750805-slra1gn7ge0bcc8ihpqnkk7hf0fo7dem.apps.googleusercontent.com')
+  const RESPONSE_TYPE = 'token' // 'id_token' ??
+  // const STATE = 'abcdefg' // optional string passed to server
+  const SCOPE = 'openid' // ?
+
+  // TODO: FIXME: Find out what the correct redirect_uri is in the Google Account!
+
+  // const REDIRECT_URL = encodeURIComponent('https://archive.org/account/login') // Error 400: redirect_uri_mismatch
+  // const REDIRECT_URL = encodeURIComponent('https://archive.org') // Error 400: redirect_uri_mismatch
+  const REDIRECT_URL = encodeURIComponent('https://archive.org/services/third_party_sso.php') // Error 400: redirect_uri_mismatch
+
+  // let nonce = encodeURIComponent(Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15));
+
+  let url = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${CLIENT_ID}&response_type=${RESPONSE_TYPE}&redirect_uri=${REDIRECT_URL}&scope=${SCOPE}&prompt=consent`
+  // &state=${STATE}
+  // &nonce=${nonce}
+  console.log(url) // DEBUG
+
+  if (chrome.identity && chrome.identity.launchWebAuthFlow) {
+    // available in Chrome, Firefox, Edge
+    chrome.identity.launchWebAuthFlow({
+      url: url,
+      interactive: true
+    }, (redirect_url) => {
+      console.log(redirect_url) // DEBUG
+      openByWindowSetting(redirect_url) // TEST
+    })
+  } else {
+    // used in Safari
+    openByWindowSetting(url, 'tab')
+  }
+  */
+}

webextension/scripts/popup.js

@@ -463,6 +463,7 @@ function showLoginPage(e) {
   $('#setting-page').hide()
   $('#login-message').hide()
   $('#login-page').show()
+  $('#email-input').focus()
 }
 
 function showLoginFromTab(e) {