From f3fe7e1de1bb4316dea5befa0dc5cfcccac56973 Mon Sep 17 00:00:00 2001
From: Nathanael Couret <nathanael.couret@gmail.com>
Date: Sun, 22 Mar 2020 11:58:24 +0100
Subject: [PATCH 1/9] #15 - Refactored navbar component

---
 src/components/navigation/TheNav.vue | 46 ++++++++++++++++++++++++++++
 src/views/Login.vue                  | 24 +++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/components/navigation/TheNav.vue
 create mode 100644 src/views/Login.vue

diff --git a/src/components/navigation/TheNav.vue b/src/components/navigation/TheNav.vue
new file mode 100644
index 0000000..2a65d59
--- /dev/null
+++ b/src/components/navigation/TheNav.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <the-nav-extra-large class="the-nav-extra-large" :id="id"/>
+    <the-nav-small class="the-nav-small" :id="id"/>
+    <the-nav-extra-small class="the-nav-extra-small" :id="id"/>
+  </div>
+</template>
+
+<script lang="ts">
+import TheNavExtraLarge from '@/components/navigation/TheNavExtraLarge.vue'
+import TheNavSmall from '@/components/navigation/TheNavSmall.vue'
+import TheNavExtraSmall from '@/components/navigation/TheNavExtraSmall.vue'
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+  @Component({
+    name: 'the-nav',
+    components: {
+      TheNavExtraLarge,
+      TheNavSmall,
+      TheNavExtraSmall
+    }
+  })
+export default class extends Vue {
+    @Prop() id!: string
+}
+</script>
+<style scoped lang="scss">
+
+  @media (max-width: 575px) {
+    .the-nav-extra-large, .the-nav-small {
+      display: none;
+    }
+  }
+
+  @media (min-width: 576px) and (max-width: 1199px) {
+    .the-nav-extra-large, .the-nav-extra-small {
+      display: none;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .the-nav-small, .the-nav-extra-small {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..7c068c2
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <the-nav :id="id" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import TheNav from '@/components/navigation/TheNav.vue'
+
+  @Component({
+    name: 'Login',
+    components: {
+      TheNav
+    }
+  })
+export default class extends Vue {
+    @Prop() id!: string
+}
+</script>
+
+<style scoped>
+
+</style>

From 869851fa999b2dccb6d7f3b836730c5149ea4c38 Mon Sep 17 00:00:00 2001
From: Ataww <nathanael.couret@gmail.com>
Date: Thu, 23 Apr 2020 21:51:11 +0200
Subject: [PATCH 2/9] #15 - Login card with auth token in local storage

---
 src/App.vue                               | 22 ++++++-
 src/components/navigation/LoginCard.vue   | 63 ++++++++++++++++++
 src/components/navigation/LoginDialog.vue | 80 +++++++++++++++++++++++
 src/components/navigation/TheUserMenu.vue | 70 ++++++++++++++------
 src/plugins/vuetify.ts                    |  8 ++-
 src/router/index.ts                       |  6 ++
 src/store/modules/authentication.ts       | 30 ++++++++-
 src/views/Login.vue                       | 64 +++++++++++++++---
 8 files changed, 308 insertions(+), 35 deletions(-)
 create mode 100644 src/components/navigation/LoginCard.vue
 create mode 100644 src/components/navigation/LoginDialog.vue

diff --git a/src/App.vue b/src/App.vue
index aaef3ce..d42830b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,10 +7,14 @@
 <script lang="ts">
 import Component from 'vue-class-component'
 import Vue from 'vue'
-import { Action } from 'vuex-class'
-import { RoomAction, Game, Locale, GameName, Ship } from '@/store/modules/room'
-import { WowsShipsApiResponse, WowsShipInfoApiResponse } from '@/types/Games/Wows'
+import { Action, namespace } from 'vuex-class'
+import { Game, GameName, Locale, RoomAction, Ship } from '@/store/modules/room'
+import { WowsShipInfoApiResponse, WowsShipsApiResponse } from '@/types/Games/Wows'
 import axios from 'axios'
+import { Namespaces } from '@/store'
+import { AuthenticationActions, ExtendedJWT, JWT_KEY } from '@/store/modules/authentication'
+
+const authNamespace = namespace(Namespaces.AUTH)
 
 @Component({
   name: 'TheApp'
@@ -18,10 +22,13 @@ import axios from 'axios'
 export default class TheApp extends Vue {
   @Action(`room/${RoomAction.SET_GAME}`) setGame!: (game: Game) => void
   @Action(`room/${RoomAction.SET_LOCALE}`) setLocale!: (locale: Locale) => void
+  @authNamespace.Action(AuthenticationActions.AUTHENTICATE) authenticate!: (token: string) => Promise<ExtendedJWT>
+  @authNamespace.Action(AuthenticationActions.STORE_TOKEN) storeToken!: (token: string) => void
   async created () {
     this.setGame({ name: GameName['WOWS'], ships: [], gameInfo: undefined })
     this.setLocale(Locale['ENUK'])
     this.setGame(await this.getWowsApiData())
+    this.initAuthentication()
   }
 
   async getWowsApiData (): Promise<Game> {
@@ -43,6 +50,15 @@ export default class TheApp extends Vue {
       gameInfo: gameInfo.data.data
     }
   }
+
+  initAuthentication () {
+    const localToken = localStorage.getItem(JWT_KEY)
+    if (this.$route?.query?.code) {
+      this.authenticate(this.$route.query.code as string).then(jwt => this.storeToken(jwt.encoded))
+    } else if (localToken !== null) {
+      this.authenticate(localToken)
+    }
+  }
 }
 </script>
 <style lang="scss">
diff --git a/src/components/navigation/LoginCard.vue b/src/components/navigation/LoginCard.vue
new file mode 100644
index 0000000..a085411
--- /dev/null
+++ b/src/components/navigation/LoginCard.vue
@@ -0,0 +1,63 @@
+<template>
+  <v-card>
+    <v-card-title>Login</v-card-title>
+    <v-divider></v-divider>
+    <v-card-text>
+      <h4>Please select a realm to log in with</h4>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn color="primary" @click="authEU" depressed>
+        EU
+      </v-btn>
+      <v-btn color="primary" @click="authNA" depressed>
+        NA
+      </v-btn>
+      <v-btn color="primary" @click="authASIA" depressed>
+        ASIA
+      </v-btn>
+      <v-btn color="primary" @click="authRU" depressed>
+        CIS
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import { Namespaces } from '@/store'
+import { AuthenticationActions, JWTRegion } from '@/store/modules/authentication'
+
+const authNamespace = namespace(Namespaces.AUTH)
+
+  @Component({
+    name: 'g-login-card'
+  })
+export default class extends Vue {
+    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
+
+    authEU () {
+      console.log('authentication to ' + JWTRegion.EU)
+      this.authenticate(JWTRegion.EU)
+    }
+
+    authNA () {
+      console.log('authentication to ' + JWTRegion.NA)
+      this.authenticate(JWTRegion.NA)
+    }
+
+    authASIA () {
+      console.log('authentication to ' + JWTRegion.SA)
+      this.authenticate(JWTRegion.SA)
+    }
+
+    authRU () {
+      console.log('authentication to ' + JWTRegion.RU)
+      this.authenticate(JWTRegion.RU)
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/navigation/LoginDialog.vue b/src/components/navigation/LoginDialog.vue
new file mode 100644
index 0000000..829391b
--- /dev/null
+++ b/src/components/navigation/LoginDialog.vue
@@ -0,0 +1,80 @@
+<template>
+  <v-dialog v-model="dialogOpen" width="500" v-bind="$attrs" v-on="$listeners">
+    <template #activator="{ on }">
+      <slot name="activator" v-bind="{ on: getSafeOnHandler(on) }" />
+    </template>
+
+    <slot v-bind="close" />
+    <v-card>
+      <v-card-title>Login</v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <h4>Please select a realm to log in with</h4>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="primary" :click="authEU" depressed>
+          EU
+        </v-btn>
+        <v-btn color="primary" :click="authNA" depressed>
+          NA
+        </v-btn>
+        <v-btn color="primary" :click="authASIA" depressed>
+          ASIA
+        </v-btn>
+        <v-btn color="primary" :click="authRU" depressed>
+          CIS
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import { Namespaces } from '@/store'
+import { AuthenticationActions, JWTRegion } from '@/store/modules/authentication'
+
+const authNamespace = namespace(Namespaces.AUTH)
+
+  @Component({
+    name: 'login-dialog'
+  })
+export default class extends Vue {
+    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
+    dialogOpen = false
+
+    authEU () {
+      this.authenticate(JWTRegion.EU)
+    }
+
+    authNA () {
+      this.authenticate(JWTRegion.NA)
+    }
+
+    authASIA () {
+      this.authenticate(JWTRegion.SA)
+    }
+
+    authRU () {
+      this.authenticate(JWTRegion.RU)
+    }
+
+    // @see: https://github.com/vuetifyjs/vuetify/issues/7021
+    getSafeOnHandler ({ click }: { click: Function }): { click: Function } {
+      return {
+        click (event: Event) {
+          return setTimeout(() => click(event), 0)
+        }
+      }
+    }
+
+    close (): void {
+      this.dialogOpen = false
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index 6ad7009..4c42e89 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -16,6 +16,15 @@
       </v-tooltip>
     </template>
     <v-list>
+      <v-list-item v-if="isAuth" @click="logout">
+        <v-list-item-title>Logout</v-list-item-title>
+      </v-list-item>
+      <v-list-item v-else @click="doOpen">
+        <v-list-item-title>Login</v-list-item-title>
+        <v-dialog v-model="dialogOpen" @click:outside="dialogOpen = false" max-width="300px">
+          <g-login-card></g-login-card>
+        </v-dialog>
+      </v-list-item>
       <v-list-item
         v-for="(userMenuItem, index) in userMenuItems"
         :key="index"
@@ -28,6 +37,15 @@
   </v-menu>
   <v-list v-else dense style="width: 100%;">
     <v-subheader>User Profile</v-subheader>
+    <v-list-item v-if="isAuth" @click="logout">
+      <v-list-item-title>Logout</v-list-item-title>
+    </v-list-item>
+    <v-list-item v-else @click="doOpen">
+      <v-list-item-title>Login</v-list-item-title>
+      <v-dialog v-model="dialogOpen" @click:outside="dialogOpen = false" fullscreen>
+        <g-login-card></g-login-card>
+      </v-dialog>
+    </v-list-item>
     <v-list-item
       v-for="item in userMenuItems"
       :key="item.text"
@@ -41,31 +59,43 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import { Namespaces } from '@/store'
+import { AuthenticationActions, AuthenticationGetters } from '@/store/modules/authentication'
+import LoginDialog from '@/components/navigation/LoginDialog.vue'
+import GLoginCard from '@/components/navigation/LoginCard.vue'
 
-interface UserMenuItem {
-  text: string;
-  title: string;
-}
+const authNamespace = namespace(Namespaces.AUTH)
+
+  interface UserMenuItem {
+    text: string;
+    title: string;
+  }
 
-@Component({
-  name: 'TheUserMenu'
-})
+  @Component({
+    name: 'TheUserMenu',
+    components: { GLoginCard, LoginDialog }
+  })
 export default class TheUserMenu extends Vue {
-  @Prop() private mobile!: boolean;
-  userMenuItems: UserMenuItem[] = [{
-    text: 'Login',
-    title: 'Login to save your progress'
-  }, {
-    text: 'Logout',
-    title: 'Logout of your logged in account'
-  }]
+    @authNamespace.Getter(AuthenticationGetters.IS_AUTH) isAuth!: boolean
+    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
+    @authNamespace.Action(AuthenticationActions.LOGOUT) logout!: () => void
 
-  // eslint-disable-next-line
-  userMenuItemsClickHandler (item: UserMenuItem) {
-    // do stuff
-  }
+    @Prop() private mobile!: boolean
+
+    dialogOpen = false
+
+    doOpen () {
+      setTimeout(() => { this.dialogOpen = true })
+    }
+
+    userMenuItems: UserMenuItem[] = []
+
+    // eslint-disable-next-line
+    userMenuItemsClickHandler(item: UserMenuItem) {
+      // do stuff
+    }
 }
 
 </script>
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index f557557..17fde5c 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -43,11 +43,17 @@ import Vuetify, {
   VTextField,
   VChipGroup,
   VChip,
-  VSkeletonLoader
+  VSkeletonLoader,
+  VDialog,
+  VCardText,
+  VCardTitle
 } from 'vuetify/lib'
 
 Vue.use(Vuetify, {
   components: {
+    VCardText,
+    VCardTitle,
+    VDialog,
     VApp,
     VRadioGroup,
     VSwitch,
diff --git a/src/router/index.ts b/src/router/index.ts
index 103991b..dfa5017 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,10 +2,16 @@ import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
 import Room from '@/views/Room.vue'
 import Index from '@/views/Index.vue'
+import Login from '@/views/Login.vue'
 
 Vue.use(VueRouter)
 
 const routes: RouteConfig[] = [
+  {
+    path: '/login',
+    name: 'login',
+    component: Login
+  },
   {
     path: '/:id',
     name: 'room',
diff --git a/src/store/modules/authentication.ts b/src/store/modules/authentication.ts
index 395bf0d..69a8022 100644
--- a/src/store/modules/authentication.ts
+++ b/src/store/modules/authentication.ts
@@ -2,6 +2,8 @@ import { ActionContext, Module } from 'vuex'
 import axios from 'axios'
 import { verify } from 'jsonwebtoken'
 
+export const JWT_KEY = 'jsonwebtoken'
+
 // Possible regions in the JWT token.
 export enum JWTRegion {
   EU = 'eu',
@@ -10,6 +12,19 @@ export enum JWTRegion {
   SA = 'sa',
 }
 
+export function regionDomain (region: JWTRegion): string {
+  switch (region) {
+    case JWTRegion.EU:
+      return 'eu'
+    case JWTRegion.NA:
+      return 'na'
+    case JWTRegion.RU:
+      return 'ru'
+    case JWTRegion.SA:
+      return 'asia'
+  }
+}
+
 export interface JWT {
   iss: string; // Who issued it. Example: GameTactic.
   aud: string; // For what. Example: GameTactic.
@@ -32,6 +47,8 @@ export interface AuthenticationState {
 export enum AuthenticationActions {
   AUTHENTICATE = 'authenticate',
   LOGIN_WG = 'auth_wg',
+  LOGOUT = 'logout',
+  STORE_TOKEN = 'storeToken'
 }
 
 export enum AuthenticationMutation {
@@ -76,10 +93,19 @@ const AuthenticationModule: Module<AuthenticationState, {}> = {
       // TODO: You probably want put this into the `state`. -Niko
       // Im not sure how this should be done, so I did it as I know.
       context.commit('SET_AUTHENTICATION_TOKEN', extended)
+      return extended
+    },
+    [AuthenticationActions.STORE_TOKEN] (context: AuthenticationActionContext, token: string) {
+      localStorage.setItem(JWT_KEY, token)
     },
-    async [AuthenticationActions.LOGIN_WG] (context: AuthenticationActionContext, region: string) {
+    [AuthenticationActions.LOGIN_WG] (context: AuthenticationActionContext, region: JWTRegion) {
       // TODO: This is just placeholder logic. Please check it works. -Niko
-      location.replace(process.env.VUE_APP_MS_AUTH + `/connect/wargaming/${region}/${window.location.href}`)
+      const returnUrl = process.env.VUE_APP_MS_AUTH + `/connect/wargaming/${regionDomain(region)}/${window.location.href}`
+      location.assign(returnUrl)
+    },
+    [AuthenticationActions.LOGOUT] (context: AuthenticationActionContext) {
+      localStorage.removeItem(JWT_KEY)
+      context.commit(AuthenticationMutation.SET_AUTHENTICATION_TOKEN, null)
     }
   }
 }
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 7c068c2..fed0bcb 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,24 +1,70 @@
 <template>
-  <div>
-    <the-nav :id="id" />
+  <div class="login-form">
+    <v-content>
+      <v-container fluid>
+        <v-row align="center" justify="center">
+          <v-col cols="12" sm="8" md="4">
+            <v-card elevation="12">
+              <v-toolbar class="login-form-toolbar" color="primary" flat>
+                <v-toolbar-title>Login</v-toolbar-title>
+              </v-toolbar>
+              <v-card-text>
+                <h4>Please select a realm to log in with</h4>
+              </v-card-text>
+              <v-card-actions>
+                <v-btn color="primary" :click="authEU" depressed>
+                  EU
+                </v-btn>
+                <v-btn color="primary" :click="authNA" depressed>
+                  NA
+                </v-btn>
+                <v-btn color="primary" :click="authASIA" depressed>
+                  ASIA
+                </v-btn>
+                <v-btn color="primary" :click="authRU" depressed>
+                  CIS
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-content>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import TheNav from '@/components/navigation/TheNav.vue'
+import { AuthenticationActions, JWTRegion } from '@/store/modules/authentication'
+import { namespace } from 'vuex-class'
+import { Namespaces } from '@/store'
+
+const authNamespace = namespace(Namespaces.AUTH)
 
   @Component({
-    name: 'Login',
-    components: {
-      TheNav
-    }
+    name: 'Login'
   })
 export default class extends Vue {
     @Prop() id!: string
+    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
+
+    authEU () {
+      this.authenticate(JWTRegion.EU)
+    }
+
+    authNA () {
+      this.authenticate(JWTRegion.NA)
+    }
+
+    authASIA () {
+      this.authenticate(JWTRegion.SA)
+    }
+
+    authRU () {
+      this.authenticate(JWTRegion.RU)
+    }
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
 </style>

From 0e6ab86f02d152e06e161f420f8b9d99c3c5e085 Mon Sep 17 00:00:00 2001
From: Ataww <nathanael.couret@gmail.com>
Date: Thu, 23 Apr 2020 21:57:36 +0200
Subject: [PATCH 3/9] #15 - remove legacy login page

---
 src/components/navigation/LoginDialog.vue | 80 -----------------------
 src/components/navigation/TheNav.vue      | 46 -------------
 src/components/navigation/TheUserMenu.vue |  3 +-
 src/router/index.ts                       |  6 --
 src/views/Login.vue                       | 70 --------------------
 5 files changed, 1 insertion(+), 204 deletions(-)
 delete mode 100644 src/components/navigation/LoginDialog.vue
 delete mode 100644 src/components/navigation/TheNav.vue
 delete mode 100644 src/views/Login.vue

diff --git a/src/components/navigation/LoginDialog.vue b/src/components/navigation/LoginDialog.vue
deleted file mode 100644
index 829391b..0000000
--- a/src/components/navigation/LoginDialog.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <v-dialog v-model="dialogOpen" width="500" v-bind="$attrs" v-on="$listeners">
-    <template #activator="{ on }">
-      <slot name="activator" v-bind="{ on: getSafeOnHandler(on) }" />
-    </template>
-
-    <slot v-bind="close" />
-    <v-card>
-      <v-card-title>Login</v-card-title>
-      <v-divider></v-divider>
-      <v-card-text>
-        <h4>Please select a realm to log in with</h4>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn color="primary" :click="authEU" depressed>
-          EU
-        </v-btn>
-        <v-btn color="primary" :click="authNA" depressed>
-          NA
-        </v-btn>
-        <v-btn color="primary" :click="authASIA" depressed>
-          ASIA
-        </v-btn>
-        <v-btn color="primary" :click="authRU" depressed>
-          CIS
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-import { namespace } from 'vuex-class'
-import { Namespaces } from '@/store'
-import { AuthenticationActions, JWTRegion } from '@/store/modules/authentication'
-
-const authNamespace = namespace(Namespaces.AUTH)
-
-  @Component({
-    name: 'login-dialog'
-  })
-export default class extends Vue {
-    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
-    dialogOpen = false
-
-    authEU () {
-      this.authenticate(JWTRegion.EU)
-    }
-
-    authNA () {
-      this.authenticate(JWTRegion.NA)
-    }
-
-    authASIA () {
-      this.authenticate(JWTRegion.SA)
-    }
-
-    authRU () {
-      this.authenticate(JWTRegion.RU)
-    }
-
-    // @see: https://github.com/vuetifyjs/vuetify/issues/7021
-    getSafeOnHandler ({ click }: { click: Function }): { click: Function } {
-      return {
-        click (event: Event) {
-          return setTimeout(() => click(event), 0)
-        }
-      }
-    }
-
-    close (): void {
-      this.dialogOpen = false
-    }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/navigation/TheNav.vue b/src/components/navigation/TheNav.vue
deleted file mode 100644
index 2a65d59..0000000
--- a/src/components/navigation/TheNav.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <div>
-    <the-nav-extra-large class="the-nav-extra-large" :id="id"/>
-    <the-nav-small class="the-nav-small" :id="id"/>
-    <the-nav-extra-small class="the-nav-extra-small" :id="id"/>
-  </div>
-</template>
-
-<script lang="ts">
-import TheNavExtraLarge from '@/components/navigation/TheNavExtraLarge.vue'
-import TheNavSmall from '@/components/navigation/TheNavSmall.vue'
-import TheNavExtraSmall from '@/components/navigation/TheNavExtraSmall.vue'
-import { Component, Prop, Vue } from 'vue-property-decorator'
-
-  @Component({
-    name: 'the-nav',
-    components: {
-      TheNavExtraLarge,
-      TheNavSmall,
-      TheNavExtraSmall
-    }
-  })
-export default class extends Vue {
-    @Prop() id!: string
-}
-</script>
-<style scoped lang="scss">
-
-  @media (max-width: 575px) {
-    .the-nav-extra-large, .the-nav-small {
-      display: none;
-    }
-  }
-
-  @media (min-width: 576px) and (max-width: 1199px) {
-    .the-nav-extra-large, .the-nav-extra-small {
-      display: none;
-    }
-  }
-
-  @media (min-width: 1200px) {
-    .the-nav-small, .the-nav-extra-small {
-      display: none;
-    }
-  }
-</style>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index 4c42e89..6a005df 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -63,7 +63,6 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
 import { AuthenticationActions, AuthenticationGetters } from '@/store/modules/authentication'
-import LoginDialog from '@/components/navigation/LoginDialog.vue'
 import GLoginCard from '@/components/navigation/LoginCard.vue'
 
 const authNamespace = namespace(Namespaces.AUTH)
@@ -75,7 +74,7 @@ const authNamespace = namespace(Namespaces.AUTH)
 
   @Component({
     name: 'TheUserMenu',
-    components: { GLoginCard, LoginDialog }
+    components: { GLoginCard }
   })
 export default class TheUserMenu extends Vue {
     @authNamespace.Getter(AuthenticationGetters.IS_AUTH) isAuth!: boolean
diff --git a/src/router/index.ts b/src/router/index.ts
index dfa5017..103991b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,16 +2,10 @@ import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
 import Room from '@/views/Room.vue'
 import Index from '@/views/Index.vue'
-import Login from '@/views/Login.vue'
 
 Vue.use(VueRouter)
 
 const routes: RouteConfig[] = [
-  {
-    path: '/login',
-    name: 'login',
-    component: Login
-  },
   {
     path: '/:id',
     name: 'room',
diff --git a/src/views/Login.vue b/src/views/Login.vue
deleted file mode 100644
index fed0bcb..0000000
--- a/src/views/Login.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="login-form">
-    <v-content>
-      <v-container fluid>
-        <v-row align="center" justify="center">
-          <v-col cols="12" sm="8" md="4">
-            <v-card elevation="12">
-              <v-toolbar class="login-form-toolbar" color="primary" flat>
-                <v-toolbar-title>Login</v-toolbar-title>
-              </v-toolbar>
-              <v-card-text>
-                <h4>Please select a realm to log in with</h4>
-              </v-card-text>
-              <v-card-actions>
-                <v-btn color="primary" :click="authEU" depressed>
-                  EU
-                </v-btn>
-                <v-btn color="primary" :click="authNA" depressed>
-                  NA
-                </v-btn>
-                <v-btn color="primary" :click="authASIA" depressed>
-                  ASIA
-                </v-btn>
-                <v-btn color="primary" :click="authRU" depressed>
-                  CIS
-                </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-content>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-import { AuthenticationActions, JWTRegion } from '@/store/modules/authentication'
-import { namespace } from 'vuex-class'
-import { Namespaces } from '@/store'
-
-const authNamespace = namespace(Namespaces.AUTH)
-
-  @Component({
-    name: 'Login'
-  })
-export default class extends Vue {
-    @Prop() id!: string
-    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
-
-    authEU () {
-      this.authenticate(JWTRegion.EU)
-    }
-
-    authNA () {
-      this.authenticate(JWTRegion.NA)
-    }
-
-    authASIA () {
-      this.authenticate(JWTRegion.SA)
-    }
-
-    authRU () {
-      this.authenticate(JWTRegion.RU)
-    }
-}
-</script>
-
-<style scoped lang="scss">
-</style>

From eb556efae2ff9244fe922e1399175206ce6daa34 Mon Sep 17 00:00:00 2001
From: Ataww <nathanael.couret@gmail.com>
Date: Sun, 26 Apr 2020 17:33:15 +0200
Subject: [PATCH 4/9] #15 - Add login providers from auth uservice

---
 src/App.vue                                   |  2 +
 src/components/navigation/LoginCard.vue       | 46 ++++-----------
 src/components/navigation/TheUserMenu.vue     | 51 ++++++++++-------
 .../navigation/login/ProviderBlock.vue        | 38 +++++++++++++
 src/store/modules/authentication.ts           | 57 +++++++++++--------
 src/util/ProvidersUtil.ts                     | 37 ++++++++++++
 src/util/TypeUtils.ts                         |  4 ++
 7 files changed, 154 insertions(+), 81 deletions(-)
 create mode 100644 src/components/navigation/login/ProviderBlock.vue
 create mode 100644 src/util/ProvidersUtil.ts
 create mode 100644 src/util/TypeUtils.ts

diff --git a/src/App.vue b/src/App.vue
index d42830b..f9ea593 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,7 @@ export default class TheApp extends Vue {
   @Action(`room/${RoomAction.SET_LOCALE}`) setLocale!: (locale: Locale) => void
   @authNamespace.Action(AuthenticationActions.AUTHENTICATE) authenticate!: (token: string) => Promise<ExtendedJWT>
   @authNamespace.Action(AuthenticationActions.STORE_TOKEN) storeToken!: (token: string) => void
+  @authNamespace.Action(AuthenticationActions.LOAD_PROVIDERS) loadProviders!: () => void
   async created () {
     this.setGame({ name: GameName['WOWS'], ships: [], gameInfo: undefined })
     this.setLocale(Locale['ENUK'])
@@ -52,6 +53,7 @@ export default class TheApp extends Vue {
   }
 
   initAuthentication () {
+    this.loadProviders()
     const localToken = localStorage.getItem(JWT_KEY)
     if (this.$route?.query?.code) {
       this.authenticate(this.$route.query.code as string).then(jwt => this.storeToken(jwt.encoded))
diff --git a/src/components/navigation/LoginCard.vue b/src/components/navigation/LoginCard.vue
index a085411..221ed1f 100644
--- a/src/components/navigation/LoginCard.vue
+++ b/src/components/navigation/LoginCard.vue
@@ -6,18 +6,8 @@
       <h4>Please select a realm to log in with</h4>
     </v-card-text>
     <v-card-actions>
-      <v-btn color="primary" @click="authEU" depressed>
-        EU
-      </v-btn>
-      <v-btn color="primary" @click="authNA" depressed>
-        NA
-      </v-btn>
-      <v-btn color="primary" @click="authASIA" depressed>
-        ASIA
-      </v-btn>
-      <v-btn color="primary" @click="authRU" depressed>
-        CIS
-      </v-btn>
+      <ProviderBlock v-for="(provider, name) in providers" :provider-name="name" :provider="provider" :key="name">
+      </ProviderBlock>
     </v-card-actions>
   </v-card>
 </template>
@@ -26,35 +16,21 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
-import { AuthenticationActions, JWTRegion } from '@/store/modules/authentication'
+import { AuthenticationActions, AuthenticationGetters } from '@/store/modules/authentication'
+import { Providers } from '@/util/ProvidersUtil'
+import ProviderBlock from '@/components/navigation/login/ProviderBlock.vue'
 
 const authNamespace = namespace(Namespaces.AUTH)
 
   @Component({
-    name: 'g-login-card'
+    name: 'LoginCard',
+    components: {
+      ProviderBlock
+    }
   })
 export default class extends Vue {
-    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
-
-    authEU () {
-      console.log('authentication to ' + JWTRegion.EU)
-      this.authenticate(JWTRegion.EU)
-    }
-
-    authNA () {
-      console.log('authentication to ' + JWTRegion.NA)
-      this.authenticate(JWTRegion.NA)
-    }
-
-    authASIA () {
-      console.log('authentication to ' + JWTRegion.SA)
-      this.authenticate(JWTRegion.SA)
-    }
-
-    authRU () {
-      console.log('authentication to ' + JWTRegion.RU)
-      this.authenticate(JWTRegion.RU)
-    }
+    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (endpoint: string) => void
+    @authNamespace.Getter(AuthenticationGetters.PROVIDERS) providers!: Providers
 }
 </script>
 
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index 6a005df..20f63c8 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -1,5 +1,18 @@
 <template>
-  <v-menu v-if="!mobile" offset-y>
+  <v-btn
+    dark
+    icon
+    style="margin-right:2px"
+    v-if="!mobile && !isAuth"
+    @click="doOpen"
+  >
+    Login
+    <v-dialog v-model="dialogOpen" @click:outside="dialogOpen = false"
+              max-width="300px">
+      <LoginCard></LoginCard>
+    </v-dialog>
+  </v-btn>
+  <v-menu v-else-if="!mobile && isAuth" offset-y>
     <template v-slot:activator="{ on: menu }">
       <v-tooltip bottom>
         <template v-slot:activator="{ on: tooltip }">
@@ -12,19 +25,13 @@
             <v-icon size="20">fa-user-circle</v-icon>
           </v-btn>
         </template>
-        <span>Sign in / Sign out</span>
+        <span>User profile</span>
       </v-tooltip>
     </template>
     <v-list>
-      <v-list-item v-if="isAuth" @click="logout">
+      <v-list-item @click="logout">
         <v-list-item-title>Logout</v-list-item-title>
       </v-list-item>
-      <v-list-item v-else @click="doOpen">
-        <v-list-item-title>Login</v-list-item-title>
-        <v-dialog v-model="dialogOpen" @click:outside="dialogOpen = false" max-width="300px">
-          <g-login-card></g-login-card>
-        </v-dialog>
-      </v-list-item>
       <v-list-item
         v-for="(userMenuItem, index) in userMenuItems"
         :key="index"
@@ -43,7 +50,7 @@
     <v-list-item v-else @click="doOpen">
       <v-list-item-title>Login</v-list-item-title>
       <v-dialog v-model="dialogOpen" @click:outside="dialogOpen = false" fullscreen>
-        <g-login-card></g-login-card>
+        <LoginCard></LoginCard>
       </v-dialog>
     </v-list-item>
     <v-list-item
@@ -59,13 +66,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-import { namespace } from 'vuex-class'
-import { Namespaces } from '@/store'
-import { AuthenticationActions, AuthenticationGetters } from '@/store/modules/authentication'
-import GLoginCard from '@/components/navigation/LoginCard.vue'
+  import {Component, Prop, Vue} from 'vue-property-decorator'
+  import {namespace} from 'vuex-class'
+  import {Namespaces} from '@/store'
+  import {AuthenticationActions, AuthenticationGetters} from '@/store/modules/authentication'
+  import LoginCard from '@/components/navigation/LoginCard.vue'
 
-const authNamespace = namespace(Namespaces.AUTH)
+  const authNamespace = namespace(Namespaces.AUTH)
 
   interface UserMenuItem {
     text: string;
@@ -74,9 +81,9 @@ const authNamespace = namespace(Namespaces.AUTH)
 
   @Component({
     name: 'TheUserMenu',
-    components: { GLoginCard }
+    components: {LoginCard}
   })
-export default class TheUserMenu extends Vue {
+  export default class TheUserMenu extends Vue {
     @authNamespace.Getter(AuthenticationGetters.IS_AUTH) isAuth!: boolean
     @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
     @authNamespace.Action(AuthenticationActions.LOGOUT) logout!: () => void
@@ -85,8 +92,10 @@ export default class TheUserMenu extends Vue {
 
     dialogOpen = false
 
-    doOpen () {
-      setTimeout(() => { this.dialogOpen = true })
+    doOpen() {
+      setTimeout(() => {
+        this.dialogOpen = true
+      })
     }
 
     userMenuItems: UserMenuItem[] = []
@@ -95,7 +104,7 @@ export default class TheUserMenu extends Vue {
     userMenuItemsClickHandler(item: UserMenuItem) {
       // do stuff
     }
-}
+  }
 
 </script>
 <style scoped lang="scss">
diff --git a/src/components/navigation/login/ProviderBlock.vue b/src/components/navigation/login/ProviderBlock.vue
new file mode 100644
index 0000000..b5a3a7d
--- /dev/null
+++ b/src/components/navigation/login/ProviderBlock.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+      <h3>{{providerName}}</h3>
+      <v-divider>
+      </v-divider>
+      <v-btn v-for="entry of entries" @click="authenticate(entry.endpoint)" :key="entry.key">
+        {{entry.key}}
+      </v-btn>
+    </div>
+</template>
+
+<script lang="ts">
+
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { AuthenticationActions } from '@/store/modules/authentication'
+import { namespace } from 'vuex-class'
+import { Namespaces } from '@/store'
+import { Provider } from '@/util/ProvidersUtil'
+
+const authNamespace = namespace(Namespaces.AUTH)
+
+@Component({
+  name: 'ProviderBlock'
+})
+export default class extends Vue {
+  @Prop() providerName!: string
+  @Prop() provider!: Provider
+  @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (endpoint: string) => void
+
+  get entries () {
+    return this.provider.entries
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/store/modules/authentication.ts b/src/store/modules/authentication.ts
index 69a8022..cfab369 100644
--- a/src/store/modules/authentication.ts
+++ b/src/store/modules/authentication.ts
@@ -1,6 +1,7 @@
 import { ActionContext, Module } from 'vuex'
 import axios from 'axios'
 import { verify } from 'jsonwebtoken'
+import { mapProviders, Providers } from '@/util/ProvidersUtil'
 
 export const JWT_KEY = 'jsonwebtoken'
 
@@ -12,19 +13,6 @@ export enum JWTRegion {
   SA = 'sa',
 }
 
-export function regionDomain (region: JWTRegion): string {
-  switch (region) {
-    case JWTRegion.EU:
-      return 'eu'
-    case JWTRegion.NA:
-      return 'na'
-    case JWTRegion.RU:
-      return 'ru'
-    case JWTRegion.SA:
-      return 'asia'
-  }
-}
-
 export interface JWT {
   iss: string; // Who issued it. Example: GameTactic.
   aud: string; // For what. Example: GameTactic.
@@ -42,22 +30,28 @@ export interface ExtendedJWT extends JWT {
 
 export interface AuthenticationState {
   jwt: ExtendedJWT | null;
+  providers: Providers;
 }
 
 export enum AuthenticationActions {
   AUTHENTICATE = 'authenticate',
   LOGIN_WG = 'auth_wg',
   LOGOUT = 'logout',
-  STORE_TOKEN = 'storeToken'
+  STORE_TOKEN = 'storeToken',
+  LOAD_PROVIDERS = 'loadProviders'
 }
 
 export enum AuthenticationMutation {
-  SET_AUTHENTICATION_TOKEN = 'SET_AUTHENTICATION_TOKEN'
+  SET_AUTHENTICATION_TOKEN = 'SET_AUTHENTICATION_TOKEN',
+  SET_PROVIDERS = 'SET_PROVIDERS'
 }
 
 export enum AuthenticationGetters {
   JWT = 'jwt',
-  IS_AUTH = 'authenticated'
+  IS_AUTH = 'authenticated',
+  PROVIDER_NAMES = 'providers',
+  PROVIDER = 'provider',
+  PROVIDERS = 'providers'
 }
 
 type AuthenticationActionContext = ActionContext<AuthenticationState, {}>
@@ -66,22 +60,27 @@ const AuthenticationModule: Module<AuthenticationState, {}> = {
   namespaced: true,
   state () {
     return {
-      jwt: null
+      jwt: null,
+      providers: {}
     }
   },
   getters: {
     [AuthenticationGetters.JWT]: state => state.jwt,
-    [AuthenticationGetters.IS_AUTH]: state => state.jwt !== null
+    [AuthenticationGetters.IS_AUTH]: state => state.jwt !== null,
+    [AuthenticationGetters.PROVIDER_NAMES]: state => Object.getOwnPropertyNames(state.providers),
+    [AuthenticationGetters.PROVIDERS]: state => state.providers,
+    [AuthenticationGetters.PROVIDER]: state => (name: string) => state.providers[name]
   },
   mutations: {
     [AuthenticationMutation.SET_AUTHENTICATION_TOKEN] (state: AuthenticationState, payload: ExtendedJWT) {
       state.jwt = payload
+    },
+    [AuthenticationMutation.SET_PROVIDERS] (state: AuthenticationState, payload: Providers) {
+      state.providers = payload
     }
   },
   actions: {
     async [AuthenticationActions.AUTHENTICATE] (context: AuthenticationActionContext, token: string) {
-      // TODO: This is just placeholder logic. Please check it works. -Niko
-
       const response = await axios.get((process.env.VUE_APP_MS_AUTH as string))
       if (response.status !== 200) {
         throw Error('Could not reach authentication server.')
@@ -90,22 +89,30 @@ const AuthenticationModule: Module<AuthenticationState, {}> = {
       const jwt = verify(token, response.data.publicKey) as JWT
       const extended: ExtendedJWT = { ...jwt, ...{ encoded: token } }
 
-      // TODO: You probably want put this into the `state`. -Niko
-      // Im not sure how this should be done, so I did it as I know.
       context.commit('SET_AUTHENTICATION_TOKEN', extended)
       return extended
     },
     [AuthenticationActions.STORE_TOKEN] (context: AuthenticationActionContext, token: string) {
       localStorage.setItem(JWT_KEY, token)
     },
-    [AuthenticationActions.LOGIN_WG] (context: AuthenticationActionContext, region: JWTRegion) {
-      // TODO: This is just placeholder logic. Please check it works. -Niko
-      const returnUrl = process.env.VUE_APP_MS_AUTH + `/connect/wargaming/${regionDomain(region)}/${window.location.href}`
+    [AuthenticationActions.LOGIN_WG] (context: AuthenticationActionContext, endpoint: string) {
+      const returnUrl = `${process.env.VUE_APP_MS_AUTH}${endpoint}/${window.location.href}`
       location.assign(returnUrl)
     },
     [AuthenticationActions.LOGOUT] (context: AuthenticationActionContext) {
       localStorage.removeItem(JWT_KEY)
       context.commit(AuthenticationMutation.SET_AUTHENTICATION_TOKEN, null)
+    },
+    async [AuthenticationActions.LOAD_PROVIDERS] (context: AuthenticationActionContext) {
+      if (process.env.VUE_APP_MS_AUTH) {
+        const response = await axios.get(process.env.VUE_APP_MS_AUTH)
+        if (response.status !== 200 || !(response.data?.providers)) {
+          throw Error('Could not fetch authentication providers')
+        }
+        context.commit(AuthenticationMutation.SET_PROVIDERS, mapProviders(response.data.providers))
+      } else {
+        throw Error('Authentication URI is not set')
+      }
     }
   }
 }
diff --git a/src/util/ProvidersUtil.ts b/src/util/ProvidersUtil.ts
new file mode 100644
index 0000000..6fa025c
--- /dev/null
+++ b/src/util/ProvidersUtil.ts
@@ -0,0 +1,37 @@
+import { Indexed } from '@/util/TypeUtils'
+
+export interface ProviderEntry {
+  key: string;
+  endpoint: string;
+}
+
+export interface Provider {
+  entries: ProviderEntry[];
+}
+
+export type Providers = Indexed<Provider>;
+
+export type ProviderInput = Indexed<Indexed<string>>;
+
+export function mapProvider (input: {[key: string]: string}) {
+  const provider: Provider = {
+    entries: []
+  }
+  for (const entry in input) {
+    provider.entries.push({
+      key: entry,
+      endpoint: input[entry]
+    })
+  }
+  return provider
+}
+
+export function mapProviders (input: ProviderInput): Providers {
+  const providers: Providers = {}
+
+  for (const provider in input) {
+    if (input.hasOwnProperty(provider)) { providers[provider] = mapProvider(input[provider]) }
+  }
+
+  return providers
+}
diff --git a/src/util/TypeUtils.ts b/src/util/TypeUtils.ts
new file mode 100644
index 0000000..cf32011
--- /dev/null
+++ b/src/util/TypeUtils.ts
@@ -0,0 +1,4 @@
+
+export interface Indexed<T> {
+  [key: string]: T;
+}

From 63594600aebcf9544a403eada4b53eee6c52962d Mon Sep 17 00:00:00 2001
From: Ataww <nathanael.couret@gmail.com>
Date: Sat, 2 May 2020 20:18:20 +0200
Subject: [PATCH 5/9] #15 - improve login dialog design

---
 src/components/navigation/LoginCard.vue       | 14 +++----
 src/components/navigation/TheUserMenu.vue     | 20 +++++-----
 .../navigation/login/ProviderBlock.vue        | 38 +++++++++++--------
 3 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/components/navigation/LoginCard.vue b/src/components/navigation/LoginCard.vue
index 221ed1f..c5b6920 100644
--- a/src/components/navigation/LoginCard.vue
+++ b/src/components/navigation/LoginCard.vue
@@ -1,14 +1,10 @@
 <template>
-  <v-card>
-    <v-card-title>Login</v-card-title>
-    <v-divider></v-divider>
+  <v-card class="login-card">
+    <v-card-title class="login-card-title">Select a login option</v-card-title>
     <v-card-text>
-      <h4>Please select a realm to log in with</h4>
-    </v-card-text>
-    <v-card-actions>
       <ProviderBlock v-for="(provider, name) in providers" :provider-name="name" :provider="provider" :key="name">
       </ProviderBlock>
-    </v-card-actions>
+    </v-card-text>
   </v-card>
 </template>
 
@@ -35,5 +31,7 @@ export default class extends Vue {
 </script>
 
 <style scoped>
-
+  .login-card-title {
+    font-weight: bold;
+  }
 </style>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index a109248..d659eac 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -66,13 +66,13 @@
 </template>
 
 <script lang="ts">
-  import {Component, Prop, Vue} from 'vue-property-decorator'
-  import {namespace} from 'vuex-class'
-  import {Namespaces} from '@/store'
-  import {AuthenticationActions, AuthenticationGetters} from '@/store/modules/authentication'
-  import LoginCard from '@/components/navigation/LoginCard.vue'
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import { Namespaces } from '@/store'
+import { AuthenticationActions, AuthenticationGetters } from '@/store/modules/authentication'
+import LoginCard from '@/components/navigation/LoginCard.vue'
 
-  const authNamespace = namespace(Namespaces.AUTH)
+const authNamespace = namespace(Namespaces.AUTH)
 
   interface UserMenuItem {
     text: string;
@@ -81,9 +81,9 @@
 
   @Component({
     name: 'TheUserMenu',
-    components: {LoginCard}
+    components: { LoginCard }
   })
-  export default class TheUserMenu extends Vue {
+export default class TheUserMenu extends Vue {
     @authNamespace.Getter(AuthenticationGetters.IS_AUTH) isAuth!: boolean
     @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
     @authNamespace.Action(AuthenticationActions.LOGOUT) logout!: () => void
@@ -92,7 +92,7 @@
 
     dialogOpen = false
 
-    doOpen() {
+    doOpen () {
       setTimeout(() => {
         this.dialogOpen = true
       })
@@ -104,7 +104,7 @@
     userMenuItemsClickHandler(item: UserMenuItem) {
       // do stuff
     }
-  }
+}
 
 </script>
 <style scoped lang="scss">
diff --git a/src/components/navigation/login/ProviderBlock.vue b/src/components/navigation/login/ProviderBlock.vue
index b5a3a7d..fb45668 100644
--- a/src/components/navigation/login/ProviderBlock.vue
+++ b/src/components/navigation/login/ProviderBlock.vue
@@ -1,12 +1,15 @@
 <template>
-    <div>
-      <h3>{{providerName}}</h3>
-      <v-divider>
-      </v-divider>
-      <v-btn v-for="entry of entries" @click="authenticate(entry.endpoint)" :key="entry.key">
+  <div>
+    <h3>{{providerName}}</h3>
+    <v-divider>
+    </v-divider>
+    <div class="login-btn-container">
+      <v-btn v-for="entry of entries" @click="authenticate(entry.endpoint)" :key="entry.key"
+             class="login-btn" color="primary">
         {{entry.key}}
       </v-btn>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -19,20 +22,25 @@ import { Provider } from '@/util/ProvidersUtil'
 
 const authNamespace = namespace(Namespaces.AUTH)
 
-@Component({
-  name: 'ProviderBlock'
-})
+  @Component({
+    name: 'ProviderBlock'
+  })
 export default class extends Vue {
-  @Prop() providerName!: string
-  @Prop() provider!: Provider
-  @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (endpoint: string) => void
+    @Prop() providerName!: string
+    @Prop() provider!: Provider
+    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (endpoint: string) => void
 
-  get entries () {
-    return this.provider.entries
-  }
+    get entries () {
+      return this.provider.entries
+    }
 }
 </script>
 
 <style scoped lang="scss">
-
+  .login-btn-container {
+    margin-top: 5px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-column-gap: 5px;
+  }
 </style>

From a4efb91f33e35e32aca611e968627be24d9d5df2 Mon Sep 17 00:00:00 2001
From: Ataww <nathanael.couret@gmail.com>
Date: Sun, 17 May 2020 20:32:49 +0200
Subject: [PATCH 6/9] Login dialog gaps

---
 src/components/navigation/LoginCard.vue           | 11 +----------
 src/components/navigation/login/ProviderBlock.vue |  6 +++++-
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/navigation/LoginCard.vue b/src/components/navigation/LoginCard.vue
index b41b1a9..3bf5076 100644
--- a/src/components/navigation/LoginCard.vue
+++ b/src/components/navigation/LoginCard.vue
@@ -2,7 +2,7 @@
   <v-card class="login-card">
     <v-card-title class="login-card-title">Select a login option</v-card-title>
     <v-card-text class="login-card-content">
-      <ProviderBlock v-for="(provider, name) in providers" :provider-name="name" :provider="provider" :key="name" class="login-card-content-block">
+      <ProviderBlock v-for="(provider, name) in providers" :provider-name="name" :provider="provider" :key="name">
       </ProviderBlock>
     </v-card-text>
   </v-card>
@@ -35,14 +35,5 @@ export default class extends Vue {
     &-title {
       font-weight: bold;
     }
-    &-content {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-row-gap: 10px;
-
-      &-block {
-        margin-top: 10px;
-      }
-    }
   }
 </style>
diff --git a/src/components/navigation/login/ProviderBlock.vue b/src/components/navigation/login/ProviderBlock.vue
index fb45668..43c8a2f 100644
--- a/src/components/navigation/login/ProviderBlock.vue
+++ b/src/components/navigation/login/ProviderBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="provider-container">
     <h3>{{providerName}}</h3>
     <v-divider>
     </v-divider>
@@ -43,4 +43,8 @@ export default class extends Vue {
     grid-template-columns: repeat(4, 1fr);
     grid-column-gap: 5px;
   }
+
+  .provider-container {
+    margin-top: 10px;
+  }
 </style>

From c3f938325f88cf1db8f8757d6dc054cd5a9d4215 Mon Sep 17 00:00:00 2001
From: Ataww <nathanael.couret@gmail.com>
Date: Sun, 17 May 2020 21:24:55 +0200
Subject: [PATCH 7/9] Add translations

---
 src/components/navigation/LoginCard.vue   |  2 +-
 src/components/navigation/TheUserMenu.vue | 10 +++++-----
 src/store/modules/authentication.ts       |  4 ----
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/navigation/LoginCard.vue b/src/components/navigation/LoginCard.vue
index 3bf5076..4e65bdf 100644
--- a/src/components/navigation/LoginCard.vue
+++ b/src/components/navigation/LoginCard.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card class="login-card">
-    <v-card-title class="login-card-title">Select a login option</v-card-title>
+    <v-card-title class="login-card-title">{{ $t('navigation.login.card.title') }}</v-card-title>
     <v-card-text class="login-card-content">
       <ProviderBlock v-for="(provider, name) in providers" :provider-name="name" :provider="provider" :key="name">
       </ProviderBlock>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index e562a9f..f7fdde6 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -25,12 +25,12 @@
             <v-icon size="20">fa-user-circle</v-icon>
           </v-btn>
         </template>
-        <span>User profile</span>
+        <span>{{ $t('user.profile') }}</span>
       </v-tooltip>
     </template>
     <v-list>
       <v-list-item @click="onClickLogout">
-        <v-list-item-title>Logout</v-list-item-title>
+        <v-list-item-title>{{ $t('navigation.login.logout') }}</v-list-item-title>
       </v-list-item>
       <v-list-item
         v-for="(userMenuItem, index) in userMenuItems"
@@ -43,12 +43,12 @@
     </v-list>
   </v-menu>
   <v-list v-else dense style="width: 100%;">
-    <v-subheader>User Profile</v-subheader>
+    <v-subheader>{{ $t('user.profile') }}</v-subheader>
     <v-list-item v-if="isAuth" @click="onClickLogout">
-      <v-list-item-title>Logout</v-list-item-title>
+      <v-list-item-title>{{ $t('navigation.login.logout') }}</v-list-item-title>
     </v-list-item>
     <v-list-item v-else @click="doOpen">
-      <v-list-item-title>Login</v-list-item-title>
+      <v-list-item-title>{{ $t('navigation.login.title') }}</v-list-item-title>
       <v-dialog v-model="isDialogOpen" @click:outside="onClickCloseDialog" fullscreen>
         <LoginCard></LoginCard>
       </v-dialog>
diff --git a/src/store/modules/authentication.ts b/src/store/modules/authentication.ts
index 9db6cdd..b07b9f5 100644
--- a/src/store/modules/authentication.ts
+++ b/src/store/modules/authentication.ts
@@ -134,10 +134,6 @@ const AuthenticationModule: Module<AuthenticationState, {}> = {
           throw Error('Could not fetch authentication providers')
         }
         const providers = response.data.providers
-        providers['test others'] = {
-          facebook: 'testFB',
-          google: 'testGoogle'
-        }
         context.commit(AuthenticationMutation.SET_PROVIDERS, mapProviders(providers))
       } else {
         throw Error('Authentication URI is not set')

From 35ae7e8508f1c145c5382a37c854e082b408fe5f Mon Sep 17 00:00:00 2001
From: Ataww <nathanael.couret@gmail.com>
Date: Sun, 24 May 2020 20:53:32 +0200
Subject: [PATCH 8/9] feature/15 - closeable login dialog on mobile

---
 src/components/navigation/LoginCard.vue   | 20 ++++++++++----
 src/components/navigation/TheUserMenu.vue | 32 +++++++++--------------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/navigation/LoginCard.vue b/src/components/navigation/LoginCard.vue
index 4e65bdf..6907463 100644
--- a/src/components/navigation/LoginCard.vue
+++ b/src/components/navigation/LoginCard.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card class="login-card">
-    <v-card-title class="login-card-title">{{ $t('navigation.login.card.title') }}</v-card-title>
+    <v-card-title class="login-card-title">
+      <div>{{ $t('navigation.login.card.title') }}</div>
+      <v-btn icon @click="closeHandler" v-if="isMobile">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </v-card-title>
     <v-card-text class="login-card-content">
       <ProviderBlock v-for="(provider, name) in providers" :provider-name="name" :provider="provider" :key="name">
       </ProviderBlock>
@@ -9,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
 import { AuthenticationActions, AuthenticationGetters } from '@/store/modules/authentication'
@@ -27,13 +32,18 @@ const authNamespace = namespace(Namespaces.AUTH)
 export default class extends Vue {
     @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (endpoint: string) => void
     @authNamespace.Getter(AuthenticationGetters.PROVIDERS) providers!: Providers
+    @Prop({ default: false }) isMobile!: boolean
+
+    @Emit() closeHandler () {
+      return null
+    }
 }
 </script>
 
 <style scoped>
-  .login-card {
-    &-title {
+  .login-card-title {
       font-weight: bold;
+      display: flex;
+      justify-content: space-between;
     }
-  }
 </style>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index 6dfbbd9..9e17108 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -1,18 +1,4 @@
 <template>
-  
-  <v-btn
-    dark
-    icon
-    style="margin-right:2px"
-    v-if="!mobile && !isAuth"
-    @click="doOpen"
-  >
-    Login
-    <v-dialog v-model="isDialogOpen" @click:outside="onClickCloseDialog"
-              max-width="500px">
-      <LoginCard></LoginCard>
-    </v-dialog>
-  </v-btn>
   <v-menu
     v-if="!isMobile"
     offset-y
@@ -35,9 +21,15 @@
       </v-tooltip>
     </template>
     <v-list>
-      <v-list-item @click="onClickLogout">
+      <v-list-item v-if="isAuth" @click="onClickLogout">
         <v-list-item-title>{{ $t('navigation.login.logout') }}</v-list-item-title>
       </v-list-item>
+      <v-list-item v-else @click="openLoginDialog">
+        <v-list-item-title>{{ $t('navigation.login.title') }}</v-list-item-title>
+        <v-dialog v-model="isDialogOpen" @click:outside="onClickCloseLoginDialog" max-width="500px">
+          <LoginCard></LoginCard>
+        </v-dialog>
+      </v-list-item>
       <v-list-item
         v-for="(userMenuItem, index) in userMenuItems"
         :key="index"
@@ -53,10 +45,10 @@
     <v-list-item v-if="isAuth" @click="onClickLogout">
       <v-list-item-title>{{ $t('navigation.login.logout') }}</v-list-item-title>
     </v-list-item>
-    <v-list-item v-else @click="doOpen">
+    <v-list-item v-else @click="openLoginDialog">
       <v-list-item-title>{{ $t('navigation.login.title') }}</v-list-item-title>
-      <v-dialog v-model="isDialogOpen" @click:outside="onClickCloseDialog" fullscreen>
-        <LoginCard></LoginCard>
+      <v-dialog v-model="isDialogOpen" @click:outside="onClickCloseLoginDialog" fullscreen>
+        <LoginCard :is-mobile="isMobile" v-on:close-handler="onClickCloseLoginDialog"></LoginCard>
       </v-dialog>
     </v-list-item>
     <v-list-item
@@ -99,13 +91,13 @@ export default class TheUserMenu extends Vue {
 
     isDialogOpen = false
 
-    doOpen () {
+    openLoginDialog () {
       setTimeout(() => {
         this.isDialogOpen = true
       })
     }
 
-    onClickCloseDialog () {
+    onClickCloseLoginDialog () {
       this.isDialogOpen = false
     }
 

From b2850c5d4b8ef57712595b6eef3ef83ca15644d5 Mon Sep 17 00:00:00 2001
From: Ataww <nathanael.couret@gmail.com>
Date: Tue, 26 May 2020 00:11:07 +0200
Subject: [PATCH 9/9] PR feedbacks

---
 src/App.vue                                   | 34 ++++++++++---------
 src/components/navigation/LoginCard.vue       | 13 +++----
 src/components/navigation/TheUserMenu.vue     |  4 +--
 .../navigation/login/ProviderBlock.vue        |  8 ++---
 src/store/modules/types.ts                    |  4 +--
 5 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 46ffc59..8a37dfb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Component from 'vue-class-component'
 import Vue from 'vue'
-import { Action, Getter, namespace } from 'vuex-class'
+import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
 import { Api } from './store/modules/types'
 import { getWowsApiData } from '@/games/wows/api'
@@ -15,15 +15,16 @@ import { GameName, Locale, RoomAction, RoomGetters } from '@/store/modules/room'
 import { AuthenticationActions, AuthenticationGetters, ExtendedJWT, JWT_KEY } from '@/store/modules/authentication'
 
 const authNamespace = namespace(Namespaces.AUTH)
+const roomNamespace = namespace(Namespaces.ROOM)
 
   @Component({
     name: 'TheApp'
   })
 export default class TheApp extends Vue {
-    @Action(`room/${RoomAction.SET_GAME_NAME}`) setGameName!: (name: string) => void
-    @Action(`room/${RoomAction.SET_GAME_API}`) setGameApi!: (api: Api) => void
-    @Action(`room/${RoomAction.SET_LOCALE}`) setLocale!: (locale: Locale) => void
-    @Getter(`room/${RoomGetters.GAME_NAME}`) game!: GameName
+    @roomNamespace.Action(RoomAction.SET_GAME_NAME) setGameName!: (name: string) => void
+    @roomNamespace.Action(RoomAction.SET_GAME_API) setGameApi!: (api: Api) => void
+    @roomNamespace.Action(RoomAction.SET_LOCALE) setLocale!: (locale: Locale) => void
+    @roomNamespace.Getter(RoomGetters.GAME_NAME) game!: GameName
     @authNamespace.Action(AuthenticationActions.AUTHENTICATE) authenticate!: (token: string) => Promise<ExtendedJWT>
     @authNamespace.Action(AuthenticationActions.STORE_TOKEN) storeToken!: (token: string) => void
     @authNamespace.Action(AuthenticationActions.CHECK_TOKEN_EXPIRY) checkTokenExpiry!: () => Promise<boolean>
@@ -60,15 +61,16 @@ export default class TheApp extends Vue {
 }
 </script>
 <style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  height: 100vh;
-  background-color: $room-secondary;
-  font-size: $app-fontsize;
-}
-html, .v-application--wrap {
-  overflow: hidden;
-}
+  #app {
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    height: 100vh;
+    background-color: $room-secondary;
+    font-size: $app-fontsize;
+  }
+
+  html, .v-application--wrap {
+    overflow: hidden;
+  }
 </style>
diff --git a/src/components/navigation/LoginCard.vue b/src/components/navigation/LoginCard.vue
index 6907463..2d2d874 100644
--- a/src/components/navigation/LoginCard.vue
+++ b/src/components/navigation/LoginCard.vue
@@ -1,14 +1,15 @@
 <template>
   <v-card class="login-card">
-    <v-card-title class="login-card-title">
+    <v-card-title class="custom-login-card-title">
       <div>{{ $t('navigation.login.card.title') }}</div>
       <v-btn icon @click="closeHandler" v-if="isMobile">
-        <v-icon>mdi-close</v-icon>
+        <v-icon>fa-times</v-icon>
       </v-btn>
     </v-card-title>
-    <v-card-text class="login-card-content">
-      <ProviderBlock v-for="(provider, name) in providers" :provider-name="name" :provider="provider" :key="name">
-      </ProviderBlock>
+    <v-card-text>
+      <provider-block v-for="(provider, name) in providers"
+                     :provider-name="name" :provider="provider" :key="name">
+      </provider-block>
     </v-card-text>
   </v-card>
 </template>
@@ -41,7 +42,7 @@ export default class extends Vue {
 </script>
 
 <style scoped>
-  .login-card-title {
+  .custom-login-card-title {
       font-weight: bold;
       display: flex;
       justify-content: space-between;
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index 9e17108..e79edf7 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -27,7 +27,7 @@
       <v-list-item v-else @click="openLoginDialog">
         <v-list-item-title>{{ $t('navigation.login.title') }}</v-list-item-title>
         <v-dialog v-model="isDialogOpen" @click:outside="onClickCloseLoginDialog" max-width="500px">
-          <LoginCard></LoginCard>
+          <login-card></login-card>
         </v-dialog>
       </v-list-item>
       <v-list-item
@@ -48,7 +48,7 @@
     <v-list-item v-else @click="openLoginDialog">
       <v-list-item-title>{{ $t('navigation.login.title') }}</v-list-item-title>
       <v-dialog v-model="isDialogOpen" @click:outside="onClickCloseLoginDialog" fullscreen>
-        <LoginCard :is-mobile="isMobile" v-on:close-handler="onClickCloseLoginDialog"></LoginCard>
+        <login-card :is-mobile="isMobile" v-on:close-handler="onClickCloseLoginDialog"></login-card>
       </v-dialog>
     </v-list-item>
     <v-list-item
diff --git a/src/components/navigation/login/ProviderBlock.vue b/src/components/navigation/login/ProviderBlock.vue
index 43c8a2f..71badd0 100644
--- a/src/components/navigation/login/ProviderBlock.vue
+++ b/src/components/navigation/login/ProviderBlock.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="provider-container">
+  <div class="custom-provider-container">
     <h3>{{providerName}}</h3>
     <v-divider>
     </v-divider>
-    <div class="login-btn-container">
+    <div class="custom-login-btn-container">
       <v-btn v-for="entry of entries" @click="authenticate(entry.endpoint)" :key="entry.key"
              class="login-btn" color="primary">
         {{entry.key}}
@@ -37,14 +37,14 @@ export default class extends Vue {
 </script>
 
 <style scoped lang="scss">
-  .login-btn-container {
+  .custom-login-btn-container {
     margin-top: 5px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-column-gap: 5px;
   }
 
-  .provider-container {
+  .custom-provider-container {
     margin-top: 10px;
   }
 </style>
diff --git a/src/store/modules/types.ts b/src/store/modules/types.ts
index 31ec6cf..c868f12 100644
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -23,7 +23,7 @@ export interface Game {
   api: Api[];
 }
 
-export enum RoleTypes { 
+export enum RoleTypes {
   ROON_OWNER = 'roomOwner',
   ADMIN = 'admin'
 }
@@ -85,4 +85,4 @@ export interface PresentationPayload {
 export interface Presentation {
   enabledBy: string | undefined;
   tacticId: string | undefined;
-}
\ No newline at end of file
+}