Changes to the popup to fit Stadia+DB

src/StadiaPlusDB.ts

@@ -69,6 +69,7 @@ export class StadiaPlusDB {
                 })
             }
 
+            console.log(`${StadiaPlusDB.url}/auth/google?redirect=${chrome.identity.getRedirectURL('database')}`);
             chrome.identity.launchWebAuthFlow(
                 {
                     url: `${StadiaPlusDB.url}/auth/google?redirect=${chrome.identity.getRedirectURL('database')}`,
@@ -84,6 +85,16 @@ export class StadiaPlusDB {
             );
         });
     }
+
+    static signout(): Promise<any> {
+        return axios({
+            method: 'post',
+            url: `${StadiaPlusDB.url}/api/signout`,
+            data: {
+                token: StadiaPlusDB.authToken
+            },
+        });
+    }
 }
 
 export class LFGConnector {
@@ -102,7 +113,7 @@ export class LFGConnector {
             method: 'post',
             url: `${StadiaPlusDB.url}/api/lfg`,
             data: {
-                authToken: StadiaPlusDB.authToken,
+                token: StadiaPlusDB.authToken,
                 game: game
             },
         })

src/lang/en-US.json

@@ -14,9 +14,10 @@
             "github": "Github"
         },
         "user-page": {
-            "title": "Profile",
-            "motd": "Hello {{name}}!",
-            "login-with-google": "Login with Google"
+            "title": "Login",
+            "login-button": "Sign in with Google",
+            "accept-label": "By signing into Stadia+ DB you accept the",
+            "privacy-policy": "privacy policy"
         },
         "settings-page": {
             "title": "Settings",

src/popup/src/App.vue

@@ -83,6 +83,10 @@ hr {
     margin: 0 -0.5rem;
 }
 
+.container {
+    padding: 1rem;
+}
+
 .col {
     margin: 0 0.5rem;
     width: 100%;

src/popup/src/ComponentPage.vue

@@ -79,10 +79,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-    padding: 1rem;
-}
-
 .components {
     height: 250px;
     overflow-y: scroll;

src/popup/src/DeveloperPage.vue

@@ -49,10 +49,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-    padding: 1rem;
-}
-
 h3 {
     margin-bottom: 0.5rem;
 }

src/popup/src/MainPage.vue

@@ -1,12 +1,7 @@
 <template>
     <div class="main-page">
         <div class="container">
-            <page-header
-                :img="logo"
-                icon="settings"
-                v-on:icon-click="settings"
-                >{{ Language.get('popup.main-page.title') }}</page-header
-            >
+            <page-header :img="logo" >{{ Language.get('popup.main-page.title') }}</page-header >
             <p>
                 {{ Language.get('popup.main-page.ready-text') }}
             </p>
@@ -84,7 +79,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-    padding: 1rem;
-}
 </style>

src/popup/src/SettingsPage.vue

@@ -88,10 +88,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-    padding: 1rem;
-}
-
 .icon {
     float: left;
     margin-right: 4px;

src/popup/src/UserPage.vue

@@ -1,34 +1,23 @@
 <template>
     <div class="user-page">
         <div class="container">
-            <page-header :back-button="true">{{
-                Language.get('popup.user-page.title')
-            }}</page-header>
+            <page-header :back-button="true">{{ Language.get('popup.user-page.title') }}</page-header>
 
-            <div v-if="user != null" class="profile">
+            <div v-if="!loading" class="login">
                 <div class="row">
                     <div class="col">
-                        <img :src="user.picture" alt="The profile image" />
-                        <h1>
-                            {{
-                                Language.get('popup.user-page.motd', {
-                                    name: user.given_name,
-                                })
-                            }}
-                        </h1>
+                        <btn v-on:click="authenticate">
+                            <icon><img :src="'/dist/' + GoogleG"/></icon>
+                            {{ Language.get( 'popup.user-page.login-button' ) }}
+                        </btn>
                     </div>
                 </div>
-            </div>
-            <div v-else-if="!loading" class="login">
                 <div class="row">
                     <div class="col">
-                        <btn v-on:click="authenticate">
-                            {{
-                                Language.get(
-                                    'popup.user-page.login-with-google'
-                                )
-                            }}
-                        </btn>
+                        {{ Language.get( 'popup.user-page.accept-label' ) }} 
+                        <a :href="StadiaPlusDB.url + '/privacy-policy'" target="_blank">
+                            {{ Language.get('popup.user-page.privacy-policy') }}
+                        </a>
                     </div>
                 </div>
             </div>
@@ -47,6 +36,7 @@
 import Icon from './components/Icon.vue';
 import PageHeader from './components/PageHeader.vue';
 import Button from './components/Button.vue';
+import GoogleG from './assets/Google G.svg';
 import { Language } from '../../Language';
 import { SyncStorage, LocalStorage } from '../../Storage';
 import { StadiaPlusDB } from '../../StadiaPlusDB';
@@ -55,8 +45,10 @@ export default {
     data() {
         return {
             Language: Language,
+            StadiaPlusDB: StadiaPlusDB,
             user: null,
-            loading: true,
+            loading: false,
+            GoogleG,
         };
     },
     components: {
@@ -69,45 +61,19 @@ export default {
             this.loading = true;
             StadiaPlusDB.authenticate().then(() => {
                 StadiaPlusDB.getProfile().then((profile) => {
-                    (this.user = profile), (this.loading = false);
-                });
-            });
-        },
-    },
-    created() {
-        LocalStorage.AUTH_TOKEN.get((response) => {
-            StadiaPlusDB.authToken = response[LocalStorage.AUTH_TOKEN.tag];
-
-            StadiaPlusDB.getProfile()
-                .then((profile) => {
                     this.user = profile;
                     this.loading = false;
-                    console.log({ profile });
-                })
-                .catch(() => {
-                    StadiaPlusDB.authToken = null;
-                    this.loading = false;
-                    Logger.error('Authentication failed, was it cancelled?');
+                    this.$router.go(-1);
                 });
-        });
-    },
+            });
+        },
+    }
 };
 </script>
 
 <style lang="scss" scoped>
-.container {
-    padding: 1rem;
-}
-
-h3 {
+.row {
     margin-bottom: 0.5rem;
 }
 
-.profile img {
-    margin-bottom: 0.25rem;
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    border: 2px solid #eaeaea;
-}
 </style>

src/popup/src/components/Icon.vue

@@ -1,13 +1,28 @@
 <template>
-    <span class="material-icons" v-on:click="click"><slot /></span>
+    <span class="material-icons" :class="{['type-' + type]: type != undefined}" v-on:click="click"><slot /></span>
 </template>
 
+<style lang="scss" scoped>
+
+.type- {
+    &inline {
+        font-size: 1em;
+        vertical-align: text-top;
+    }
+}
+
+</style>
+
 <script>
 export default {
     methods: {
         click() {
             this.$emit('click');
         }
-    }
+    },
+
+    props: [
+        'type'
+    ]
 }
 </script>