Web login - simple html + js version (#519)

google · Feb 4, 2019 · 64e2c0e · 64e2c0e
1 parent 30961b3
commit 64e2c0e
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 0 deletions.
diff --git a/tools/reviewer/local_server/web_login_js/.firebaserc b/tools/reviewer/local_server/web_login_js/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "web-login-startupos"
+  }
+}
diff --git a/tools/reviewer/local_server/web_login_js/.gitignore b/tools/reviewer/local_server/web_login_js/.gitignore
@@ -0,0 +1 @@
+.firebase
diff --git a/tools/reviewer/local_server/web_login_js/README.md b/tools/reviewer/local_server/web_login_js/README.md
@@ -0,0 +1,9 @@
+# Firestore web login for StartupOS local server
+
+### Setting
+Port and config: `./src/index.html`
+
+### Deploy
+```
+firebase deploy
+```
diff --git a/tools/reviewer/local_server/web_login_js/firebase.json b/tools/reviewer/local_server/web_login_js/firebase.json
@@ -0,0 +1,27 @@
+{
+  "hosting": {
+    "public": "./",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/*.md"
+    ],
+    "headers": [
+      {
+        "source": "/*",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=600"
+          }
+        ]
+      }
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/tools/reviewer/local_server/web_login_js/index.html b/tools/reviewer/local_server/web_login_js/index.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Log-in with Google</title>
+  <style>
+    .google {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+    .gbutton {
+      cursor: pointer;
+      display: none;
+    }
+    button {
+      padding: 5px 10px;
+    }
+    .chrome {
+      display: none;
+      font-family: Arial;
+      font-size: 18px;
+      color: #7e7e7e;
+      margin-top: 10px;
+    }
+  </style>
+  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
+  <script>
+    const config = {
+      apiKey: 'AIzaSyAn-A7YXlqR2JNOvlbhkVwcnsOigmphQIw',
+      authDomain: 'startupos-5f279.firebaseapp.com',
+      databaseURL: 'https://startupos-5f279.firebaseio.com',
+      projectId: 'startupos-5f279',
+      storageBucket: 'startupos-5f279.appspot.com',
+      messagingSenderId: '160348327132'
+    };
+    const port = 7000;
+    class App {
+      constructor() {
+        this.firebaseApp = firebase.initializeApp(config);
+        this.firebaseApp.auth().onAuthStateChanged(userData => {
+          const isLogin = !!userData;
+          if (isLogin) {
+            this.displayElements(false, true);
+          } else {
+            this.displayElements(true, false);
+          }
+        });
+      }
+
+      init() {
+        if (!this.isChrome()) {
+          this.pleaseOpenChrome();
+        }
+      }
+
+      login() {
+        const provider = new firebase.auth.GoogleAuthProvider();
+        this.firebaseApp.auth()
+          .signInWithPopup(provider)
+          .then(result => {
+            this.getJwtToken(result.user.refreshToken);
+          })
+      }
+
+      logout() {
+        this.firebaseApp.auth().signOut();
+      }
+
+      getJwtToken(refreshToken) {
+        this.firebaseApp.auth().currentUser.getIdToken(true)
+          .then(jwtToken => {
+            this.sendToServer(jwtToken, refreshToken);
+          });
+      }
+
+      sendToServer(jwtToken, refreshToken) {
+        const url = `http://localhost:${port}/token`;
+        const data = {
+          projectId: config.projectId,
+          apiKey: config.apiKey,
+          jwtToken: jwtToken,
+          refreshToken: refreshToken,
+        };
+        const http = new XMLHttpRequest();
+        http.open('POST', url, true);
+        http.setRequestHeader('Content-type', 'application/json');
+        http.send(JSON.stringify(data));
+      }
+
+      displayElements(login, logout) {
+        const loginElement = document.getElementById('login');
+        const logoutElement = document.getElementById('logout');
+        loginElement.style.display = login ? 'block' : 'none';
+        logoutElement.style.display = logout ? 'block' : 'none';
+      }
+
+      isChrome() {
+        return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+      }
+
+      pleaseOpenChrome() {
+        document.getElementById('chrome').style.display = 'block';
+      }
+    }
+    const app = new App();
+
+    window.onload = () => {
+      app.init();
+    };
+  </script>
+</head>
+<body>
+  <div class="google">
+    <div class="gbutton" id="login">
+      <button onclick="app.login()">
+        Log-in with google
+      </button>
+    </div>
+    <div class="gbutton" id="logout">
+      <button onclick="app.logout()">
+        Log Out
+      </button>
+    </div>
+    <div class="chrome" id="chrome">For best support please open Chrome</div>
+  </div>
+</body>
+</html>