From 9c44029b5ab1b507d4f54b081dca7b3a9341deb3 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Mon, 29 May 2023 00:02:09 -0700
Subject: [PATCH 1/6] Oauth 2

---
 src/Oauth.js                                  | 284 ++++++++++++++++++
 src/components/authentication/Login.vue       |  44 +++
 .../authentication/LoginSuccess.vue           |  11 +
 src/components/landing_page/LandingPage.vue   |   5 +-
 src/router/index.js                           |   6 +
 5 files changed, 349 insertions(+), 1 deletion(-)
 create mode 100644 src/Oauth.js
 create mode 100644 src/components/authentication/Login.vue
 create mode 100644 src/components/authentication/LoginSuccess.vue

diff --git a/src/Oauth.js b/src/Oauth.js
new file mode 100644
index 00000000..b6c541ac
--- /dev/null
+++ b/src/Oauth.js
@@ -0,0 +1,284 @@
+// PKCE code Copyright (c) 2019 Aaron Parecki
+// MIT Public License
+// https://github.com/aaronpk/pkce-vanilla-js
+
+/*global $ Handlebars */
+
+// Particular to this app. Change if you fork!
+const getRandomValues = require('get-random-values')
+const sha256 = require('crypto-js/sha256');
+const crypto = require('crypto');
+
+module.exports = {
+    ajax,
+    startLogin,
+}
+
+const server = 'https://apiclient.wiki/'
+const clientID = "6ac53a07b581e30e47664cd9e8f3d0e4"
+
+// OAuth routes
+
+const authroot = `https://meta.wikimedia.org/w/rest.php`
+const authorize = `${authroot}/oauth2/authorize`
+const token = `${authroot}/oauth2/access_token`
+const profileurl = `${authroot}/oauth2/resource/profile`
+
+console.log(10086);
+
+// API root
+
+const root = 'https://api.wikimedia.org/core/v1/wikipedia/en/'
+const feeds = 'https://api.wikimedia.org/feed/v1/wikipedia/en/'
+
+function ajax(args) {
+    ensureToken(function(token) {
+        if (token) {
+          args.headers = (args.headers) ? args.headers : {}
+          args.headers['Authorization'] = `Bearer ${token}`
+        }
+        if (!args.error) {
+          args.error = function(jqXHR, textStatus, errorThrown) {
+              showError(`Error calling ${args.url}: ${errorThrown}`)
+          }
+        }
+        $.ajax(args)
+      })
+}
+
+const ensureToken = function(callback) {
+  let results = getLoginResults()
+  // Are we past the expiry date?
+  if (Date.now() > results.access_token_expired_ms) {
+    let pkce = loadPKCE()
+    let data = {
+      grant_type: "refresh_token",
+      refresh_token: results.refresh_token,
+      redirect_uri: `${server}callback`,
+      client_id: clientID,
+      code_verifier: pkce.codeVerifier
+    }
+    // We don't want to use access_token for this
+    $.post({
+      url: token,
+      dataType: "json",
+      data: data,
+      success: function(newResults) {
+        saveLoginResults(newResults)
+        callback(newResults.access_token)
+      },
+      error: function(jqXHR, textStatus, errorThrown) {
+        showError(`Error getting OAuth 2.0 refresh token: ${errorThrown}`)
+      }
+    })
+  } else {
+    callback(results.access_token)
+  }
+}
+
+var timer = null
+
+// from https://stackoverflow.com/questions/1267283/how-can-i-pad-a-value-with-leading-zeros
+
+const lp = function(number, width) {
+  width -= number.toString().length;
+  if ( width > 0 )
+  {
+    return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
+  }
+  return number + ""; // always return a string
+}
+
+function startLogin() {
+  let pkce = makePKCE()
+  savePKCE(pkce)
+  let params = {
+    client_id: clientID,
+    response_type: "code",
+    redirect_uri: `${server}callback`,
+    state: getPath(),
+    code_challenge: pkce.codeChallenge,
+    code_challenge_method: "S256"
+  }
+  let str = $.param(params)
+  let url = `${authorize}?${str}`
+  window.location = url
+  return false
+}
+
+const endLogin = function() {
+  let query = (new URL(document.location)).searchParams
+  let state = query.get('state')
+  let error = query.get('error')
+  if (error) {
+    let errorDescription = query.get('error_description')
+    let message = query.get('message')
+    showError((message) ? message : ((errorDescription) ? errorDescription : error))
+    if (state) {
+      routeTo(state)
+    } else {
+      routeTo('/')
+    }
+    return
+  }
+ let code = query.get('code')
+  let pkce = loadPKCE()
+  let data = {
+    grant_type: "authorization_code",
+    code: code,
+    redirect_uri: `${server}callback`,
+    client_id: clientID,
+    code_verifier: pkce.codeVerifier
+  }
+  // We don't want to use a token for this
+  $.post({
+    url: token,
+    dataType: "json",
+    data: data,
+    success: function(results) {
+      saveLoginResults(results)
+      getProfile(function(profile) {
+        if (profile) {
+          saveProfile(profile)
+        }
+        resetNavbar()
+        routeTo(state)
+      })
+    },
+    error: function(xhr, status, text) {
+      showError(`Error finishing authorization: ${text}`)
+    }
+  })
+}
+
+const saveLoginResults = function(results) {
+  // TODO: save other important data
+  localStorage.setItem('access_token', results.access_token)
+  localStorage.setItem('refresh_token', results.refresh_token)
+  localStorage.setItem('access_token_expired_ms', (Date.now() + results.expires_in  * 1000.0).toString())
+}
+
+const clearLoginResults = function() {
+  // TODO: save other important data
+  localStorage.removeItem('access_token')
+  localStorage.removeItem('refresh_token')
+  localStorage.removeItem('access_token_expired_ms')
+}
+
+const getLoginResults = function() {
+  return {
+    access_token: localStorage.getItem('access_token'),
+    refresh_token: localStorage.getItem('refresh_token'),
+    access_token_expired_ms: parseFloat(localStorage.getItem('access_token_expired_ms'))
+  }
+}
+
+const isLoggedIn = function() {
+  return getAccessToken()
+}
+
+const getAccessToken = function() {
+  return localStorage.getItem('access_token')
+}
+
+const getProfile = function(callback) {
+  ajax({
+    url: profileurl,
+    success: function(profile) {
+      // workaround: this endpoint sometimes returns text/html instead of application/json
+      if (typeof(profile) == "string") {
+        profile = JSON.parse(profile)
+      }
+      callback(profile)
+    },
+    error: function() {
+      // Just continue
+      callback(null)
+    }
+  })
+}
+
+const loadProfile = function() {
+  let profile = {
+    username: localStorage.getItem('username')
+  }
+  return profile
+}
+
+const saveProfile = function(profile) {
+  localStorage.setItem('username', profile.username)
+}
+
+const clearProfile = function() {
+  localStorage.removeItem('username')
+}
+
+const getQuery = function() {
+  return (new URL(document.location)).searchParams
+}
+
+const makePKCE = function() {
+  let pkce = {
+    state: generateRandomString(),
+    codeVerifier: generateRandomString()
+  }
+  pkce.codeChallenge = pkceChallengeFromVerifier(pkce.codeVerifier)
+  return pkce
+}
+
+const savePKCE = function(pkce) {
+  if (typeof localStorage === "undefined" || localStorage === null) {
+    var LocalStorage = require('node-localstorage').LocalStorage;
+    localStorage = new LocalStorage('./scratch');
+  }
+  localStorage.setItem("pkce_state", pkce.state)
+  localStorage.setItem("pkce_code_verifier", pkce.codeVerifier)
+}
+
+const loadPKCE = function() {
+  let pkce = {
+    state: localStorage.getItem("pkce_state"),
+    codeVerifier: localStorage.getItem("pkce_code_verifier")
+  }
+  pkce.codeChallenge = pkceChallengeFromVerifier(pkce.codeVerifier)
+  return pkce
+}
+
+const clearPKCE = function() {
+  localStorage.removeItem("pkce_state")
+  localStorage.removeItem("pkce_code_verifier")
+}
+
+/* global Uint32Array */
+// changed to Unit8Array due to some errors. Do we need to fix it?
+
+const generateRandomString = function() {
+  var array = new Uint8Array(28)
+  getRandomValues(array)
+//   console.log(getRandomValues(array))
+  return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('')
+}
+
+// Base64-urlencodes the input string
+function base64urlencode(str) {
+    return Buffer.from(str).toString('base64').replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+/* global sha256 */
+
+function pkceChallengeFromVerifier(v) {
+    let hash = crypto.createHash('sha256')
+    // let hash = sha256.create()
+    hash.update(v)
+    // let hashed = hash.array()
+    let stringed = String.fromCharCode.apply(null, hash)
+    let challenge = base64urlencode(stringed)
+    return challenge
+}
+
+const logout = function () {
+  clearLoginResults()
+  clearProfile()
+  clearPKCE()
+}
+
diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
new file mode 100644
index 00000000..5c446f18
--- /dev/null
+++ b/src/components/authentication/Login.vue
@@ -0,0 +1,44 @@
+<template>
+<a @click="getCode">Login Button</a>   
+</template>
+
+<script>
+import axios from "axios";
+export default {
+    name: 'LoginButton',
+    data(){
+        return{
+            server : 'https://apiclient.wiki/',
+            CLIENT_ID : "c0860cd2f1a6e322e1b4f20597c2be7a",
+            CLIENT_SECRET:"0b08788ef5274e77a8b4454422cb1866d2f6a30a"
+        }
+    },
+
+    methods: {
+        getCode (){
+            console.log(111111111111);
+            let url = "https://meta.wikimedia.org/w/rest.php/oauth2/authorize?client_id=" + this.CLIENT_ID + "&response_type=code";
+            window.location.href = url;
+        },
+        async lgbigfatpig(){
+            console.log(222222222222);
+            console.log(this.$route.query);
+            const params = new URLSearchParams();
+            params.append('grant_type', 'authorization_code');
+            params.append('code', code);
+            params.append('scope', 'public');
+            params.append('client_id', this.CLIENT_ID);
+            params.append('client_secret', this.CLIENT_SECRET);
+            const fetchDataRes = await axios.request({
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                },
+                url: '/w/rest.php/oauth2/access_token',
+                method: 'post',
+                baseURL: 'https://commons.wikimedia.org',
+                data: params
+            });
+        },
+    }
+}
+</script>
diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
new file mode 100644
index 00000000..40210797
--- /dev/null
+++ b/src/components/authentication/LoginSuccess.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>    Login Success </div>
+    </template>
+    
+    <script>
+    export default {
+        name: 'LoginSuccess',
+    }
+    </script>
+
+    
\ No newline at end of file
diff --git a/src/components/landing_page/LandingPage.vue b/src/components/landing_page/LandingPage.vue
index 629f6d72..789dd9c1 100644
--- a/src/components/landing_page/LandingPage.vue
+++ b/src/components/landing_page/LandingPage.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="landing-page">
     <MainToolBar></MainToolBar>
+    <LoginButton></LoginButton>
     <div class="cover">
       <!-- <img v-bind:src="photoOfTheDay" class="cover-image"> -->
       <!-- https://upload.wikimedia.org/wikipedia/commons/a/ad/Kulutusosuuskuntien_Keskusliiton_kokoelma_D1974_11333A_%2830804608561%29.jpg -->
@@ -200,6 +201,7 @@
 // import WikimapsWarperLayer from '@/openlayersplugin/WikimapsWarperLayer'
 import TopicSearchBox from "@/components/TopicSearchBox";
 import MainToolBar from "@/components/menu/MainToolbar";
+import LoginButton from "@/components/authentication/Login";
 
 export default {
   name: "LandingPage",
@@ -226,7 +228,8 @@ export default {
   components: {
     TopicSearchBox,
     // WikimapsWarperLayer,
-    MainToolBar
+    MainToolBar,
+    LoginButton
   },
   mounted: function() {
     this.$store.commit("resetState");
diff --git a/src/router/index.js b/src/router/index.js
index da76f8b9..5aa1dfba 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,7 @@ import 'ol/ol.css'
 import MainPage from '@/components/MainPage'
 import LandingPage from '@/components/landing_page/LandingPage'
 import devpage from '@/components/landing_page/Developer'
+import LoginSuccess from '@/components/authentication/LoginSuccess'
 
 Vue.use(Router)
 Vue.use(VueMasonryPlugin)
@@ -37,6 +38,11 @@ export default new Router({
       name: 'LandingPage',
       component: LandingPage
     },
+    {
+      path: '/logged-in',
+      name: 'LoginSuccess',
+      component: LoginSuccess
+    },
     {
       path: '/wikipedia/:language/:topic',
       component: MainPage

From ca13b364ca35a10e40e14ff96467fce5fc168139 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Tue, 30 May 2023 21:31:47 -0700
Subject: [PATCH 2/6] basic login

---
 src/components/authentication/Login.vue       | 21 --------
 .../authentication/LoginSuccess.vue           | 54 ++++++++++++++++---
 2 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index 5c446f18..3290cc8a 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -3,12 +3,10 @@
 </template>
 
 <script>
-import axios from "axios";
 export default {
     name: 'LoginButton',
     data(){
         return{
-            server : 'https://apiclient.wiki/',
             CLIENT_ID : "c0860cd2f1a6e322e1b4f20597c2be7a",
             CLIENT_SECRET:"0b08788ef5274e77a8b4454422cb1866d2f6a30a"
         }
@@ -20,25 +18,6 @@ export default {
             let url = "https://meta.wikimedia.org/w/rest.php/oauth2/authorize?client_id=" + this.CLIENT_ID + "&response_type=code";
             window.location.href = url;
         },
-        async lgbigfatpig(){
-            console.log(222222222222);
-            console.log(this.$route.query);
-            const params = new URLSearchParams();
-            params.append('grant_type', 'authorization_code');
-            params.append('code', code);
-            params.append('scope', 'public');
-            params.append('client_id', this.CLIENT_ID);
-            params.append('client_secret', this.CLIENT_SECRET);
-            const fetchDataRes = await axios.request({
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded'
-                },
-                url: '/w/rest.php/oauth2/access_token',
-                method: 'post',
-                baseURL: 'https://commons.wikimedia.org',
-                data: params
-            });
-        },
     }
 }
 </script>
diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
index 40210797..6ffd3102 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -1,11 +1,53 @@
 <template>
-    <div>    Login Success </div>
+    <div>    Login Success 
+        <a @click="$router.go(-3)">Return to previous page</a>
+        
+    </div>
+    
     </template>
     
     <script>
-    export default {
-        name: 'LoginSuccess',
+import axios from "axios";
+export default {
+  name: "LoginSuccess",
+  data() {
+    return {
+      CLIENT_ID: "c0860cd2f1a6e322e1b4f20597c2be7a",
+      CLIENT_SECRET: "0b08788ef5274e77a8b4454422cb1866d2f6a30a",
+      profileUrl:
+        "https://meta.wikimedia.org/w/rest.php/oauth2/resource/profile"
+    };
+  },
+  methods: {
+    async getAccessToken() {
+      const code = this.$route.query.code;
+      const params = new URLSearchParams();
+      params.append("grant_type", "authorization_code");
+      params.append("code", code);
+      params.append("client_id", this.CLIENT_ID);
+      params.append("client_secret", this.CLIENT_SECRET);
+      console.log(params);
+      const fetchDataRes = await axios.request({
+        url: "/w/rest.php/oauth2/access_token",
+        method: "post",
+        baseURL: "https://meta.wikimedia.org",
+        data: params
+      });
+      console.log(fetchDataRes.data.access_token);
+      localStorage.setItem("access_token", fetchDataRes.data.access_token);
+    },
+    async getUserProfile() {
+      let response = await fetch(this.profileUrl, {
+        headers: {
+          Authorization: "Bearer " + localStorage.getItem("access_token")
+        }
+      });
+      response.json().then(c => localStorage.setItem("username", c.username));
     }
-    </script>
-
-    
\ No newline at end of file
+  },
+  mounted: async function() {
+    await this.getAccessToken();
+    await this.getUserProfile();
+  }
+};
+</script>

From 2c6a5263e72078bac444ac5be62a4ddd019fb4b2 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Wed, 31 May 2023 19:57:51 -0700
Subject: [PATCH 3/6] Show username

---
 src/components/authentication/Login.vue       |  4 +++-
 src/components/authentication/UserProfile.vue | 21 +++++++++++++++++++
 src/components/landing_page/LandingPage.vue   |  6 ++++--
 src/components/menu/MainToolbar.vue           |  5 ++++-
 4 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 src/components/authentication/UserProfile.vue

diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index 3290cc8a..e903c3db 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -1,5 +1,8 @@
 <template>
+    <div>
 <a @click="getCode">Login Button</a>   
+
+</div>
 </template>
 
 <script>
@@ -14,7 +17,6 @@ export default {
 
     methods: {
         getCode (){
-            console.log(111111111111);
             let url = "https://meta.wikimedia.org/w/rest.php/oauth2/authorize?client_id=" + this.CLIENT_ID + "&response_type=code";
             window.location.href = url;
         },
diff --git a/src/components/authentication/UserProfile.vue b/src/components/authentication/UserProfile.vue
new file mode 100644
index 00000000..f6f6ea09
--- /dev/null
+++ b/src/components/authentication/UserProfile.vue
@@ -0,0 +1,21 @@
+
+<template>
+<div>{{name}}
+</div>
+</template>
+
+
+<script>
+export default {
+    name: 'UserProfile',
+    data() {
+        return{    name: '',};
+
+  },
+    mounted() {
+    if (localStorage.username) {
+      this.name = localStorage.username;
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/src/components/landing_page/LandingPage.vue b/src/components/landing_page/LandingPage.vue
index 789dd9c1..e2b44ceb 100644
--- a/src/components/landing_page/LandingPage.vue
+++ b/src/components/landing_page/LandingPage.vue
@@ -2,6 +2,7 @@
   <div class="landing-page">
     <MainToolBar></MainToolBar>
     <LoginButton></LoginButton>
+
     <div class="cover">
       <!-- <img v-bind:src="photoOfTheDay" class="cover-image"> -->
       <!-- https://upload.wikimedia.org/wikipedia/commons/a/ad/Kulutusosuuskuntien_Keskusliiton_kokoelma_D1974_11333A_%2830804608561%29.jpg -->
@@ -203,6 +204,7 @@ import TopicSearchBox from "@/components/TopicSearchBox";
 import MainToolBar from "@/components/menu/MainToolbar";
 import LoginButton from "@/components/authentication/Login";
 
+
 export default {
   name: "LandingPage",
   props: {},
@@ -229,8 +231,8 @@ export default {
     TopicSearchBox,
     // WikimapsWarperLayer,
     MainToolBar,
-    LoginButton
-  },
+    LoginButton,
+},
   mounted: function() {
     this.$store.commit("resetState");
     // this.$store.commit('setSelectedBasemap', this.mapOfTheDay);
diff --git a/src/components/menu/MainToolbar.vue b/src/components/menu/MainToolbar.vue
index 192d713b..552b6799 100644
--- a/src/components/menu/MainToolbar.vue
+++ b/src/components/menu/MainToolbar.vue
@@ -12,6 +12,7 @@
             <a class="main-button" @click="goToLandingPage">{{ landingPageName }}</a>
             <TopicSearchBox class="topic-search-box"></TopicSearchBox>
             <UILanguageMenu class="language-menu"></UILanguageMenu>
+            <UserProfile></UserProfile>
         </div>
     </div>
 </template>
@@ -19,6 +20,7 @@
 <script>
 import TopicSearchBox from '@/components/TopicSearchBox'
 import UILanguageMenu from '@/components/menu/UILanguageMenu'
+import UserProfile from "../authentication/UserProfile.vue";
 
 export default {
     name: 'MainToolbar',
@@ -29,7 +31,8 @@ export default {
     },
     components: {
         UILanguageMenu,
-        TopicSearchBox
+        TopicSearchBox,
+        UserProfile
     },
     methods: {
         goToLandingPage(event) {

From a38bd951174d91269061d0139673d14e09c18f90 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Thu, 1 Jun 2023 00:51:33 -0700
Subject: [PATCH 4/6] finish login/logout with drop down

---
 src/components/MainPage.vue                   |  9 +++++++-
 src/components/authentication/Login.vue       | 18 ++++++++++-----
 src/components/authentication/UserProfile.vue | 22 ++++++++++++++++++-
 src/components/landing_page/LandingPage.vue   |  3 ---
 src/components/menu/MainToolbar.vue           |  6 ++++-
 5 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue
index 619ff802..a90dbdd7 100644
--- a/src/components/MainPage.vue
+++ b/src/components/MainPage.vue
@@ -13,6 +13,8 @@
                 <a class="main-button" v-on:click="goToLandingPage">{{ landingPageName }}</a>
                 <TopicSearchBox class="topic-search-box"></TopicSearchBox>
                 <UILanguageMenu class="language-menu"></UILanguageMenu>
+                <LoginButton v-if="notLogIn"></LoginButton>
+                <UserProfile v-else></UserProfile>
             </div>
           <component
               v-bind:is="currentTabComponentName"
@@ -37,6 +39,8 @@ import TopicPage from '@/components/topic_page/HomePage'
 import WaitPage from '@/components/WaitPage'
 import TopicSearchBox from '@/components/TopicSearchBox'
 import UILanguageMenu from '@/components/menu/UILanguageMenu'
+import LoginButton from '@/components/authentication/Login';
+import UserProfile from '@/components/authentication/UserProfile.vue';
 
 export default {
     name: 'MainPage',
@@ -52,6 +56,7 @@ export default {
             ],
             WIKI: WIKI,
             landingPageName: "Wikidocumentaries",
+            notLogIn: localStorage.getItem("username") === null,
         }
     },
     computed: {
@@ -63,7 +68,9 @@ export default {
         TopicPage,
         WaitPage,
         UILanguageMenu,
-        TopicSearchBox
+        TopicSearchBox,
+        LoginButton,
+        UserProfile
     },
     beforeRouteEnter (to, from, next) {
         //console.log(to);
diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index e903c3db..fc76cd38 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -1,11 +1,17 @@
 <template>
-    <div>
-<a @click="getCode">Login Button</a>   
-
-</div>
+     <ToolbarMenu
+        icon="wikiglyph-translation"
+        tooltip="Login"
+        :translateItems="false"
+        :items="[{id:'login', text:'Log In'}]"
+        @doMenuItemAction="getCode"
+    >
+        <div slot="menu-title">User Profile</div>
+    </ToolbarMenu>
 </template>
 
 <script>
+import ToolbarMenu from '@/components/menu/ToolbarMenu'
 export default {
     name: 'LoginButton',
     data(){
@@ -14,7 +20,9 @@ export default {
             CLIENT_SECRET:"0b08788ef5274e77a8b4454422cb1866d2f6a30a"
         }
     },
-
+    components: {
+        ToolbarMenu,
+    },
     methods: {
         getCode (){
             let url = "https://meta.wikimedia.org/w/rest.php/oauth2/authorize?client_id=" + this.CLIENT_ID + "&response_type=code";
diff --git a/src/components/authentication/UserProfile.vue b/src/components/authentication/UserProfile.vue
index f6f6ea09..04c0b7c8 100644
--- a/src/components/authentication/UserProfile.vue
+++ b/src/components/authentication/UserProfile.vue
@@ -1,11 +1,21 @@
 
 <template>
-<div>{{name}}
+<div>
+    <ToolbarMenu
+        icon="wikiglyph-translation"
+        tooltip="Show profile"
+        :translateItems="false"
+        :items="[{id:'logout', text:'Log Out'}]"
+        @doMenuItemAction="logOut"
+    >
+        <div slot="menu-title">{{name}}</div>
+    </ToolbarMenu>
 </div>
 </template>
 
 
 <script>
+import ToolbarMenu from '@/components/menu/ToolbarMenu'
 export default {
     name: 'UserProfile',
     data() {
@@ -17,5 +27,15 @@ export default {
       this.name = localStorage.username;
     }
   },
+  components: {
+        ToolbarMenu,
+    },
+  methods: {
+        logOut (){
+            localStorage.removeItem('access_token');
+            localStorage.removeItem('username');
+            location. reload();
+        },
+    }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/landing_page/LandingPage.vue b/src/components/landing_page/LandingPage.vue
index e2b44ceb..28a6d749 100644
--- a/src/components/landing_page/LandingPage.vue
+++ b/src/components/landing_page/LandingPage.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="landing-page">
     <MainToolBar></MainToolBar>
-    <LoginButton></LoginButton>
 
     <div class="cover">
       <!-- <img v-bind:src="photoOfTheDay" class="cover-image"> -->
@@ -202,7 +201,6 @@
 // import WikimapsWarperLayer from '@/openlayersplugin/WikimapsWarperLayer'
 import TopicSearchBox from "@/components/TopicSearchBox";
 import MainToolBar from "@/components/menu/MainToolbar";
-import LoginButton from "@/components/authentication/Login";
 
 
 export default {
@@ -231,7 +229,6 @@ export default {
     TopicSearchBox,
     // WikimapsWarperLayer,
     MainToolBar,
-    LoginButton,
 },
   mounted: function() {
     this.$store.commit("resetState");
diff --git a/src/components/menu/MainToolbar.vue b/src/components/menu/MainToolbar.vue
index 552b6799..0ed7731f 100644
--- a/src/components/menu/MainToolbar.vue
+++ b/src/components/menu/MainToolbar.vue
@@ -12,7 +12,8 @@
             <a class="main-button" @click="goToLandingPage">{{ landingPageName }}</a>
             <TopicSearchBox class="topic-search-box"></TopicSearchBox>
             <UILanguageMenu class="language-menu"></UILanguageMenu>
-            <UserProfile></UserProfile>
+            <LoginButton v-if="notLogIn"></LoginButton>
+            <UserProfile v-else></UserProfile>
         </div>
     </div>
 </template>
@@ -20,6 +21,7 @@
 <script>
 import TopicSearchBox from '@/components/TopicSearchBox'
 import UILanguageMenu from '@/components/menu/UILanguageMenu'
+import LoginButton from '@/components/authentication/Login';
 import UserProfile from "../authentication/UserProfile.vue";
 
 export default {
@@ -27,11 +29,13 @@ export default {
     data () {
         return {
             landingPageName: "Wikidocumentaries",
+            notLogIn: localStorage.getItem("username") === null,
         }
     },
     components: {
         UILanguageMenu,
         TopicSearchBox,
+        LoginButton,
         UserProfile
     },
     methods: {

From 0f982c2a98ffc65373a17ad9baf6a24e619f8893 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Thu, 1 Jun 2023 18:50:07 -0700
Subject: [PATCH 5/6] return to previous page after login

---
 src/components/authentication/Login.vue        | 1 +
 src/components/authentication/LoginSuccess.vue | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index fc76cd38..5934af4f 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -25,6 +25,7 @@ export default {
     },
     methods: {
         getCode (){
+            localStorage.setItem('previouspage', window. location. href);
             let url = "https://meta.wikimedia.org/w/rest.php/oauth2/authorize?client_id=" + this.CLIENT_ID + "&response_type=code";
             window.location.href = url;
         },
diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
index 6ffd3102..f34515fc 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -1,6 +1,6 @@
 <template>
     <div>    Login Success 
-        <a @click="$router.go(-3)">Return to previous page</a>
+        <a @click="returnToPage">Return to previous page</a>
         
     </div>
     
@@ -19,6 +19,11 @@ export default {
     };
   },
   methods: {
+    returnToPage(){
+      let url = localStorage.getItem('previouspage');
+      localStorage.removeItem('previouspage');
+      window.location.href = url;
+    },
     async getAccessToken() {
       const code = this.$route.query.code;
       const params = new URLSearchParams();

From b81edd666a4ca4196c6b0d3a94253eab0b2f2521 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Fri, 9 Jun 2023 01:03:06 -0700
Subject: [PATCH 6/6] set icons and wait page

---
 src/components/authentication/Login.vue       |  2 +-
 .../authentication/LoginSuccess.vue           | 61 +++++++++++++++----
 src/components/authentication/UserProfile.vue |  2 +-
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index 5934af4f..eb771a2e 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -1,6 +1,6 @@
 <template>
      <ToolbarMenu
-        icon="wikiglyph-translation"
+        icon="wikiglyph-user-inactive"
         tooltip="Login"
         :translateItems="false"
         :items="[{id:'login', text:'Log In'}]"
diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
index f34515fc..71ebb242 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -1,12 +1,24 @@
 <template>
-    <div>    Login Success 
-        <a @click="returnToPage">Return to previous page</a>
-        
+  <div class="wait-page">
+    <!--div class="wait-image"><img src="/static/svgs/testimage.svg"></div-->
+    <div class="bars">
+      <div class="yellow"></div>
+      <div class="orange"></div>
+      <div class="red"></div>
+      <div class="purple"></div>
+      <div class="turquoise"></div>
+      <div class="green"></div>
     </div>
-    
-    </template>
-    
-    <script>
+    <div class="wait">
+      <div class="lds-heart">
+        <div></div>
+      </div>
+      <div class="message">Login successful. You are being redirected back to Wikidocumentaries.</div>
+    </div>
+  </div>
+</template>
+
+<script>
 import axios from "axios";
 export default {
   name: "LoginSuccess",
@@ -19,11 +31,7 @@ export default {
     };
   },
   methods: {
-    returnToPage(){
-      let url = localStorage.getItem('previouspage');
-      localStorage.removeItem('previouspage');
-      window.location.href = url;
-    },
+    
     async getAccessToken() {
       const code = this.$route.query.code;
       const params = new URLSearchParams();
@@ -48,11 +56,38 @@ export default {
         }
       });
       response.json().then(c => localStorage.setItem("username", c.username));
-    }
+    },
+    returnToPage(){
+      let url = localStorage.getItem('previouspage');
+      localStorage.removeItem('previouspage');
+      window.location.href = url;
+    },
   },
+
   mounted: async function() {
     await this.getAccessToken();
     await this.getUserProfile();
+    this.returnToPage();
   }
 };
 </script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.wait {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.message {
+    padding-left: 20px;
+}
+.bars {
+  flex: 1 0 100%;
+  height: 18px;
+  display: flex;
+  flex-wrap: nowrap;
+}
+</style>
+
diff --git a/src/components/authentication/UserProfile.vue b/src/components/authentication/UserProfile.vue
index 04c0b7c8..999cec1e 100644
--- a/src/components/authentication/UserProfile.vue
+++ b/src/components/authentication/UserProfile.vue
@@ -2,7 +2,7 @@
 <template>
 <div>
     <ToolbarMenu
-        icon="wikiglyph-translation"
+        icon="wikiglyph-user-active"
         tooltip="Show profile"
         :translateItems="false"
         :items="[{id:'logout', text:'Log Out'}]"