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 01/33] 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 02/33] 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 03/33] 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 04/33] 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 05/33] 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 06/33] 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'}]"

From 63475c08b9d6282164f82af8b8bdf3e2303b4ece Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Tue, 20 Jun 2023 15:51:27 -0700
Subject: [PATCH 07/33] enable image action menu; add popup

---
 src/components/ImageGrid.vue                | 14 +++---
 src/components/image_viewer/ImageViewer.vue | 22 +++++++++-
 src/components/upload/Popup.vue             | 48 +++++++++++++++++++++
 src/store/translation/en.json               |  3 +-
 4 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 src/components/upload/Popup.vue

diff --git a/src/components/ImageGrid.vue b/src/components/ImageGrid.vue
index 93bfde5d..41d83367 100644
--- a/src/components/ImageGrid.vue
+++ b/src/components/ImageGrid.vue
@@ -20,7 +20,7 @@
         </div>
         <div class="thumb-image-header">
           <div class="left-align">
-            <!-- <ImagesActionMenu v-bind:element="item"></ImagesActionMenu> -->
+            <ImagesActionMenu v-bind:element="item"></ImagesActionMenu>
             <div
               v-if="item.geoLocations != undefined && item.geoLocations.length > 0"
               class="header-item"
@@ -36,7 +36,7 @@
                 <i class="wikiglyph wikiglyph-new-window thumb-image-glyph"></i>
               </a>
             </div>
-            <!--ImagesRemoveMenu></ImagesRemoveMenu-->
+            <ImagesRemoveMenu></ImagesRemoveMenu>
           </div>
         </div>
       </div>
@@ -48,8 +48,8 @@
 
 <script>
 import ImageViewer from "@/components/image_viewer/ImageViewer";
-// import ImagesActionMenu from '@/components/menu/ImagesActionMenu'
-// import ImagesRemoveMenu from '@/components/menu/ImagesRemoveMenu'
+import ImagesActionMenu from '@/components/menu/ImagesActionMenu';
+import ImagesRemoveMenu from '@/components/menu/ImagesRemoveMenu';
 
 export default {
   name: "ImageGrid",
@@ -62,9 +62,9 @@ export default {
     }
   },
   components: {
-    ImageViewer
-    // ImagesActionMenu,
-    // ImagesRemoveMenu,
+    ImageViewer,
+    ImagesActionMenu,
+    ImagesRemoveMenu,
   },
   methods: {
     getCredits(item) {
diff --git a/src/components/image_viewer/ImageViewer.vue b/src/components/image_viewer/ImageViewer.vue
index 4ee0a05a..bf118d93 100644
--- a/src/components/image_viewer/ImageViewer.vue
+++ b/src/components/image_viewer/ImageViewer.vue
@@ -35,9 +35,11 @@
                       :tooltip="$t('general.menus.actionMenuTitle')"
                       :items="toolbarActionMenuItems"
                       @doMenuItemAction="onDoMenuItemAction"
+                      @click="showPopUp()"
                     >
                     <div slot="menu-title">{{ $t('general.menus.actionMenuTitle') }}</div>
                     </ToolbarMenu>
+                    <PopUp ref="popup"></PopUp>
                     <HeaderLink
                       v-if="element.infoURL"
                       class="toolbar-item neg"
@@ -472,6 +474,7 @@
 import HeaderLink from "@/components/HeaderLink";
 import Dataselect from "@/components/Dataselect";
 import ToolbarMenu from "@/components/menu/ToolbarMenu";
+import PopUp from "@/components/upload/Popup";
 
 const MENU_ACTIONS = {
   SELECT_HEADER: 0
@@ -500,14 +503,21 @@ export default {
         {
           id: MENU_ACTIONS.GEOLOCATE,
           text: "topic_page.TopicImages.imagesActionMenu.doGeolocatingText"
+        },
+        {
+          id: MENU_ACTIONS.UPLOAD,
+          text: "topic_page.TopicImages.imagesActionMenu.upload"
         }
-      ]
+      ],
+      clickPopUp: false,
     };
+  
   },
   components: {
     HeaderLink,
     Dataselect,
     ToolbarMenu,
+    PopUp,
   },
   props: {
     shouldShowDialog: Boolean
@@ -581,9 +591,17 @@ export default {
         // case MENU_ACTIONS.GEOLOCATE:
         //     ;
         //     break;
-        case MENU_ACTIONS.SELECT_HEADER:
+        // case MENU_ACTIONS.SELECT_HEADER:
+        case MENU_ACTIONS.UPLOAD:
+          console.log("I click upload");
+          this.showPopUp();
+          break;
       }
     },
+    showPopUp() {
+      console.log("hahaha");
+      this.$refs.popup.show();
+    },
     createMap() {
       var ol = this.$ol;
 
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
new file mode 100644
index 00000000..2522f256
--- /dev/null
+++ b/src/components/upload/Popup.vue
@@ -0,0 +1,48 @@
+<template>
+<div v-if="showModal" class="popup" >
+    <div class="popup-inner">
+        <slot></slot>
+        <button class="popup-close" @click.prevent="hide">
+        Close
+        </button>
+    </div>
+
+</div>
+</template>
+<script>
+export default{
+    name: 'PopUp',  data() {
+    return {
+      showModal: false,}},
+    methods: {
+        show(){
+            this.showModal = true;
+        },
+        hide() {
+      this.showModal = false;
+    },
+
+    }
+}
+</script>
+<style scoped>
+.popup{
+    position: fixed;
+    top: 0;
+    left:0;
+    right:0;
+    bottom:0;
+    z-index:99;
+    background: rgba(0,0,0,0.5);
+    display:flex;
+    align-items: center;
+    justify-content: center;
+
+
+}
+.popup-inner{
+    background: #FFF;
+    padding:32px;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/store/translation/en.json b/src/store/translation/en.json
index 02b687b9..4341bb60 100644
--- a/src/store/translation/en.json
+++ b/src/store/translation/en.json
@@ -274,7 +274,8 @@
                 "menuTooltip": "Actions",
                 "doGeolocatingText": "Set the location...",
                 "showImageText": "Show image",
-                "selectFeatured": "Choose as a header image"
+                "selectFeatured": "Choose as a header image",
+                "upload" : "upload"
             },
             "imagesRemoveMenu": {
                 "menuTitle": "Remove the image because...",

From e79679d8d10ae33c42b807ef37f256f0e1276eb8 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Tue, 20 Jun 2023 15:58:51 -0700
Subject: [PATCH 08/33] disable image remove menu; clean code

---
 src/components/ImageGrid.vue                | 6 +++---
 src/components/image_viewer/ImageViewer.vue | 2 --
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/ImageGrid.vue b/src/components/ImageGrid.vue
index 41d83367..6a13bb10 100644
--- a/src/components/ImageGrid.vue
+++ b/src/components/ImageGrid.vue
@@ -36,7 +36,7 @@
                 <i class="wikiglyph wikiglyph-new-window thumb-image-glyph"></i>
               </a>
             </div>
-            <ImagesRemoveMenu></ImagesRemoveMenu>
+            <!-- <ImagesRemoveMenu></ImagesRemoveMenu> -->
           </div>
         </div>
       </div>
@@ -49,7 +49,7 @@
 <script>
 import ImageViewer from "@/components/image_viewer/ImageViewer";
 import ImagesActionMenu from '@/components/menu/ImagesActionMenu';
-import ImagesRemoveMenu from '@/components/menu/ImagesRemoveMenu';
+// import ImagesRemoveMenu from '@/components/menu/ImagesRemoveMenu';
 
 export default {
   name: "ImageGrid",
@@ -64,7 +64,7 @@ export default {
   components: {
     ImageViewer,
     ImagesActionMenu,
-    ImagesRemoveMenu,
+    // ImagesRemoveMenu,
   },
   methods: {
     getCredits(item) {
diff --git a/src/components/image_viewer/ImageViewer.vue b/src/components/image_viewer/ImageViewer.vue
index bf118d93..8326c86f 100644
--- a/src/components/image_viewer/ImageViewer.vue
+++ b/src/components/image_viewer/ImageViewer.vue
@@ -593,13 +593,11 @@ export default {
         //     break;
         // case MENU_ACTIONS.SELECT_HEADER:
         case MENU_ACTIONS.UPLOAD:
-          console.log("I click upload");
           this.showPopUp();
           break;
       }
     },
     showPopUp() {
-      console.log("hahaha");
       this.$refs.popup.show();
     },
     createMap() {

From babb16ccd473d3c6565bde3f782a0250e207befb Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Fri, 23 Jun 2023 16:56:02 -0700
Subject: [PATCH 09/33] show popup in imagegrid; convert text to wiki templates

---
 src/components/ImageGrid.vue                |   2 +-
 src/components/image_viewer/ImageViewer.vue |   7 +-
 src/components/menu/ImagesActionMenu.vue    |  32 ++-
 src/components/upload/Popup.vue             | 230 +++++++++++++++++++-
 src/store/translation/en.json               |  10 +
 5 files changed, 259 insertions(+), 22 deletions(-)

diff --git a/src/components/ImageGrid.vue b/src/components/ImageGrid.vue
index 6a13bb10..7351f8ea 100644
--- a/src/components/ImageGrid.vue
+++ b/src/components/ImageGrid.vue
@@ -19,7 +19,7 @@
           <img class="icon" :src="getIcon(item)" align="right">
         </div>
         <div class="thumb-image-header">
-          <div class="left-align">
+          <div class="left-align" @click.stop.prevent>
             <ImagesActionMenu v-bind:element="item"></ImagesActionMenu>
             <div
               v-if="item.geoLocations != undefined && item.geoLocations.length > 0"
diff --git a/src/components/image_viewer/ImageViewer.vue b/src/components/image_viewer/ImageViewer.vue
index 8326c86f..2889cfae 100644
--- a/src/components/image_viewer/ImageViewer.vue
+++ b/src/components/image_viewer/ImageViewer.vue
@@ -35,7 +35,6 @@
                       :tooltip="$t('general.menus.actionMenuTitle')"
                       :items="toolbarActionMenuItems"
                       @doMenuItemAction="onDoMenuItemAction"
-                      @click="showPopUp()"
                     >
                     <div slot="menu-title">{{ $t('general.menus.actionMenuTitle') }}</div>
                     </ToolbarMenu>
@@ -593,12 +592,12 @@ export default {
         //     break;
         // case MENU_ACTIONS.SELECT_HEADER:
         case MENU_ACTIONS.UPLOAD:
-          this.showPopUp();
+          this.showPopUp(this.element);
           break;
       }
     },
-    showPopUp() {
-      this.$refs.popup.show();
+    showPopUp(element) {
+      this.$refs.popup.show(element);
     },
     createMap() {
       var ol = this.$ol;
diff --git a/src/components/menu/ImagesActionMenu.vue b/src/components/menu/ImagesActionMenu.vue
index 81ff8cd8..22a4e4d4 100644
--- a/src/components/menu/ImagesActionMenu.vue
+++ b/src/components/menu/ImagesActionMenu.vue
@@ -2,11 +2,12 @@
   <div class="images-action-menu">
     <IconMenu
       icon="wikiglyph-ellipses"
-      :items="iconActionMenuItems"
+      :items="this.iconActionMenuItems"
       @doMenuItemAction="onDoMenuItemAction"
     >
       <div slot="menu-title">{{ $t('topic_page.TopicImages.imagesActionMenu.menuTitle') }}</div>
     </IconMenu>
+    <PopUp ref="popup"></PopUp>
     <ImageViewer ref="imageviewer"></ImageViewer>
   </div>
 </template>
@@ -14,11 +15,14 @@
 <script>
 import IconMenu from "@/components/menu/IconMenu";
 import ImageViewer from "@/components/image_viewer/ImageViewer";
+import PopUp from "@/components/upload/Popup";
 
 const MENU_ACTIONS = {
   // GEOLOCATE: 0,
   // SELECT_HEADER: 0,
   // SHOW_IMAGE: 0,
+  SHOW_IMAGE:0,
+  UPLOAD:1,
 };
 
 export default {
@@ -32,7 +36,11 @@ export default {
         {
           id: MENU_ACTIONS.SHOW_IMAGE,
           text: "topic_page.TopicImages.imagesActionMenu.showImageText"
-        }
+        },
+        {
+          id: MENU_ACTIONS.UPLOAD,
+          text: "topic_page.TopicImages.imagesActionMenu.upload"
+        },
         // {
         //     id: MENU_ACTIONS.SELECT_HEADER,
         //     text: 'topic_page.TopicImages.imagesActionMenu.selectFeatured'
@@ -41,21 +49,29 @@ export default {
         //     id: MENU_ACTIONS.GEOLOCATE,
         //     text: 'topic_page.TopicImages.imagesActionMenu.doGeolocatingText'
         // },
-      ]
+      ],
+      clickPopUp: false,
     };
   },
   components: {
     IconMenu,
-    ImageViewer
+    ImageViewer,
+    PopUp,
   },
   methods: {
-    onDoMenuItemAction(menuItem) {
-      switch (menuItem.id) {
+    onDoMenuItemAction(iconActionMenuItems) {
+      switch (iconActionMenuItems.id) {
         case MENU_ACTIONS.SHOW_IMAGE:
-          this.$refs.imageviewer.show(this.$props.element);
+          this.$refs.imageviewer.show(this.$props.element, 0);
+          break;
+        case MENU_ACTIONS.UPLOAD:
+          this.showPopUp(this.$props.element);
           break;
       }
-    }
+    },
+    showPopUp(element) {
+      this.$refs.popup.show(element);
+    },
   }
 };
 </script>
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index 2522f256..99b05397 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -2,25 +2,174 @@
 <div v-if="showModal" class="popup" >
     <div class="popup-inner">
         <slot></slot>
-        <button class="popup-close" @click.prevent="hide">
-        Close
+        <div class="toolbar">
+            <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
+                <div class="toolbar-item" @click.prevent="hide">
+                      <a href="#" class="toolbar-item-a">
+                        <i class="wikiglyph wikiglyph-cross"></i>
+                      </a>
+                      <span class="tooltip">{{ $t('upload.popup.closePopup') }}</span>
+                    </div>
+        </div>
+        <div class="toolbar">
+            <h4 class="popupTip">{{ $t('upload.popup.popupTip') }}</h4>
+        </div>
+        <div class="columns">
+            <div class="grid-row">
+                <div class="grid-icons">
+                    <i class="wikiglyph wikiglyph-view-details metadata-glyph"></i>
+                </div>
+                <div class="grid-text">
+                    <div class="grid-item">{{ $t('upload.popup.filename') }}</div>
+                    <div class = "data">
+                        <div class="grid-body unedited">{{ filename }}</div>
+                    </div>
+                </div>
+                
+            </div>
+            <div class="grid-row">
+                <div class="grid-icons">
+                    <i class="wikiglyph wikiglyph-stripe-summary metadata-glyph"></i>
+                </div>
+                <div class="grid-text">
+                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.caption') }}</div>
+                    <div class = "data">
+                        <div class="grid-body unedited">{{ title }}</div>
+                    </div>
+                </div>
+                
+            </div>
+            <div v-if="element.creators" class="grid-row">
+                <div class="grid-icons">
+                    <i class="wikiglyph wikiglyph-user-avatar metadata-glyph"></i>
+                </div>
+                <div class="grid-text">
+                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.creator') }}</div>
+                    <template v-if="element.source == 'Finna'">
+                        <div class="compound" v-for="creator in element.creators" :key="creator.id">
+                            <div class="grid-body unedited">{{ author }}</div>
+                        </div>    
+                    </template>
+                    <template v-else>
+                        <Dataselect class="grid-select" v-for="creator in element.creators" :key="creator.id" v-bind:term="creator"></Dataselect>
+                    </template>
+                </div>
+            </div>
+                
+            <div class="grid-row" v-if="element.datecreated">
+                <div class="grid-icons">
+                    <i class="wikiglyph wikiglyph-production-date metadata-glyph"></i>
+                </div>
+                <div class="grid-text">
+                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.dateCreated') }}</div>
+                    <div class="data">
+                        <div class="grid-body unedited">{{ date }}</div>
+                    </div>    
+                </div>
+            </div>
+            <div v-if="element.license" class="grid-row">
+                <div class="grid-icons">
+                    <i class="wikiglyph wikiglyph-public-domain metadata-glyph"></i>
+                </div>
+                <div class="grid-text">
+                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.license') }}</div>
+                    <div class="data">
+                        <a :href="element.license_link">{{ license }}</a>
+                    </div>
+                </div>
+            </div>
+            <div class="grid-row">
+                <div class="grid-icons">
+                    <i class="wikiglyph wikiglyph-article metadata-glyph"></i>
+                </div>
+                <div class="grid-text">
+                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.imageInfoPage') }}</div>
+                    <div class="data break">
+                    <a :href="element.infoURL" target="_blank">{{ source }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <button class="button" @click="upload">
+        Upload
         </button>
     </div>
 
 </div>
 </template>
 <script>
+import Dataselect from "@/components/Dataselect";
+
 export default{
-    name: 'PopUp',  data() {
-    return {
-      showModal: false,}},
+    name: 'PopUp',  
+    data() {
+        return {
+            element: {},
+            showModal: false,
+            date: '',
+            title: '',
+            author: '',
+            license: '',
+            source: '',
+            filename: '',
+        }
+        },
+        components:{
+            Dataselect,
+        },
     methods: {
-        show(){
+        show(element){
             this.showModal = true;
+            this.element = element;
+            if (element.title){
+                this.title = element.title[0];
+                this.filename = this.title.charAt(0).toUpperCase() + this.title.slice(1);
+            }
+            else{this.title = ''}
+            if (element.creators[0]){
+                this.author = element.creators[0].name.split(', ').reverse().join(' ');
+                this.filename += '_by_' + this.author;
+            }
+            else{this.author = ''}
+            if (element.datecreated[0]){
+                this.date = element.datecreated[0].replace(/\D/g, "");
+                this.filename += '_' + this.date;
+            }
+            else{this.date = ''}
+            if (element.license){
+                this.license = element.license;
+            }
+            else{this.license = ''}
+            if (element.infoURL){
+                this.source = element.infoURL;
+            }
+            else{this.source = ''}
+            this.filename = this.filename.replace(/\s/g, "_");
         },
         hide() {
-      this.showModal = false;
-    },
+            this.showModal = false;
+        },
+        getLicenseTemplate(){
+            switch (this.license) {
+                case 'CC BY 4.0':
+                    return '{{Cc-by-sa-4.0}}';
+            }
+            return ''; 
+        },
+        upload(){
+            let infoTemplate = `{{Information|description=${this.title}|date=${this.date}|source=${this.source}|author=${this.author}}}`;
+            let licenseTemplate = this.getLicenseTemplate();
+            let category = '[[Category:Images uploaded from Wikidocumentaries]]';
+            var params = {
+                action: 'upload',
+                filename: this.filename,
+                ignorewarnings: '1',
+                token: 'csrf_token',
+                format: 'json',
+                text: infoTemplate + licenseTemplate + category,
+            };
+            console.log(params);
+        },
 
     }
 }
@@ -42,7 +191,70 @@ export default{
 }
 .popup-inner{
     background: #FFF;
-    padding:32px;
+    padding:30px;
     }
 
+.grid-icons {
+  display: inline-block;
+  margin: 0.05em 0.8em 0 0;
+}
+.grid-item {
+  font-weight: bold;
+  display: inline-block;
+  color: var(--main-txt-color);
+}
+
+.grid-text {
+  display: inline-block;
+  padding-top: 2px;
+}
+
+.data {
+  display: inline-block;
+  padding-top: 2px;
+}
+
+.grid-row {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 5px;
+}
+
+.columns {
+  column-width: 400px;
+  column-gap: 1.5em;
+  padding: 10px 20px 15px 20px;
+}
+
+.break {
+  word-break: break-all;
+}
+
+.metadata-glyph {
+  color: var(--main-txt-color);
+  font-size: 20px;
+}
+
+.header-title{
+    text-align: left;
+}
+
+.popupTip{
+    font-weight:lighter;
+    margin-top: 0px;
+}
+
+.button {
+  background-color: #249ad1; 
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 18px;
+  font-weight: normal;
+  margin: 4px 2px;
+  cursor: pointer;
+}
 </style>
\ No newline at end of file
diff --git a/src/store/translation/en.json b/src/store/translation/en.json
index 4341bb60..1861bacd 100644
--- a/src/store/translation/en.json
+++ b/src/store/translation/en.json
@@ -520,6 +520,16 @@
             "optionList": "List"
         }
     },
+    "upload": {
+        "popup": {
+            "popupTitle": "Upload image",
+            "popupTip": "Verify the information and edit the texts if needed.",
+            "filename": "File name",
+            "upload": "Upload" ,
+            "closePopup": "Close"
+
+        }
+    },
     "general": {
         "wikidocumentaries": "Wikidocumentaries",
         "ok": "OK",

From a911fff062966996a88e348ccab3f6fd029ce204 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Tue, 18 Jul 2023 00:29:10 -0700
Subject: [PATCH 10/33] add upload

---
 src/components/ImageGrid.vue             |  4 +-
 src/components/authentication/Login.vue  | 17 ++++--
 src/components/menu/ImagesActionMenu.vue |  8 +--
 src/components/upload/Popup.vue          | 74 ++++++++++++++++++++++--
 src/store/translation/en.json            |  3 +-
 5 files changed, 88 insertions(+), 18 deletions(-)

diff --git a/src/components/ImageGrid.vue b/src/components/ImageGrid.vue
index 7351f8ea..102b9e0e 100644
--- a/src/components/ImageGrid.vue
+++ b/src/components/ImageGrid.vue
@@ -18,8 +18,8 @@
           <div class="thumb-credit">{{ getCredits(item) }}</div>
           <img class="icon" :src="getIcon(item)" align="right">
         </div>
-        <div class="thumb-image-header">
-          <div class="left-align" @click.stop.prevent>
+        <div class="thumb-image-header"> 
+          <div class="left-align" @click.stop>
             <ImagesActionMenu v-bind:element="item"></ImagesActionMenu>
             <div
               v-if="item.geoLocations != undefined && item.geoLocations.length > 0"
diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index eb771a2e..321ede58 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -16,8 +16,13 @@ export default {
     name: 'LoginButton',
     data(){
         return{
-            CLIENT_ID : "c0860cd2f1a6e322e1b4f20597c2be7a",
-            CLIENT_SECRET:"0b08788ef5274e77a8b4454422cb1866d2f6a30a"
+            // This is a personal app with upload and edit grant
+            CLIENT_ID : "2cf7f32dad89c331863c1fc3a52463b0",
+            CLIENT_SECRET:"e07c0f7ac8f2ccebb725c56c93d982d6f8125b59"
+
+            // This is a public app without upload grant
+            // CLIENT_ID : "c0860cd2f1a6e322e1b4f20597c2be7a",
+            // CLIENT_SECRET:"0b08788ef5274e77a8b4454422cb1866d2f6a30a"
         }
     },
     components: {
@@ -25,9 +30,11 @@ 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;
+            // 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;
+            localStorage.setItem("access_token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIyY2Y3ZjMyZGFkODljMzMxODYzYzFmYzNhNTI0NjNiMCIsImp0aSI6ImMwNWQ1YzliNDAwNDU2ZTRhNmI2YzNkZWRlZWU4NjVlMWJjZTVmMzBjNmI1NWUzZjBiMTAyYzBjZGZkOTA5MTAwZDEyODBhZGZhZjhkZDMxIiwiaWF0IjoxNjg4OTQ0NzE1LjIyNzM4NSwibmJmIjoxNjg4OTQ0NzE1LjIyNzM4OCwiZXhwIjozMzI0NTg1MzUxNS4yMjI4OTMsInN1YiI6IjcyOTEzNDYyIiwiaXNzIjoiaHR0cHM6Ly9tZXRhLndpa2ltZWRpYS5vcmciLCJyYXRlbGltaXQiOnsicmVxdWVzdHNfcGVyX3VuaXQiOjUwMDAsInVuaXQiOiJIT1VSIn0sInNjb3BlcyI6WyJiYXNpYyIsImVkaXRwYWdlIiwiZWRpdG15Y3NzanMiLCJlZGl0bXlvcHRpb25zIiwiZWRpdGludGVyZmFjZSIsImVkaXRzaXRlY29uZmlnIiwiY3JlYXRlZWRpdG1vdmVwYWdlIiwidXBsb2FkZmlsZSIsInVwbG9hZGVkaXRtb3ZlZmlsZSJdfQ.s0ogB5NFmdri4scCoDHupx3iSnw68_6ntaBaoqRo7L8MHE5k0zoB-LmQFcrJbF0mv2KLXHom2zjOuMIDs4vyLnYPSd4-ZOuDzKfViir6GrbQjqDqkSkfuBPDt5P-mIiLknYEnesqbontLd_u1pdOr0DBttEKBx1WSvJ_0s5v9G_uX7UfsbUxPmmmiu2IekAIA-HT8iRy94ukvtgeTrCC_rzxx2S5HEakq-OpHWgySEZH0SRLVxv5RMCNo9PYQtMDw9sREfS2YWWmZYRSkEgJaygHygDxyxKgj9yuR7HRvXs0czjTSVJ2RoL228aomjgCE7whi1tjZrZ0P9Pr6YZ4eCgPB1gy0ZVTeE2yUuyeF7D0cLZEMMroZSgBtK76zJBhLdWZ6uCgC9jBsdrNR5TWSLAzWd8YD27FZRV54mTrpI-bsGpl53Qqtu6jQDjmyyNFo5TrPfJKmlgNsRvHp7Q9I0xMXYssNUGWUqARQT-jMjms4nUD5YD-xBXPZ7lmWZfHe7tR1SMu3xQsOKqG5I2iOX1Bc7SXWAu0f3I8opwQTU1Uv9hxLoZtRqzmOXcKkynwKRroWikNfzeaeNFpJYha6ji2snDWPJ20zma-ZbVxXlxZ7kr1HSSVUWa_RzbcmJ1f-wm1izLg2SIv0C36ODjPvj4hHqB0XN81nyitx9p9DOE");
+            console.log("login success")
         },
     }
 }
diff --git a/src/components/menu/ImagesActionMenu.vue b/src/components/menu/ImagesActionMenu.vue
index 22a4e4d4..3bb33a0e 100644
--- a/src/components/menu/ImagesActionMenu.vue
+++ b/src/components/menu/ImagesActionMenu.vue
@@ -33,10 +33,10 @@ export default {
   data() {
     return {
       iconActionMenuItems: [
-        {
-          id: MENU_ACTIONS.SHOW_IMAGE,
-          text: "topic_page.TopicImages.imagesActionMenu.showImageText"
-        },
+        // {
+        //   id: MENU_ACTIONS.SHOW_IMAGE,
+        //   text: "topic_page.TopicImages.imagesActionMenu.showImageText"
+        // },
         {
           id: MENU_ACTIONS.UPLOAD,
           text: "topic_page.TopicImages.imagesActionMenu.upload"
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index 99b05397..4525b874 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -89,16 +89,30 @@
                     </div>
                 </div>
             </div>
+        </div >
+        <div v-if="licenseTemplate"><button class="button" @click="upload">
+        Upload
+        </button>
+        <button class="button" @click="getCsrfToken">
+        test
+        </button>
         </div>
-        <button class="button" @click="upload">
+        <div v-else><button class="disable-button">
         Upload
         </button>
+        <div class="licenseMessage">
+        <div class="toolbar">
+            <h4 class="popupTip">{{ $t('upload.popup.cannotUpload') }}<a @click="upload" href='https://github.com/Wikidocumentaries/wikidocumentaries-ui/issues/new/choose'>Github</a></h4>
+        </div>
+    </div>
+    </div>
     </div>
 
 </div>
 </template>
 <script>
 import Dataselect from "@/components/Dataselect";
+import axios from "axios";
 
 export default{
     name: 'PopUp',  
@@ -112,6 +126,7 @@ export default{
             license: '',
             source: '',
             filename: '',
+            licenseTemplate: '',
         }
         },
         components:{
@@ -132,7 +147,8 @@ export default{
             }
             else{this.author = ''}
             if (element.datecreated[0]){
-                this.date = element.datecreated[0].replace(/\D/g, "");
+                this.date =
+                element.year != "" && element.year != null ? element.year : "";
                 this.filename += '_' + this.date;
             }
             else{this.date = ''}
@@ -145,6 +161,7 @@ export default{
             }
             else{this.source = ''}
             this.filename = this.filename.replace(/\s/g, "_");
+            this.getLicenseTemplate();
         },
         hide() {
             this.showModal = false;
@@ -152,13 +169,33 @@ export default{
         getLicenseTemplate(){
             switch (this.license) {
                 case 'CC BY 4.0':
-                    return '{{Cc-by-sa-4.0}}';
+                    this.licenseTemplate = '{{Cc-by-4.0}}';
+                    break;
+                case 'CC BY-SA 4.0':
+                    this.licenseTemplate = '{{Cc-by-sa-4.0}}';
+                    break;
+                case 'CC0':
+                    this.licenseTemplate = '{{Cc-zero}}';
+                    break;
+                case 'PDM':
+                    this.licenseTemplate = '{{PD-old}}';
+                    break;
+            }
+        }, 
+        async getCsrfToken() {
+            let requestConfig = {
+            baseURL: this.$store.state.BASE_URL,
+            url: "/csrfToken",
+            method: "get",
+            params: {
+              token: localStorage.getItem("access_token"),
             }
-            return ''; 
+            };
+        let response = await axios.request(requestConfig);
+        console.log(response);
         },
         upload(){
             let infoTemplate = `{{Information|description=${this.title}|date=${this.date}|source=${this.source}|author=${this.author}}}`;
-            let licenseTemplate = this.getLicenseTemplate();
             let category = '[[Category:Images uploaded from Wikidocumentaries]]';
             var params = {
                 action: 'upload',
@@ -166,9 +203,11 @@ export default{
                 ignorewarnings: '1',
                 token: 'csrf_token',
                 format: 'json',
-                text: infoTemplate + licenseTemplate + category,
+                text: infoTemplate + this.licenseTemplate + category,
             };
             console.log(params);
+            console.log(this.element.downloadScale);
+            console.log(this.element.downloadURL);
         },
 
     }
@@ -242,6 +281,14 @@ export default{
 .popupTip{
     font-weight:lighter;
     margin-top: 0px;
+    width: 600px;
+    text-align: left;
+}
+
+.licenseMessage{
+    margin-bottom: 0px;
+    width: 600px;
+    display: inline-block;
 }
 
 .button {
@@ -256,5 +303,20 @@ export default{
   font-weight: normal;
   margin: 4px 2px;
   cursor: pointer;
+  align-items: left;
+}
+
+.disable-button{
+  background-color: #777; 
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 18px;
+  font-weight: normal;
+  margin: 4px 2px;
+  cursor: pointer;
 }
 </style>
\ No newline at end of file
diff --git a/src/store/translation/en.json b/src/store/translation/en.json
index 1861bacd..018ce1a5 100644
--- a/src/store/translation/en.json
+++ b/src/store/translation/en.json
@@ -526,7 +526,8 @@
             "popupTip": "Verify the information and edit the texts if needed.",
             "filename": "File name",
             "upload": "Upload" ,
-            "closePopup": "Close"
+            "closePopup": "Close",
+            "cannotUpload": "This image cannot be uploaded to Wikimedia Commons because the license is not in the list of allowed licenses. If you think this is an error, please [file an issue] on "
 
         }
     },

From 1f48030ae5325c98dd5b563ba4297f6a85440f03 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Thu, 3 Aug 2023 21:18:44 -0700
Subject: [PATCH 11/33] update with new Oauth app, add UI and API call for
 upload

---
 src/components/authentication/Login.vue       |  14 +-
 .../authentication/LoginSuccess.vue           |   7 +-
 src/components/authentication/UserProfile.vue |   4 +-
 src/components/upload/InUpload.vue            |  38 ++++
 src/components/upload/Popup.vue               | 197 ++++++++++++++++--
 src/store/translation/en.json                 |   5 +-
 6 files changed, 232 insertions(+), 33 deletions(-)
 create mode 100644 src/components/upload/InUpload.vue

diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index 321ede58..cf2bfe8c 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -16,9 +16,9 @@ export default {
     name: 'LoginButton',
     data(){
         return{
-            // This is a personal app with upload and edit grant
-            CLIENT_ID : "2cf7f32dad89c331863c1fc3a52463b0",
-            CLIENT_SECRET:"e07c0f7ac8f2ccebb725c56c93d982d6f8125b59"
+            // This is a public app with upload grant
+            CLIENT_ID : "fc15fabf0c4d39e070084bb2d5accd5e",
+            CLIENT_SECRET:"43a72c51df15d4219dd7ec59f174a673cc37be8f"
 
             // This is a public app without upload grant
             // CLIENT_ID : "c0860cd2f1a6e322e1b4f20597c2be7a",
@@ -30,11 +30,9 @@ 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;
-            localStorage.setItem("access_token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIyY2Y3ZjMyZGFkODljMzMxODYzYzFmYzNhNTI0NjNiMCIsImp0aSI6ImMwNWQ1YzliNDAwNDU2ZTRhNmI2YzNkZWRlZWU4NjVlMWJjZTVmMzBjNmI1NWUzZjBiMTAyYzBjZGZkOTA5MTAwZDEyODBhZGZhZjhkZDMxIiwiaWF0IjoxNjg4OTQ0NzE1LjIyNzM4NSwibmJmIjoxNjg4OTQ0NzE1LjIyNzM4OCwiZXhwIjozMzI0NTg1MzUxNS4yMjI4OTMsInN1YiI6IjcyOTEzNDYyIiwiaXNzIjoiaHR0cHM6Ly9tZXRhLndpa2ltZWRpYS5vcmciLCJyYXRlbGltaXQiOnsicmVxdWVzdHNfcGVyX3VuaXQiOjUwMDAsInVuaXQiOiJIT1VSIn0sInNjb3BlcyI6WyJiYXNpYyIsImVkaXRwYWdlIiwiZWRpdG15Y3NzanMiLCJlZGl0bXlvcHRpb25zIiwiZWRpdGludGVyZmFjZSIsImVkaXRzaXRlY29uZmlnIiwiY3JlYXRlZWRpdG1vdmVwYWdlIiwidXBsb2FkZmlsZSIsInVwbG9hZGVkaXRtb3ZlZmlsZSJdfQ.s0ogB5NFmdri4scCoDHupx3iSnw68_6ntaBaoqRo7L8MHE5k0zoB-LmQFcrJbF0mv2KLXHom2zjOuMIDs4vyLnYPSd4-ZOuDzKfViir6GrbQjqDqkSkfuBPDt5P-mIiLknYEnesqbontLd_u1pdOr0DBttEKBx1WSvJ_0s5v9G_uX7UfsbUxPmmmiu2IekAIA-HT8iRy94ukvtgeTrCC_rzxx2S5HEakq-OpHWgySEZH0SRLVxv5RMCNo9PYQtMDw9sREfS2YWWmZYRSkEgJaygHygDxyxKgj9yuR7HRvXs0czjTSVJ2RoL228aomjgCE7whi1tjZrZ0P9Pr6YZ4eCgPB1gy0ZVTeE2yUuyeF7D0cLZEMMroZSgBtK76zJBhLdWZ6uCgC9jBsdrNR5TWSLAzWd8YD27FZRV54mTrpI-bsGpl53Qqtu6jQDjmyyNFo5TrPfJKmlgNsRvHp7Q9I0xMXYssNUGWUqARQT-jMjms4nUD5YD-xBXPZ7lmWZfHe7tR1SMu3xQsOKqG5I2iOX1Bc7SXWAu0f3I8opwQTU1Uv9hxLoZtRqzmOXcKkynwKRroWikNfzeaeNFpJYha6ji2snDWPJ20zma-ZbVxXlxZ7kr1HSSVUWa_RzbcmJ1f-wm1izLg2SIv0C36ODjPvj4hHqB0XN81nyitx9p9DOE");
-            console.log("login success")
+            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 71ebb242..703296b0 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -24,8 +24,10 @@ export default {
   name: "LoginSuccess",
   data() {
     return {
-      CLIENT_ID: "c0860cd2f1a6e322e1b4f20597c2be7a",
-      CLIENT_SECRET: "0b08788ef5274e77a8b4454422cb1866d2f6a30a",
+      CLIENT_ID : "fc15fabf0c4d39e070084bb2d5accd5e",
+      CLIENT_SECRET:"43a72c51df15d4219dd7ec59f174a673cc37be8f",
+      // CLIENT_ID: "c0860cd2f1a6e322e1b4f20597c2be7a",
+      // CLIENT_SECRET: "0b08788ef5274e77a8b4454422cb1866d2f6a30a",
       profileUrl:
         "https://meta.wikimedia.org/w/rest.php/oauth2/resource/profile"
     };
@@ -72,7 +74,6 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .wait {
   padding: 20px;
diff --git a/src/components/authentication/UserProfile.vue b/src/components/authentication/UserProfile.vue
index 999cec1e..e205f5cb 100644
--- a/src/components/authentication/UserProfile.vue
+++ b/src/components/authentication/UserProfile.vue
@@ -15,7 +15,9 @@
 
 
 <script>
-import ToolbarMenu from '@/components/menu/ToolbarMenu'
+import ToolbarMenu from '@/components/menu/ToolbarMenu';
+var request = require('request').defaults({jar: true});
+
 export default {
     name: 'UserProfile',
     data() {
diff --git a/src/components/upload/InUpload.vue b/src/components/upload/InUpload.vue
new file mode 100644
index 00000000..3cbc9d56
--- /dev/null
+++ b/src/components/upload/InUpload.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="wait-page">
+      <div class="wait">
+        <div class="lds-heart">
+          <div></div>
+        </div>
+        <div class="message">{{ $t('upload.popup.uploadInProgress') }}</div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import axios from "axios";
+  export default {
+    name: "InUpload",
+  };
+  </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>
+  
+  
\ No newline at end of file
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index 4525b874..dcfa9e10 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -1,7 +1,36 @@
 <template>
 <div v-if="showModal" class="popup" >
-    <div class="popup-inner">
+    <div v-if="inUpload" class="popup-inner">
+        <div class="toolbar">
+            <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
+                <div class="toolbar-item">
+                      <a href="#" class="toolbar-item-a">
+                        <i class="wikiglyph wikiglyph-cross"></i>
+                      </a>
+                      <span class="tooltip">{{ $t('upload.popup.uploadInProgress') }}</span>
+                    </div>
+        </div>
+        <InUpload></InUpload>
+        <div class="message">{{ currentProcess }}</div>
+        <div class="message">{{ filenameNoUnderscore }}</div>
+        <div>
+        <button class="button" @click.prevent="hide">{{ $t('upload.popup.cancel') }}</button>
+        <button class="disable-button">Upload</button></div>
+    </div>
+    <div v-else class="popup-inner">
         <slot></slot>
+        <div v-if="showResult" class="popup-inner">
+        <div class="toolbar">
+                <div class="toolbar-item" @click.prevent="hide">
+                      <a href="#" class="toolbar-item-a">
+                        <i class="wikiglyph wikiglyph-cross"></i>
+                      </a>
+                      <span class="tooltip">{{ $t('upload.popup.closePopup') }}</span>
+                    </div>
+        </div>
+        <div class="message">{{ resultMessage }}</div>
+    </div>
+    <div v-else>
         <div class="toolbar">
             <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
                 <div class="toolbar-item" @click.prevent="hide">
@@ -67,6 +96,7 @@
                     </div>    
                 </div>
             </div>
+
             <div v-if="element.license" class="grid-row">
                 <div class="grid-icons">
                     <i class="wikiglyph wikiglyph-public-domain metadata-glyph"></i>
@@ -78,6 +108,19 @@
                     </div>
                 </div>
             </div>
+
+            <div v-if="this.category" class="grid-row">
+                <div class="grid-icons">
+                    <i class="wikiglyph wikiglyph-message metadata-glyph"></i>
+                </div>
+                <div class="grid-text">
+                    <div class="grid-item">{{ $t('upload.popup.category') }}</div>
+                    <div class="data">
+                        <a :href="this.categoryLink">{{ category }}</a>
+                    </div>
+                </div>
+            </div>
+
             <div class="grid-row">
                 <div class="grid-icons">
                     <i class="wikiglyph wikiglyph-article metadata-glyph"></i>
@@ -89,12 +132,26 @@
                     </div>
                 </div>
             </div>
+
+            <!-- Depicts -->
+            <div class="grid-row">
+                <div class="grid-icons">
+                    <i class="wikiglyph wikiglyph-depicted metadata-glyph"></i>
+                </div>
+                <div class="grid-text">
+                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.depicted') }}</div>
+                    <div class="data">
+                        <div class="grid-body unedited">{{ imgDepict }}</div>
+                    </div>    
+                </div>
+            </div>
+
         </div >
-        <div v-if="licenseTemplate"><button class="button" @click="upload">
+        <div v-if="licenseTemplate"><button class="button" @click="getCsrfToken">
         Upload
         </button>
-        <button class="button" @click="getCsrfToken">
-        test
+        <button class="button" @click="depict">
+            depict
         </button>
         </div>
         <div v-else><button class="disable-button">
@@ -107,11 +164,13 @@
     </div>
     </div>
     </div>
+    </div>
 
 </div>
 </template>
 <script>
 import Dataselect from "@/components/Dataselect";
+import InUpload from "@/components/upload/InUpload";
 import axios from "axios";
 
 export default{
@@ -120,29 +179,41 @@ export default{
         return {
             element: {},
             showModal: false,
+            inUpload: false,
+            showResult: false,
+            currentProcess: "",
+            resultMessage: "",
             date: '',
             title: '',
             author: '',
             license: '',
             source: '',
             filename: '',
+            filenameNoUnderscore: '',
+            category: '',
+            categoryLink: '',
             licenseTemplate: '',
+            imgDepict: '',
+            response: '',
         }
         },
         components:{
             Dataselect,
+            InUpload,
         },
     methods: {
         show(element){
+            this.showResult = false;
             this.showModal = true;
             this.element = element;
             if (element.title){
-                this.title = element.title[0];
+                
+                this.title = element.title[0].replace(/[^\w\sÅÄÖåäö]/gi, "");
                 this.filename = this.title.charAt(0).toUpperCase() + this.title.slice(1);
             }
             else{this.title = ''}
             if (element.creators[0]){
-                this.author = element.creators[0].name.split(', ').reverse().join(' ');
+                this.author = element.creators[0].name.split(', ').reverse().join(' ').replace(/[^\w\sÅÄÖåäö]/gi, "");
                 this.filename += '_by_' + this.author;
             }
             else{this.author = ''}
@@ -160,8 +231,17 @@ export default{
                 this.source = element.infoURL;
             }
             else{this.source = ''}
+            this.filenameNoUnderscore = this.filename;
             this.filename = this.filename.replace(/\s/g, "_");
             this.getLicenseTemplate();
+            for (var statement of this.$store.state.wikidocumentaries.wikidata.statements) {
+                if (statement.id === "P373"){
+                    this.category = statement.values[0].value;
+                    this.categoryLink = statement.values[0].url;
+                    console.log(statement);
+                }
+            }
+            this.imgDepict = this.$store.state.wikidocumentaries.title;
         },
         hide() {
             this.showModal = false;
@@ -183,6 +263,8 @@ export default{
             }
         }, 
         async getCsrfToken() {
+            this.inUpload = true;
+            this.currentProcess = "Getting token";
             let requestConfig = {
             baseURL: this.$store.state.BASE_URL,
             url: "/csrfToken",
@@ -191,25 +273,99 @@ export default{
               token: localStorage.getItem("access_token"),
             }
             };
-        let response = await axios.request(requestConfig);
-        console.log(response);
+            let response = await axios.request(requestConfig);
+            console.log(response.data.csrf_token);
+            console.log(this.currentProcess);
+            console.log(this.filenameNoUnderscore);
+
+            this.downloadImage(response.data.csrf_token);
+            
         },
-        upload(){
+        async downloadImage(csrf_token){
+            this.currentProcess = "Downloading";
+            let downloadURL = this.element.downloadURL;
+            let requestConfig = {
+            baseURL: this.$store.state.BASE_URL,
+            url: "/download",
+            method: "get",
+            params: {
+                filename: this.filename,
+                downloadURL: downloadURL
+            }
+            };
+            let response = await axios.request(requestConfig);
+            console.log(response.data);
+            if (this.showModal){
+                this.callupload(csrf_token);
+            }
+            else{
+                this.inUpload = false;
+                console.log('user cancel upload');
+                this.deleteCancledFile();
+            }
+        },
+        deleteCancledFile(){
+            let requestConfig = {
+            baseURL: this.$store.state.BASE_URL,
+            url: "/deleteFile",
+            method: "get",
+            params: {
+                filename: this.filename,
+            }
+            };
+            let response = axios.request(requestConfig);
+        },
+        async callupload(csrf_token){
+            this.currentProcess = "Uploading";
             let infoTemplate = `{{Information|description=${this.title}|date=${this.date}|source=${this.source}|author=${this.author}}}`;
-            let category = '[[Category:Images uploaded from Wikidocumentaries]]';
-            var params = {
-                action: 'upload',
+            let category = `[[Category:Images uploaded from Wikidocumentaries]][[Category:${this.category}]]`;
+            let text = infoTemplate + this.licenseTemplate + category;
+            let downloadURL = this.element.downloadURL;
+            let requestConfig = {
+            baseURL: this.$store.state.BASE_URL,
+            url: "/upload",
+            method: "get",
+            params: {
+                token: localStorage.getItem("access_token"),
+                csrf_token: csrf_token,
                 filename: this.filename,
-                ignorewarnings: '1',
-                token: 'csrf_token',
-                format: 'json',
-                text: infoTemplate + this.licenseTemplate + category,
+                text: text,
+                downloadURL: downloadURL
+            }
+            };
+            let response = await axios.request(requestConfig);
+            console.log(1111111111111);
+            console.log(response.data.uploadResponse);
+            if (response.data.uploadResponse.upload){
+                console.log("depict start");
+                let title = `File:${response.data.uploadResponse.upload.filename}`;
+                console.log(title);
+                this.depict(title);
+            }
+            else{
+                this.inUpload = false;
+                this.showResult = true;
+                this.resultMessage = response.data.uploadResponse.error.info;
+            }
+        },
+        async depict(title){
+            this.currentProcess = "Depicting";
+            let requestConfig = {
+            baseURL: this.$store.state.BASE_URL,
+            url: "/depict",
+            method: "get",
+            params: {
+              token: localStorage.getItem("access_token"),
+              title: title,
+              depictId: this.$store.state.wikidocumentaries.wikidataId,
+            }
             };
-            console.log(params);
-            console.log(this.element.downloadScale);
-            console.log(this.element.downloadURL);
+            let response = await axios.request(requestConfig);
+            this.inUpload = false;
+            console.log(response);
+            this.showResult = true;
+            this.resultMessage = response.data;
         },
-
     }
 }
 </script>
@@ -231,6 +387,7 @@ export default{
 .popup-inner{
     background: #FFF;
     padding:30px;
+    max-width: 1000px;
     }
 
 .grid-icons {
diff --git a/src/store/translation/en.json b/src/store/translation/en.json
index 018ce1a5..2185f197 100644
--- a/src/store/translation/en.json
+++ b/src/store/translation/en.json
@@ -527,7 +527,10 @@
             "filename": "File name",
             "upload": "Upload" ,
             "closePopup": "Close",
-            "cannotUpload": "This image cannot be uploaded to Wikimedia Commons because the license is not in the list of allowed licenses. If you think this is an error, please [file an issue] on "
+            "cannotUpload": "This image cannot be uploaded to Wikimedia Commons because the license is not in the list of allowed licenses. If you think this is an error, please [file an issue] on ",
+            "uploadInProgress": "Upload in progress",
+            "cancel": "cancel",
+            "category": "Category"
 
         }
     },

From 429893a3120d45f7c6ab473b6b09c12756416d2d Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Sun, 6 Aug 2023 23:59:08 -0700
Subject: [PATCH 12/33] new Oauth app support upload and edit

---
 src/components/authentication/Login.vue        | 10 +++-------
 src/components/authentication/LoginSuccess.vue |  6 ++----
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index cf2bfe8c..690e86db 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -16,13 +16,9 @@ export default {
     name: 'LoginButton',
     data(){
         return{
-            // This is a public app with upload grant
-            CLIENT_ID : "fc15fabf0c4d39e070084bb2d5accd5e",
-            CLIENT_SECRET:"43a72c51df15d4219dd7ec59f174a673cc37be8f"
-
-            // This is a public app without upload grant
-            // CLIENT_ID : "c0860cd2f1a6e322e1b4f20597c2be7a",
-            // CLIENT_SECRET:"0b08788ef5274e77a8b4454422cb1866d2f6a30a"
+            // This is a public app with upload and edit grant
+            CLIENT_ID : "f2aa70edfeb48a0eb08614c69b9148b4",
+            CLIENT_SECRET:"48830e519cfc29240c9291a7f301e437d0355958"
         }
     },
     components: {
diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
index 703296b0..872d1ee5 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -24,10 +24,8 @@ export default {
   name: "LoginSuccess",
   data() {
     return {
-      CLIENT_ID : "fc15fabf0c4d39e070084bb2d5accd5e",
-      CLIENT_SECRET:"43a72c51df15d4219dd7ec59f174a673cc37be8f",
-      // CLIENT_ID: "c0860cd2f1a6e322e1b4f20597c2be7a",
-      // CLIENT_SECRET: "0b08788ef5274e77a8b4454422cb1866d2f6a30a",
+      CLIENT_ID : "f2aa70edfeb48a0eb08614c69b9148b4",
+      CLIENT_SECRET:"48830e519cfc29240c9291a7f301e437d0355958",
       profileUrl:
         "https://meta.wikimedia.org/w/rest.php/oauth2/resource/profile"
     };

From e1cacebfc041f798261195cd099ef40fc21ad513 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Wed, 23 Aug 2023 00:26:09 -0700
Subject: [PATCH 13/33] update popup

---
 src/components/upload/Popup.vue | 752 ++++++++++++++++----------------
 src/store/translation/en.json   |   7 +-
 2 files changed, 393 insertions(+), 366 deletions(-)

diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index dcfa9e10..4f87ffd7 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -1,399 +1,423 @@
 <template>
-<div v-if="showModal" class="popup" >
+  <div v-if="showModal" class="popup">
     <div v-if="inUpload" class="popup-inner">
-        <div class="toolbar">
-            <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
-                <div class="toolbar-item">
-                      <a href="#" class="toolbar-item-a">
-                        <i class="wikiglyph wikiglyph-cross"></i>
-                      </a>
-                      <span class="tooltip">{{ $t('upload.popup.uploadInProgress') }}</span>
-                    </div>
+      <div class="toolbar">
+        <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
+        <div class="toolbar-item">
+          <a href="#" class="toolbar-item-a">
+            <i class="wikiglyph wikiglyph-cross"></i>
+          </a>
+          <span class="tooltip">{{ $t('upload.popup.uploadInProgress') }}</span>
         </div>
-        <InUpload></InUpload>
-        <div class="message">{{ currentProcess }}</div>
-        <div class="message">{{ filenameNoUnderscore }}</div>
-        <div>
+      </div>
+      <InUpload></InUpload>
+      <div class="message">{{ currentProcess }}</div>
+      <div class="message">{{ filenameNoUnderscore }}</div>
+      <div>
         <button class="button" @click.prevent="hide">{{ $t('upload.popup.cancel') }}</button>
-        <button class="disable-button">Upload</button></div>
+        <button class="disable-button">Upload</button>
+      </div>
     </div>
-    <div v-else class="popup-inner">
-        <slot></slot>
-        <div v-if="showResult" class="popup-inner">
-        <div class="toolbar">
-                <div class="toolbar-item" @click.prevent="hide">
-                      <a href="#" class="toolbar-item-a">
-                        <i class="wikiglyph wikiglyph-cross"></i>
-                      </a>
-                      <span class="tooltip">{{ $t('upload.popup.closePopup') }}</span>
-                    </div>
+    <div v-else-if="showResult" class="popup-inner">
+      showresult
+      <div class="toolbar">
+        <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
+        <div class="toolbar-item" @click.prevent="hide">
+          <a href="#" class="toolbar-item-a">
+            <i class="wikiglyph wikiglyph-cross"></i>
+          </a>
+          <span class="tooltip">{{ $t('upload.popup.closePopup') }}</span>
         </div>
-        <div class="message">{{ resultMessage }}</div>
+      </div>
+      <div class="message">{{ resultMessage }}</div>
     </div>
-    <div v-else>
+    <div v-else-if="uploadFinish" class="popup-inner">
+      uploadfinish
+      <h2 class="message">{{ $t('upload.popup.uploadSuccess') }}</h2>
+      <h4 class="message">{{ $t('upload.popup.view') }}
+        <a href={{ commonsUrl }} target="_blank">{{ filenameNoUnderscore }}</a>
+        {{ $t('upload.popup.inWikimediaCommons') }}
+      </h4>
+      <div><button class="button" @click.prevent="hide">
+          {{ $t('upload.popup.ok') }}
+        </button></div>
+    </div>
+    <div v-else class="popup-inner">
+      <div>
         <div class="toolbar">
-            <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
-                <div class="toolbar-item" @click.prevent="hide">
-                      <a href="#" class="toolbar-item-a">
-                        <i class="wikiglyph wikiglyph-cross"></i>
-                      </a>
-                      <span class="tooltip">{{ $t('upload.popup.closePopup') }}</span>
-                    </div>
+          <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
+          <div class="toolbar-item" @click.prevent="hide">
+            <a href="#" class="toolbar-item-a">
+              <i class="wikiglyph wikiglyph-cross"></i>
+            </a>
+            <span class="tooltip">{{ $t('upload.popup.closePopup') }}</span>
+          </div>
         </div>
         <div class="toolbar">
-            <h4 class="popupTip">{{ $t('upload.popup.popupTip') }}</h4>
+          <h4 class="popupTip">{{ $t('upload.popup.popupTip') }}</h4>
         </div>
         <div class="columns">
-            <div class="grid-row">
-                <div class="grid-icons">
-                    <i class="wikiglyph wikiglyph-view-details metadata-glyph"></i>
-                </div>
-                <div class="grid-text">
-                    <div class="grid-item">{{ $t('upload.popup.filename') }}</div>
-                    <div class = "data">
-                        <div class="grid-body unedited">{{ filename }}</div>
-                    </div>
-                </div>
-                
+          <div class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-view-details metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">{{ $t('upload.popup.filename') }}</div>
+              <div class="data">
+                <div class="grid-body unedited">{{ filename }}</div>
+              </div>
+            </div>
+
+          </div>
+          <div class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-stripe-summary metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">{{ $t('imageViewer.imageMetadata.caption') }}</div>
+              <div class="data">
+                <div class="grid-body unedited">{{ title }}</div>
+              </div>
             </div>
-            <div class="grid-row">
-                <div class="grid-icons">
-                    <i class="wikiglyph wikiglyph-stripe-summary metadata-glyph"></i>
-                </div>
-                <div class="grid-text">
-                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.caption') }}</div>
-                    <div class = "data">
-                        <div class="grid-body unedited">{{ title }}</div>
-                    </div>
-                </div>
-                
+
+          </div>
+          <div v-if="element.creators" class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-user-avatar metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">{{ $t('imageViewer.imageMetadata.creator') }}</div>
+              <div class="grid-body unedited">
+                <ItemPullDown @clicked="onClickChild" class="grid-select value" v-bind:term="this.author">
+                </ItemPullDown>
+              </div>
             </div>
-            <div v-if="element.creators" class="grid-row">
-                <div class="grid-icons">
-                    <i class="wikiglyph wikiglyph-user-avatar metadata-glyph"></i>
-                </div>
-                <div class="grid-text">
-                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.creator') }}</div>
-                    <template v-if="element.source == 'Finna'">
-                        <div class="compound" v-for="creator in element.creators" :key="creator.id">
-                            <div class="grid-body unedited">{{ author }}</div>
-                        </div>    
-                    </template>
-                    <template v-else>
-                        <Dataselect class="grid-select" v-for="creator in element.creators" :key="creator.id" v-bind:term="creator"></Dataselect>
-                    </template>
-                </div>
+          </div>
+
+          <div class="grid-row" v-if="element.datecreated">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-production-date metadata-glyph"></i>
             </div>
-                
-            <div class="grid-row" v-if="element.datecreated">
-                <div class="grid-icons">
-                    <i class="wikiglyph wikiglyph-production-date metadata-glyph"></i>
-                </div>
-                <div class="grid-text">
-                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.dateCreated') }}</div>
-                    <div class="data">
-                        <div class="grid-body unedited">{{ date }}</div>
-                    </div>    
-                </div>
+            <div class="grid-text">
+              <div class="grid-item">{{ $t('imageViewer.imageMetadata.dateCreated') }}</div>
+              <div class="data">
+                <div class="grid-body unedited">{{ date }}</div>
+              </div>
             </div>
+          </div>
 
-            <div v-if="element.license" class="grid-row">
-                <div class="grid-icons">
-                    <i class="wikiglyph wikiglyph-public-domain metadata-glyph"></i>
-                </div>
-                <div class="grid-text">
-                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.license') }}</div>
-                    <div class="data">
-                        <a :href="element.license_link">{{ license }}</a>
-                    </div>
-                </div>
+          <div v-if="element.license" class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-public-domain metadata-glyph"></i>
             </div>
+            <div class="grid-text">
+              <div class="grid-item">{{ $t('imageViewer.imageMetadata.license') }}</div>
+              <div class="data">
+                <a :href="element.license_link" target="_blank">{{ license }}</a>
+              </div>
+            </div>
+          </div>
 
-            <div v-if="this.category" class="grid-row">
-                <div class="grid-icons">
-                    <i class="wikiglyph wikiglyph-message metadata-glyph"></i>
-                </div>
-                <div class="grid-text">
-                    <div class="grid-item">{{ $t('upload.popup.category') }}</div>
-                    <div class="data">
-                        <a :href="this.categoryLink">{{ category }}</a>
-                    </div>
-                </div>
+          <div v-if="this.category" class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-message metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">{{ $t('upload.popup.category') }}</div>
+              <div class="data">
+                <a :href="this.categoryLink" target="_blank">{{ category }}</a>
+              </div>
             </div>
+          </div>
 
-            <div class="grid-row">
-                <div class="grid-icons">
-                    <i class="wikiglyph wikiglyph-article metadata-glyph"></i>
-                </div>
-                <div class="grid-text">
-                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.imageInfoPage') }}</div>
-                    <div class="data break">
-                    <a :href="element.infoURL" target="_blank">{{ source }}</a>
-                    </div>
-                </div>
+          <div class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-article metadata-glyph"></i>
             </div>
+            <div class="grid-text">
+              <div class="grid-item">{{ $t('imageViewer.imageMetadata.imageInfoPage') }}</div>
+              <div class="data break">
+                <a :href="element.infoURL" target="_blank">{{ source }}</a>
+              </div>
+            </div>
+          </div>
 
-            <!-- Depicts -->
-            <div class="grid-row">
-                <div class="grid-icons">
-                    <i class="wikiglyph wikiglyph-depicted metadata-glyph"></i>
-                </div>
-                <div class="grid-text">
-                    <div class="grid-item">{{ $t('imageViewer.imageMetadata.depicted') }}</div>
-                    <div class="data">
-                        <div class="grid-body unedited">{{ imgDepict }}</div>
-                    </div>    
-                </div>
+          <!-- Depicts -->
+          <div class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-depicted metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">{{ $t('imageViewer.imageMetadata.depicted') }}</div>
+              <div class="data">
+                <div class="grid-body unedited"><a :href="imgDepictUrl" target="_blank">{{ imgDepict }}</a></div>
+              </div>
             </div>
+          </div>
 
-        </div >
+        </div>
         <div v-if="licenseTemplate"><button class="button" @click="getCsrfToken">
-        Upload
-        </button>
-        <button class="button" @click="depict">
-            depict
-        </button>
+            Upload
+          </button>
+          <button class="button" @click="print">
+            print
+          </button>
         </div>
         <div v-else><button class="disable-button">
-        Upload
-        </button>
-        <div class="licenseMessage">
-        <div class="toolbar">
-            <h4 class="popupTip">{{ $t('upload.popup.cannotUpload') }}<a @click="upload" href='https://github.com/Wikidocumentaries/wikidocumentaries-ui/issues/new/choose'>Github</a></h4>
+            Upload
+          </button>
+          <div class="licenseMessage">
+            <div class="toolbar">
+              <h4 class="popupTip">{{ $t('upload.popup.cannotUpload') }}
+                <a href='https://github.com/Wikidocumentaries/wikidocumentaries-ui/issues/new/choose'
+                  target="_blank">Github</a>
+              </h4>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
-    </div>
-    </div>
-    </div>
-
-</div>
+  </div>
 </template>
 <script>
-import Dataselect from "@/components/Dataselect";
+import ItemPullDown from "@/components/upload/ItemPullDown";
 import InUpload from "@/components/upload/InUpload";
 import axios from "axios";
 
-export default{
-    name: 'PopUp',  
-    data() {
-        return {
-            element: {},
-            showModal: false,
-            inUpload: false,
-            showResult: false,
-            currentProcess: "",
-            resultMessage: "",
-            date: '',
-            title: '',
-            author: '',
-            license: '',
-            source: '',
-            filename: '',
-            filenameNoUnderscore: '',
-            category: '',
-            categoryLink: '',
-            licenseTemplate: '',
-            imgDepict: '',
-            response: '',
+export default {
+  name: "PopUp",
+  data() {
+    return {
+      element: {},
+      showModal: false,
+      inUpload: false,
+      showResult: false,
+      uploadFinish: false,
+      currentProcess: "",
+      resultMessage: "",
+      date: "",
+      title: "",
+      author: "",
+      license: "",
+      source: "",
+      filename: "",
+      filenameNoUnderscore: "",
+      category: "",
+      categoryLink: "",
+      licenseTemplate: "",
+      imgDepict: "",
+      imgDepictUrl: "",
+      response: "",
+      commonsUrl: ""
+    };
+  },
+  components: {
+    ItemPullDown,
+    InUpload
+  },
+  methods: {
+    show(element) {
+      this.showResult = false;
+      this.showModal = true;
+      this.element = element;
+      if (element.title) {
+        // not remove, encode
+        this.title = element.title[0].replace(/[\.\-\s\<\>]/gi, " ");
+        this.title = this.title.replace(/[\s]{2,}/gi, " ");
+        this.title = this.title.replace(/[\s]$/, "");
+        this.filename =
+          this.title.charAt(0).toUpperCase() + this.title.slice(1);
+      } else {
+        this.title = "";
+      }
+      if (element.creators[0]) {
+        this.author = element.creators[0].name
+          .split(", ")
+          .reverse()
+          .join(" ")
+          .replace(/[\.\-\s\<\>]/gi, " ");
+        this.filename += "_by_" + this.author;
+      } else {
+        this.author = "";
+      }
+      if (element.datecreated[0]) {
+        this.date =
+          element.year != "" && element.year != null ? element.year : "";
+        this.filename += "_" + this.date;
+      } else {
+        this.date = "";
+      }
+      if (element.license) {
+        this.license = element.license;
+      } else {
+        this.license = "";
+      }
+      if (element.infoURL) {
+        this.source = element.infoURL;
+      } else {
+        this.source = "";
+      }
+      this.filenameNoUnderscore = this.filename.replace(/[_]/g, " ");
+      this.filename = encodeURIComponent(this.filename.replace(/\s/g, "_"));
+      this.licenseTemplate = element.licenseTemplate;
+      for (var statement of this.$store.state.wikidocumentaries.wikidata
+        .statements) {
+        if (statement.id === "P373") {
+          this.category = statement.values[0].value;
+          this.categoryLink = statement.values[0].url;
+          console.log(statement);
         }
-        },
-        components:{
-            Dataselect,
-            InUpload,
-        },
-    methods: {
-        show(element){
-            this.showResult = false;
-            this.showModal = true;
-            this.element = element;
-            if (element.title){
-                
-                this.title = element.title[0].replace(/[^\w\sÅÄÖåäö]/gi, "");
-                this.filename = this.title.charAt(0).toUpperCase() + this.title.slice(1);
-            }
-            else{this.title = ''}
-            if (element.creators[0]){
-                this.author = element.creators[0].name.split(', ').reverse().join(' ').replace(/[^\w\sÅÄÖåäö]/gi, "");
-                this.filename += '_by_' + this.author;
-            }
-            else{this.author = ''}
-            if (element.datecreated[0]){
-                this.date =
-                element.year != "" && element.year != null ? element.year : "";
-                this.filename += '_' + this.date;
-            }
-            else{this.date = ''}
-            if (element.license){
-                this.license = element.license;
-            }
-            else{this.license = ''}
-            if (element.infoURL){
-                this.source = element.infoURL;
-            }
-            else{this.source = ''}
-            this.filenameNoUnderscore = this.filename;
-            this.filename = this.filename.replace(/\s/g, "_");
-            this.getLicenseTemplate();
-            for (var statement of this.$store.state.wikidocumentaries.wikidata.statements) {
-                if (statement.id === "P373"){
-                    this.category = statement.values[0].value;
-                    this.categoryLink = statement.values[0].url;
-                    console.log(statement);
-                }
-            }
-            this.imgDepict = this.$store.state.wikidocumentaries.title;
-        },
-        hide() {
-            this.showModal = false;
-        },
-        getLicenseTemplate(){
-            switch (this.license) {
-                case 'CC BY 4.0':
-                    this.licenseTemplate = '{{Cc-by-4.0}}';
-                    break;
-                case 'CC BY-SA 4.0':
-                    this.licenseTemplate = '{{Cc-by-sa-4.0}}';
-                    break;
-                case 'CC0':
-                    this.licenseTemplate = '{{Cc-zero}}';
-                    break;
-                case 'PDM':
-                    this.licenseTemplate = '{{PD-old}}';
-                    break;
-            }
-        }, 
-        async getCsrfToken() {
-            this.inUpload = true;
-            this.currentProcess = "Getting token";
-            let requestConfig = {
-            baseURL: this.$store.state.BASE_URL,
-            url: "/csrfToken",
-            method: "get",
-            params: {
-              token: localStorage.getItem("access_token"),
-            }
-            };
-            let response = await axios.request(requestConfig);
-            console.log(response.data.csrf_token);
-            console.log(this.currentProcess);
-            console.log(this.filenameNoUnderscore);
+      }
+      this.imgDepict = this.$store.state.wikidocumentaries.title;
+      this.imgDepictUrl = 'https://www.wikidata.org/wiki/' + this.$store.state.wikidocumentaries.wikidataId;
+      console.log(element.id)
+    },
+    hide() {
+      this.showModal = false;
+    },
+    async getCsrfToken() {
+      this.inUpload = true;
+      this.currentProcess = "Getting token";
+      let requestConfig = {
+        baseURL: this.$store.state.BASE_URL,
+        url: "/csrfToken",
+        method: "get",
+        params: {
+          token: localStorage.getItem("access_token")
+        }
+      };
+      let response = await axios.request(requestConfig);
+      console.log(response.data.csrf_token);
+      console.log(this.currentProcess);
+      console.log(this.filenameNoUnderscore);
 
-            this.downloadImage(response.data.csrf_token);
-            
-        },
-        async downloadImage(csrf_token){
-            this.currentProcess = "Downloading";
-            let downloadURL = this.element.downloadURL;
-            let requestConfig = {
-            baseURL: this.$store.state.BASE_URL,
-            url: "/download",
-            method: "get",
-            params: {
-                filename: this.filename,
-                downloadURL: downloadURL
-            }
-            };
-            let response = await axios.request(requestConfig);
-            console.log(response.data);
-            if (this.showModal){
-                this.callupload(csrf_token);
-            }
-            else{
-                this.inUpload = false;
-                console.log('user cancel upload');
-                this.deleteCancledFile();
-            }
-        },
-        deleteCancledFile(){
-            let requestConfig = {
-            baseURL: this.$store.state.BASE_URL,
-            url: "/deleteFile",
-            method: "get",
-            params: {
-                filename: this.filename,
-            }
-            };
-            let response = axios.request(requestConfig);
-        },
-        async callupload(csrf_token){
-            this.currentProcess = "Uploading";
-            let infoTemplate = `{{Information|description=${this.title}|date=${this.date}|source=${this.source}|author=${this.author}}}`;
-            let category = `[[Category:Images uploaded from Wikidocumentaries]][[Category:${this.category}]]`;
-            let text = infoTemplate + this.licenseTemplate + category;
-            let downloadURL = this.element.downloadURL;
-            let requestConfig = {
-            baseURL: this.$store.state.BASE_URL,
-            url: "/upload",
-            method: "get",
-            params: {
-                token: localStorage.getItem("access_token"),
-                csrf_token: csrf_token,
-                filename: this.filename,
-                text: text,
-                downloadURL: downloadURL
-            }
-            };
-            let response = await axios.request(requestConfig);
-            console.log(1111111111111);
-            console.log(response.data.uploadResponse);
-            if (response.data.uploadResponse.upload){
-                console.log("depict start");
-                let title = `File:${response.data.uploadResponse.upload.filename}`;
-                console.log(title);
-                this.depict(title);
-            }
-            else{
-                this.inUpload = false;
-                this.showResult = true;
-                this.resultMessage = response.data.uploadResponse.error.info;
-            }
-        },
-        async depict(title){
-            this.currentProcess = "Depicting";
-            let requestConfig = {
-            baseURL: this.$store.state.BASE_URL,
-            url: "/depict",
-            method: "get",
-            params: {
-              token: localStorage.getItem("access_token"),
-              title: title,
-              depictId: this.$store.state.wikidocumentaries.wikidataId,
-            }
-            };
-            let response = await axios.request(requestConfig);
-            this.inUpload = false;
-            console.log(response);
-            this.showResult = true;
-            this.resultMessage = response.data;
-        },
+      this.downloadImage(response.data.csrf_token);
+    },
+    async downloadImage(csrf_token) {
+      this.currentProcess = "Downloading";
+      let downloadURL = this.element.downloadURL;
+      let requestConfig = {
+        baseURL: this.$store.state.BASE_URL,
+        url: "/download",
+        method: "get",
+        params: {
+          filename: this.filename,
+          downloadURL: downloadURL
+        }
+      };
+      let response = await axios.request(requestConfig);
+      console.log(response.data);
+      if (this.showModal) {
+        this.callupload(csrf_token);
+      } else {
+        this.inUpload = false;
+        console.log("user cancel upload");
+        this.deleteCancledFile();
+      }
+    },
+    deleteCancledFile() {
+      let requestConfig = {
+        baseURL: this.$store.state.BASE_URL,
+        url: "/deleteFile",
+        method: "get",
+        params: {
+          filename: this.filename
+        }
+      };
+      let response = axios.request(requestConfig);
+    },
+    async callupload(csrf_token) {
+      this.currentProcess = "Uploading";
+      let infoTemplate = `{{Information|description=${this.title}|date=${this.date
+        }|source=${this.source}|author=${this.author}}}`;
+      let category = `[[Category:Images uploaded from Wikidocumentaries]][[Category:${this.category
+        }]]`;
+      let text = infoTemplate + this.licenseTemplate + category;
+      let downloadURL = this.element.downloadURL;
+      let requestConfig = {
+        baseURL: this.$store.state.BASE_URL,
+        url: "/upload",
+        method: "get",
+        params: {
+          token: localStorage.getItem("access_token"),
+          csrf_token: csrf_token,
+          filename: this.filename,
+          text: text,
+          downloadURL: downloadURL
+        }
+      };
+      let response = await axios.request(requestConfig);
+      console.log(response.data.uploadResponse);
+      if (response.data.uploadResponse.upload) {
+        console.log("depict start");
+        let title = `File:${response.data.uploadResponse.upload.filename}`;
+        this.inUpload = false;
+        this.uploadFinish = true;
+        this.commonsUrl = "https://commons.wikimedia.org/wiki/" + title;
+        this.depict(title);
+      } else {
+        this.inUpload = false;
+        this.showResult = true;
+        this.resultMessage = response.data.uploadResponse.error.info;
+      }
+    },
+    async depict(title) {
+      this.currentProcess = "Depicting";
+      let requestConfig = {
+        baseURL: this.$store.state.BASE_URL,
+        url: "/depict",
+        method: "get",
+        params: {
+          token: localStorage.getItem("access_token"),
+          title: title,
+          depictId: this.$store.state.wikidocumentaries.wikidataId
+        }
+      };
+      let response = await axios.request(requestConfig);
+      this.inUpload = false;
+    },
+    onClickChild(value) {
+      this.author = value;
+    },
+    print() {
+      let infoTemplate = `{{Information|description=${this.title}|date=${this.date
+        }|source=${this.source}|author=${this.author}}}`;
+      let category = `[[Category:Images uploaded from Wikidocumentaries]][[Category:${this.category
+        }]]`;
+      console.log(infoTemplate);
+      console.log(this.licenseTemplate);
+      console.log(category);
+      console.log(this.filename);
+      console.log(this.filenameNoUnderscore);
     }
-}
+  }
+};
 </script>
 <style scoped>
-.popup{
-    position: fixed;
-    top: 0;
-    left:0;
-    right:0;
-    bottom:0;
-    z-index:99;
-    background: rgba(0,0,0,0.5);
-    display:flex;
-    align-items: center;
-    justify-content: center;
-
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
+.popup-inner {
+  background: #fff;
+  padding: 30px;
+  max-width: 1000px;
 }
-.popup-inner{
-    background: #FFF;
-    padding:30px;
-    max-width: 1000px;
-    }
 
 .grid-icons {
   display: inline-block;
   margin: 0.05em 0.8em 0 0;
 }
+
 .grid-item {
   font-weight: bold;
   display: inline-block;
@@ -431,25 +455,25 @@ export default{
   font-size: 20px;
 }
 
-.header-title{
-    text-align: left;
+.header-title {
+  text-align: left;
 }
 
-.popupTip{
-    font-weight:lighter;
-    margin-top: 0px;
-    width: 600px;
-    text-align: left;
+.popupTip {
+  font-weight: lighter;
+  margin-top: 0px;
+  width: 600px;
+  text-align: left;
 }
 
-.licenseMessage{
-    margin-bottom: 0px;
-    width: 600px;
-    display: inline-block;
+.licenseMessage {
+  margin-bottom: 0px;
+  width: 600px;
+  display: inline-block;
 }
 
 .button {
-  background-color: #249ad1; 
+  background-color: #249ad1;
   border: none;
   color: white;
   padding: 15px 32px;
@@ -463,8 +487,8 @@ export default{
   align-items: left;
 }
 
-.disable-button{
-  background-color: #777; 
+.disable-button {
+  background-color: #777;
   border: none;
   color: white;
   padding: 15px 32px;
@@ -476,4 +500,4 @@ export default{
   margin: 4px 2px;
   cursor: pointer;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/store/translation/en.json b/src/store/translation/en.json
index 2185f197..795b8bd1 100644
--- a/src/store/translation/en.json
+++ b/src/store/translation/en.json
@@ -530,8 +530,11 @@
             "cannotUpload": "This image cannot be uploaded to Wikimedia Commons because the license is not in the list of allowed licenses. If you think this is an error, please [file an issue] on ",
             "uploadInProgress": "Upload in progress",
             "cancel": "cancel",
-            "category": "Category"
-
+            "category": "Category",
+            "uploadSuccess": "uploadSuccess",
+            "view": "View",
+            "inWikimediaCommons": "in Wikimedia Commons",
+            "ok": "OK"
         }
     },
     "general": {

From 2c597ca601863cdc1624d5f2fec675fb3e743c6a Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Sun, 27 Aug 2023 22:51:47 -0700
Subject: [PATCH 14/33] add comment and item pull down

---
 src/components/upload/InUpload.vue     |   5 +-
 src/components/upload/ItemPullDown.vue | 329 +++++++++++++++++++++++++
 src/components/upload/Popup.vue        |  14 +-
 3 files changed, 342 insertions(+), 6 deletions(-)
 create mode 100644 src/components/upload/ItemPullDown.vue

diff --git a/src/components/upload/InUpload.vue b/src/components/upload/InUpload.vue
index 3cbc9d56..2967cce2 100644
--- a/src/components/upload/InUpload.vue
+++ b/src/components/upload/InUpload.vue
@@ -1,3 +1,6 @@
+<!-- 
+ This component will show during the image upload process, indicating the upload process.
+  -->
 <template>
     <div class="wait-page">
       <div class="wait">
@@ -10,13 +13,11 @@
   </template>
   
   <script>
-  import axios from "axios";
   export default {
     name: "InUpload",
   };
   </script>
   
-  <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
   .wait {
     padding: 20px;
diff --git a/src/components/upload/ItemPullDown.vue b/src/components/upload/ItemPullDown.vue
new file mode 100644
index 00000000..f8895156
--- /dev/null
+++ b/src/components/upload/ItemPullDown.vue
@@ -0,0 +1,329 @@
+<!-- 
+ This component is the pull down.
+ In this pull down, user can search for topics, select a value for
+ the parent component and create a new topic.
+  -->
+<template>
+    <div>
+      <div v-if = "addedTerm"
+        class="data-select"
+        :class="[shouldShowMenu ? 'active-term' : '']"
+        @click="openSearch"
+      >{{ addedTerm }} <a :href="addedTermLink" target ="_blank">{{ ` (${addedTermId})`}}</a></div>
+
+      <div v-else
+        class="data-select"
+        :class="[shouldShowMenu ? 'active-term' : '']"
+        @click="openSearch"
+      >{{ term ? term : title }}</div>
+
+      <div class="search-results" @mouseleave="hideMenu">
+        <div id="drop" :class="[shouldShowMenu ? showClass : hideClass]">
+          <div
+            v-show="topicInputValue.split(' ').length > 1"
+            class="data-button"
+            @click="rotateTerm"
+          >{{ $t('imageViewer.imageMetadata.rotate') }}</div>
+          <input
+            id="findTopicInput"
+            @input="debounceFindTopics"
+            class="input-drop"
+            v-model="topicInputValue"
+            type="text"
+          >
+          <div class="drop-option" v-for="(topic) in topics" :key="topic.wikidata">
+            <div @click="addTerm(topic)">
+            <span class="topic-title">{{ topic.wikipage }}</span>
+            <br>
+            <span class="topic-summary">{{ getSummary(topic) }}</span>
+            <br>
+            <a :href="topic.wikidocumentarieslink" target="_blank">go to topic page</a>
+            </div>
+          </div>
+          <a slot="menu-link" :href="newLink" class="create-new" target="_blank">{{ $t('LandingPage.createNew') }}</a>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import debounce from "debounce";
+  import jsonp from "jsonp";
+  
+  export default {
+    name: "Dataselect",
+    props: {
+      term: String,
+      title: String
+    },
+    data() {
+      return {
+        topicInputValue: "",
+        shouldShowMenu: false,
+        showClass: "dropdown-content",
+        hideClass: "dropdown-content-hide",
+        topics: [],
+        maxSummaryLengthInChars: 50,
+        leftedge: 0,
+        addedTerm: "",
+        addedTermId: "",
+        addedTermLink: "",
+      };
+    },
+    created: function() {
+      this.debounceFindTopics = debounce(this.findTopics, 500);
+    },
+    computed: {
+        newLink() {
+            let url="https://www.wikidata.org/w/index.php?title=Special:NewItem&label=" + this.topicInputValue + "&uselang=" + this.$i18n.locale;
+            return url;
+        }
+    },
+    methods: {
+      showMenu() {
+        this.shouldShowMenu = true;
+      },
+      hideMenu() {
+        this.shouldShowMenu = false;
+      },
+      getSummary(topic) {
+        if (topic.summary == undefined) {
+          return "";
+        } else if (topic.summary.length > this.maxSummaryLengthInChars) {
+          var summary = topic.summary;
+          if (summary.indexOf(topic.wikipage) == 0) {
+            summary = summary.substr(topic.wikipage.length);
+          }
+          if (summary.indexOf(",") == 0) {
+            summary = summary.substr(1);
+          }
+          return summary;
+        } else {
+          return topic.summary;
+        }
+      },
+      openSearch: function(el) {
+        this.term ? this.topicInputValue = this.term : this.topicInputValue = 'testing';
+        this.debounceFindTopics();
+      },
+      rotateTerm: function() {
+        let rotated;
+        rotated = this.topicInputValue.replace(",", "").split(" ");
+        rotated.push(rotated.shift());
+        this.topicInputValue = rotated.join(" ");
+        this.debounceFindTopics();
+      },
+      findTopics: function() {
+        if (this.topicInputValue.length >= 3) {
+          this.searchFromWikidata(this.topicInputValue);
+        } 
+      },
+      getTopicURL: function(topic) {
+        return "/" + topic.wikidata + "?language=" + this.$i18n.locale;
+      },
+      addTerm: function(topic){
+        if (topic !== ''){
+            this.addedTerm = topic.wikipage;
+            this.addedTermId = topic.wikidata;
+            this.addedTermLink = topic.wikidocumentarieslink;
+            this.$emit('clicked', this.addedTerm)
+        }
+      },
+      searchFromWikidata: function(topicInputValue) {
+        var url =
+          "https://www.wikidata.org/w/api.php?" +
+          "action=wbsearchentities" +
+          "&search=" +
+          encodeURIComponent(topicInputValue) +
+          "&language=" +
+          this.$i18n.locale +
+          "&uselang=" +
+          this.$i18n.locale +
+          "&format=json" +
+          "&type=item";
+        ("&callback=callback");
+  
+        var _this = this;
+        var topics = [];
+  
+        jsonp(url, null, (error, data) => {
+          if (error) {
+            console.log(error);
+            reject(error);
+          } else {
+            if (data.search.length > 0) {
+              var wikidataQueryURL =
+                "https://" +
+                this.$i18n.locale +
+                ".wikipedia.org/w/api.php?" +
+                "action=query&prop=pageprops&ppprop=wikibase_item&redirects=resolve&titles=";
+  
+              for (var i = 0; i < data.search.length; i++) {
+                var item = data.search[i];
+                var topic = {
+                  wikipage: item["label"],
+                  wikilink: item["id"],
+                  wikidocumentarieslink:
+                    "/" + item["id"] + "/" + item["label"].split(" ").join("_"),
+                  summary: item["description"],
+                  wikidata: item["id"],
+                  wikidatalink: item["url"]
+                };
+  
+                topics.push(topic);
+  
+                _this.topics = topics;
+               
+              }
+            } else {
+              // TODO let user know
+            }
+            this.showMenu();
+          }
+        });
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .search-items {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  
+  .input-drop {
+    display: block;
+    padding: 7px;
+    font-size: inherit;
+    border: none;
+    min-width: 300px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 2px #333 solid;
+    width: -webkit-fill-available;
+    width: -moz-available;
+  }
+  
+  .input-drop:focus {
+    color: #333;
+    outline: none;
+  }
+  
+  .input-drop:focus::placeholder {
+    visibility: hidden;
+  }
+  
+  .button-find {
+    border: none;
+    cursor: pointer;
+    margin-top: auto;
+    margin-bottom: auto;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    padding: 1px 10px;
+    background-color: #a74e77;
+    color: white;
+    display: flex;
+    align-items: center;
+  }
+  
+  .search-results {
+    position: absolute;
+    cursor: pointer;
+  }
+  
+  /* Dropdown Content (Hidden by Default) */
+  .dropdown-content {
+    position: absolute;
+    background-color: #fff;
+    min-width: 350px;
+    -webkit-box-shadow: var(--main-shadow);
+    box-shadow: var(--main-shadow);
+    z-index: 1;
+  }
+  
+  .dropdown-content-hide {
+    display: none;
+  }
+  
+  /* Links inside the dropdown */
+  .drop-option {
+    padding: 5px 10px;
+    text-decoration: none;
+    display: block;
+    text-transform: none;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    font-size: 11pt;
+    line-height: 1.3;
+    color: #333;
+    transition: none;
+  }
+  
+  /* Links inside the dropdown */
+  .drop-option:hover {
+    box-shadow: none;
+    outline: none;
+    background-color: var(--main-red);
+    color: white;
+  }
+  
+  .topic-title {
+    font-weight: bold;
+  }
+  
+  span.topic-summary {
+    font-weight: initial;
+  }
+  
+  a.search-icon {
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-transition: color 80ms ease-in, background 80ms ease-in;
+    transition: color 80ms ease-in, background 80ms ease-in;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 45px;
+    color: #333;
+    box-shadow: none;
+  }
+  
+  a.search-icon:hover {
+    background: var(--main-txt-color);
+    color: white;
+  }
+
+  .create-new {
+    padding: 5px 10px;
+    text-decoration: none;
+    display: block;
+    text-transform: none;
+    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    font-size: 11pt;
+    font-weight: bold;
+    line-height: 1.3;
+    color: var(--main-red);
+    transition: none;
+  }
+  
+  /* Links inside the dropdown */
+  .create-new:hover {
+    box-shadow: none;
+    outline: none;
+    font-weight: bold;
+    background-color: var(--main-red);
+    color: white;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index 4f87ffd7..d809dcf1 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -1,6 +1,11 @@
+<!-- 
+ This component defines the behavior and structure of the popup for image upload.
+ The popup presents various sections and information to the user about current image informaition.
+ The upload button is for user to upload image.
+  -->
 <template>
   <div v-if="showModal" class="popup">
-    <div v-if="inUpload" class="popup-inner">
+    <div v-if="inUpload" key="inUpload" class="popup-inner">
       <div class="toolbar">
         <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
         <div class="toolbar-item">
@@ -18,7 +23,7 @@
         <button class="disable-button">Upload</button>
       </div>
     </div>
-    <div v-else-if="showResult" class="popup-inner">
+    <div v-else-if="showResult" key="showResult" class="popup-inner">
       showresult
       <div class="toolbar">
         <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
@@ -31,7 +36,7 @@
       </div>
       <div class="message">{{ resultMessage }}</div>
     </div>
-    <div v-else-if="uploadFinish" class="popup-inner">
+    <div v-else-if="uploadFinish" key="uploadFinish" class="popup-inner">
       uploadfinish
       <h2 class="message">{{ $t('upload.popup.uploadSuccess') }}</h2>
       <h4 class="message">{{ $t('upload.popup.view') }}
@@ -258,7 +263,8 @@ export default {
         this.source = "";
       }
       this.filenameNoUnderscore = this.filename.replace(/[_]/g, " ");
-      this.filename = encodeURIComponent(this.filename.replace(/\s/g, "_"));
+      // this.filename = encodeURIComponent(this.filename.replace(/\s/g, "_"));
+      this.filename = this.filename.replace(/\s/g, "_");
       this.licenseTemplate = element.licenseTemplate;
       for (var statement of this.$store.state.wikidocumentaries.wikidata
         .statements) {

From 57182313089d0a15ac50c2b11cab9c9d1318a5a9 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Thu, 31 Aug 2023 05:38:16 -0700
Subject: [PATCH 15/33] change request params with finnaId

---
 src/components/authentication/UserProfile.vue |  1 -
 src/components/upload/Popup.vue               | 15 ++++++---------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/authentication/UserProfile.vue b/src/components/authentication/UserProfile.vue
index e205f5cb..8d6ffe55 100644
--- a/src/components/authentication/UserProfile.vue
+++ b/src/components/authentication/UserProfile.vue
@@ -16,7 +16,6 @@
 
 <script>
 import ToolbarMenu from '@/components/menu/ToolbarMenu';
-var request = require('request').defaults({jar: true});
 
 export default {
     name: 'UserProfile',
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index d809dcf1..000bcdba 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -164,9 +164,6 @@
         <div v-if="licenseTemplate"><button class="button" @click="getCsrfToken">
             Upload
           </button>
-          <button class="button" @click="print">
-            print
-          </button>
         </div>
         <div v-else><button class="disable-button">
             Upload
@@ -213,7 +210,8 @@ export default {
       imgDepict: "",
       imgDepictUrl: "",
       response: "",
-      commonsUrl: ""
+      commonsUrl: "",
+      finnaId: ""
     };
   },
   components: {
@@ -276,6 +274,7 @@ export default {
       }
       this.imgDepict = this.$store.state.wikidocumentaries.title;
       this.imgDepictUrl = 'https://www.wikidata.org/wiki/' + this.$store.state.wikidocumentaries.wikidataId;
+      this.finnaId = element.id;
       console.log(element.id)
     },
     hide() {
@@ -307,8 +306,7 @@ export default {
         url: "/download",
         method: "get",
         params: {
-          filename: this.filename,
-          downloadURL: downloadURL
+          finnaId: this.finnaId,
         }
       };
       let response = await axios.request(requestConfig);
@@ -327,7 +325,7 @@ export default {
         url: "/deleteFile",
         method: "get",
         params: {
-          filename: this.filename
+          finnaId: this.finnaId,
         }
       };
       let response = axios.request(requestConfig);
@@ -347,9 +345,8 @@ export default {
         params: {
           token: localStorage.getItem("access_token"),
           csrf_token: csrf_token,
-          filename: this.filename,
+          finnaId: this.finnaId,
           text: text,
-          downloadURL: downloadURL
         }
       };
       let response = await axios.request(requestConfig);

From e0c5504fd4c331697df19d2f67d6692f42a36e92 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Thu, 31 Aug 2023 23:18:52 -0700
Subject: [PATCH 16/33] add comment

---
 src/components/authentication/Login.vue        | 3 +++
 src/components/authentication/LoginSuccess.vue | 4 +++-
 src/components/authentication/UserProfile.vue  | 3 ++-
 src/components/upload/ItemPullDown.vue         | 3 ++-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index 690e86db..cfbcfc62 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -1,3 +1,6 @@
+<!-- The Login component is implement for users to initiate the login process.
+It presents a "Login" button within the toolbar menu, which, when clicked, redirects the user to the
+authentication page. After successful login, the user is redirected back to the previous page. -->
 <template>
      <ToolbarMenu
         icon="wikiglyph-user-inactive"
diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
index 872d1ee5..5dea0b1d 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -1,6 +1,8 @@
+<!-- The LoginSuccess Vue.js component manages the post-login process. It is responsible for acquiring
+an access token, retrieving user profile information, and redirecting the user back to the previous page.
+This component also provides a loading animation, which is modified from wait-page, with a success message. -->
 <template>
   <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>
diff --git a/src/components/authentication/UserProfile.vue b/src/components/authentication/UserProfile.vue
index 8d6ffe55..7864e053 100644
--- a/src/components/authentication/UserProfile.vue
+++ b/src/components/authentication/UserProfile.vue
@@ -1,4 +1,5 @@
-
+<!--  This Vue.js component represents a user profile element in a toolbar menu.
+ It displays the user's name and provides an option to log out. -->
 <template>
 <div>
     <ToolbarMenu
diff --git a/src/components/upload/ItemPullDown.vue b/src/components/upload/ItemPullDown.vue
index f8895156..f128a194 100644
--- a/src/components/upload/ItemPullDown.vue
+++ b/src/components/upload/ItemPullDown.vue
@@ -1,5 +1,6 @@
 <!-- 
- This component is the pull down.
+ This component is the pull down in popup.
+ It is a modified version of src/components/Dataselect.vue.
  In this pull down, user can search for topics, select a value for
  the parent component and create a new topic.
   -->

From 1478d2fd9313372a548b1b20d8c51bdcddbe74ee Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Thu, 31 Aug 2023 23:33:55 -0700
Subject: [PATCH 17/33] Delete Oauth.js

---
 src/Oauth.js | 284 ---------------------------------------------------
 1 file changed, 284 deletions(-)
 delete mode 100644 src/Oauth.js

diff --git a/src/Oauth.js b/src/Oauth.js
deleted file mode 100644
index b6c541ac..00000000
--- a/src/Oauth.js
+++ /dev/null
@@ -1,284 +0,0 @@
-// 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()
-}
-

From 5825b9481aa45d5c6e8e5d01dfdc1f5204ffcd59 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Mon, 4 Sep 2023 13:38:29 +0300
Subject: [PATCH 18/33] Wait until login response is handled before redirecting

---
 src/components/authentication/LoginSuccess.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
index 5dea0b1d..5a2e7357 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -57,7 +57,8 @@ export default {
           Authorization: "Bearer " + localStorage.getItem("access_token")
         }
       });
-      response.json().then(c => localStorage.setItem("username", c.username));
+      const body = await response.json();
+      localStorage.setItem("username", body.username);
     },
     returnToPage(){
       let url = localStorage.getItem('previouspage');

From 47d6ddcd3173da900b89a5c8e753bc03b5d78f53 Mon Sep 17 00:00:00 2001
From: zexigong <108034351+zexigong@users.noreply.github.com>
Date: Mon, 4 Sep 2023 19:00:53 -0700
Subject: [PATCH 19/33] add translation

---
 src/components/authentication/Login.vue        | 11 ++++++-----
 src/components/authentication/LoginSuccess.vue |  4 ++--
 src/components/authentication/UserProfile.vue  | 11 +++++++----
 src/components/upload/ItemPullDown.vue         |  2 +-
 src/components/upload/Popup.vue                |  8 ++++----
 src/store/translation/en.json                  | 15 ++++++++++++++-
 6 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index cfbcfc62..a96723a7 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -1,15 +1,15 @@
-<!-- The Login component is implement for users to initiate the login process.
+<!-- The Login component is for users to initiate the login process.
 It presents a "Login" button within the toolbar menu, which, when clicked, redirects the user to the
 authentication page. After successful login, the user is redirected back to the previous page. -->
 <template>
      <ToolbarMenu
         icon="wikiglyph-user-inactive"
-        tooltip="Login"
+        :tooltip="$t('login.loginMenu.tooltip')"
         :translateItems="false"
-        :items="[{id:'login', text:'Log In'}]"
+        :items="[{id:'login', text:itemtext}]"
         @doMenuItemAction="getCode"
     >
-        <div slot="menu-title">User Profile</div>
+        <div slot="menu-title">{{ $t('login.loginMenu.title') }}</div>
     </ToolbarMenu>
 </template>
 
@@ -21,7 +21,8 @@ export default {
         return{
             // This is a public app with upload and edit grant
             CLIENT_ID : "f2aa70edfeb48a0eb08614c69b9148b4",
-            CLIENT_SECRET:"48830e519cfc29240c9291a7f301e437d0355958"
+            CLIENT_SECRET:"48830e519cfc29240c9291a7f301e437d0355958",
+            itemtext: this.$t('login.loginMenu.item')
         }
     },
     components: {
diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
index 5dea0b1d..62a2f637 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -1,4 +1,4 @@
-<!-- The LoginSuccess Vue.js component manages the post-login process. It is responsible for acquiring
+<!-- The LoginSuccess component manages the post-login process. It is responsible for acquiring
 an access token, retrieving user profile information, and redirecting the user back to the previous page.
 This component also provides a loading animation, which is modified from wait-page, with a success message. -->
 <template>
@@ -15,7 +15,7 @@ This component also provides a loading animation, which is modified from wait-pa
       <div class="lds-heart">
         <div></div>
       </div>
-      <div class="message">Login successful. You are being redirected back to Wikidocumentaries.</div>
+      <div class="message">{{ $t('login.loginSuccess') }}</div>
     </div>
   </div>
 </template>
diff --git a/src/components/authentication/UserProfile.vue b/src/components/authentication/UserProfile.vue
index 7864e053..c772fb87 100644
--- a/src/components/authentication/UserProfile.vue
+++ b/src/components/authentication/UserProfile.vue
@@ -1,12 +1,12 @@
-<!--  This Vue.js component represents a user profile element in a toolbar menu.
+<!--  This component represents a user profile element in a toolbar menu.
  It displays the user's name and provides an option to log out. -->
 <template>
 <div>
     <ToolbarMenu
         icon="wikiglyph-user-active"
-        tooltip="Show profile"
+        :tooltip="$t('login.loginMenu.showProfile')"
         :translateItems="false"
-        :items="[{id:'logout', text:'Log Out'}]"
+        :items="[{id:'logout', text: itemtext }]"
         @doMenuItemAction="logOut"
     >
         <div slot="menu-title">{{name}}</div>
@@ -21,7 +21,10 @@ import ToolbarMenu from '@/components/menu/ToolbarMenu';
 export default {
     name: 'UserProfile',
     data() {
-        return{    name: '',};
+        return{    
+            name: '',
+            itemtext: this.$t('login.loginMenu.logout')
+    };
 
   },
     mounted() {
diff --git a/src/components/upload/ItemPullDown.vue b/src/components/upload/ItemPullDown.vue
index f128a194..4c922e26 100644
--- a/src/components/upload/ItemPullDown.vue
+++ b/src/components/upload/ItemPullDown.vue
@@ -38,7 +38,7 @@
             <br>
             <span class="topic-summary">{{ getSummary(topic) }}</span>
             <br>
-            <a :href="topic.wikidocumentarieslink" target="_blank">go to topic page</a>
+            <a :href="topic.wikidocumentarieslink" target="_blank">{{ $t('upload.popup.topicPage') }}</a>
             </div>
           </div>
           <a slot="menu-link" :href="newLink" class="create-new" target="_blank">{{ $t('LandingPage.createNew') }}</a>
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index 000bcdba..d8f90938 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -20,7 +20,7 @@
       <div class="message">{{ filenameNoUnderscore }}</div>
       <div>
         <button class="button" @click.prevent="hide">{{ $t('upload.popup.cancel') }}</button>
-        <button class="disable-button">Upload</button>
+        <button class="disable-button">{{ $t('upload.popup.upload') }}</button>
       </div>
     </div>
     <div v-else-if="showResult" key="showResult" class="popup-inner">
@@ -162,17 +162,17 @@
 
         </div>
         <div v-if="licenseTemplate"><button class="button" @click="getCsrfToken">
-            Upload
+            {{ $t('upload.popup.upload') }}
           </button>
         </div>
         <div v-else><button class="disable-button">
-            Upload
+          {{ $t('upload.popup.upload') }}
           </button>
           <div class="licenseMessage">
             <div class="toolbar">
               <h4 class="popupTip">{{ $t('upload.popup.cannotUpload') }}
                 <a href='https://github.com/Wikidocumentaries/wikidocumentaries-ui/issues/new/choose'
-                  target="_blank">Github</a>
+                  target="_blank">{{ $t('upload.popup.Github') }}</a>
               </h4>
             </div>
           </div>
diff --git a/src/store/translation/en.json b/src/store/translation/en.json
index 795b8bd1..a89b17bd 100644
--- a/src/store/translation/en.json
+++ b/src/store/translation/en.json
@@ -534,9 +534,22 @@
             "uploadSuccess": "uploadSuccess",
             "view": "View",
             "inWikimediaCommons": "in Wikimedia Commons",
-            "ok": "OK"
+            "ok": "OK",
+            "Github": "Github",
+            "topicPage": "go to topic page"
         }
     },
+    "login": {
+        "loginMenu": {
+            "title": "User Profile",
+            "tooltip": "Login",
+            "item": "Log In",
+            "logout": "Log Out",
+            "showProfile": "Show profile"
+
+        },
+        "loginSuccess": "Login successful. You are being redirected back to Wikidocumentaries."
+    },
     "general": {
         "wikidocumentaries": "Wikidocumentaries",
         "ok": "OK",

From 0edd3f79cb5cbd5c6582eabcc8bcd4b9c4c4f423 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Tue, 5 Sep 2023 11:21:47 +0300
Subject: [PATCH 20/33] Fix popup progression by removing template syntax error

---
 src/components/upload/Popup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index d8f90938..bf0acecf 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -40,7 +40,7 @@
       uploadfinish
       <h2 class="message">{{ $t('upload.popup.uploadSuccess') }}</h2>
       <h4 class="message">{{ $t('upload.popup.view') }}
-        <a href={{ commonsUrl }} target="_blank">{{ filenameNoUnderscore }}</a>
+        <a :href="commonsUrl" target="_blank">{{ filenameNoUnderscore }}</a>
         {{ $t('upload.popup.inWikimediaCommons') }}
       </h4>
       <div><button class="button" @click.prevent="hide">

From ce44053d708060629af0c665326f9fec30acb3a3 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Tue, 5 Sep 2023 11:38:47 +0300
Subject: [PATCH 21/33] Remove an unnecessary debug function

---
 src/components/upload/Popup.vue | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index bf0acecf..b85654af 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -382,17 +382,6 @@ export default {
     onClickChild(value) {
       this.author = value;
     },
-    print() {
-      let infoTemplate = `{{Information|description=${this.title}|date=${this.date
-        }|source=${this.source}|author=${this.author}}}`;
-      let category = `[[Category:Images uploaded from Wikidocumentaries]][[Category:${this.category
-        }]]`;
-      console.log(infoTemplate);
-      console.log(this.licenseTemplate);
-      console.log(category);
-      console.log(this.filename);
-      console.log(this.filenameNoUnderscore);
-    }
   }
 };
 </script>

From d6b6d76bc5b4966628853ab038e0b91024ad5273 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Tue, 5 Sep 2023 11:39:55 +0300
Subject: [PATCH 22/33] Produce prettier wikitext by including linebreaks

---
 src/components/upload/Popup.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index b85654af..07dfa385 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -332,11 +332,20 @@ export default {
     },
     async callupload(csrf_token) {
       this.currentProcess = "Uploading";
-      let infoTemplate = `{{Information|description=${this.title}|date=${this.date
-        }|source=${this.source}|author=${this.author}}}`;
-      let category = `[[Category:Images uploaded from Wikidocumentaries]][[Category:${this.category
-        }]]`;
-      let text = infoTemplate + this.licenseTemplate + category;
+      let infoTemplate = `
+{{Information
+|description=${this.title}
+|date=${this.date}
+|source=${this.source}
+|author=${this.author}
+}}`;
+      let category = `
+[[Category:Images uploaded from Wikidocumentaries]]
+[[Category:${this.category}]]`;
+      let text = `
+${infoTemplate}
+${this.licenseTemplate}
+${category}`;
       let downloadURL = this.element.downloadURL;
       let requestConfig = {
         baseURL: this.$store.state.BASE_URL,

From 4f4f146bc93a97e101a7644c70204be756144fbc Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Tue, 5 Sep 2023 11:42:34 +0300
Subject: [PATCH 23/33] Fix logic to include the year always when we have one

---
 src/components/upload/Popup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index 07dfa385..35a7b706 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -243,7 +243,7 @@ export default {
       } else {
         this.author = "";
       }
-      if (element.datecreated[0]) {
+      if (element.year) {
         this.date =
           element.year != "" && element.year != null ? element.year : "";
         this.filename += "_" + this.date;

From 9d76d5e6c84d557c518017624ecaa8498f417c04 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Tue, 5 Sep 2023 11:43:41 +0300
Subject: [PATCH 24/33] Add the FinnaReview template to copyrights from Finna

---
 src/components/upload/Popup.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index 35a7b706..79875fcf 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -345,6 +345,7 @@ export default {
       let text = `
 ${infoTemplate}
 ${this.licenseTemplate}
+{{FinnaReview}}
 ${category}`;
       let downloadURL = this.element.downloadURL;
       let requestConfig = {

From d766d9ede6e9b20674b20135bcf9f1b648e87933 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Tue, 5 Sep 2023 19:40:23 +0300
Subject: [PATCH 25/33] Support OAUTH_CLIENT{_ID,_SECRET} environment variables

---
 config/prod.env.js                             | 4 +++-
 src/components/authentication/Login.vue        | 3 +--
 src/components/authentication/LoginSuccess.vue | 7 +++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/config/prod.env.js b/config/prod.env.js
index 15a0fa36..132ef011 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -2,5 +2,7 @@
 process = require('process');
 module.exports = {
   NODE_ENV: '"production"',
-  API_URL: JSON.stringify(process.env.API_URL)
+  API_URL: JSON.stringify(process.env.API_URL),
+  OAUTH_CLIENT_ID: JSON.stringify(process.env.OAUTH_CLIENT_ID),
+  OAUTH_CLIENT_SECRET: JSON.stringify(process.env.OAUTH_CLIENT_SECRET),
 };
diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index a96723a7..594b5afd 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -20,8 +20,7 @@ export default {
     data(){
         return{
             // This is a public app with upload and edit grant
-            CLIENT_ID : "f2aa70edfeb48a0eb08614c69b9148b4",
-            CLIENT_SECRET:"48830e519cfc29240c9291a7f301e437d0355958",
+            CLIENT_ID : process.env.OAUTH_CLIENT_ID || "f2aa70edfeb48a0eb08614c69b9148b4",
             itemtext: this.$t('login.loginMenu.item')
         }
     },
diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
index 3fc5c624..f9465809 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -26,10 +26,9 @@ export default {
   name: "LoginSuccess",
   data() {
     return {
-      CLIENT_ID : "f2aa70edfeb48a0eb08614c69b9148b4",
-      CLIENT_SECRET:"48830e519cfc29240c9291a7f301e437d0355958",
-      profileUrl:
-        "https://meta.wikimedia.org/w/rest.php/oauth2/resource/profile"
+      CLIENT_ID: process.env.OAUTH_CLIENT_ID || "f2aa70edfeb48a0eb08614c69b9148b4",
+      CLIENT_SECRET: process.env.OAUTH_CLIENT_SECRET || "48830e519cfc29240c9291a7f301e437d0355958",
+      profileUrl: "https://meta.wikimedia.org/w/rest.php/oauth2/resource/profile",
     };
   },
   methods: {

From 1a1212f667ab69e187ad78f7654c442c9c979093 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Tue, 5 Sep 2023 19:57:40 +0300
Subject: [PATCH 26/33] Add local copy of pkce-challenge 4.0.1 from NPM

---
 src/pkce-challenge.js | 98 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 src/pkce-challenge.js

diff --git a/src/pkce-challenge.js b/src/pkce-challenge.js
new file mode 100644
index 00000000..21517ab3
--- /dev/null
+++ b/src/pkce-challenge.js
@@ -0,0 +1,98 @@
+// Copy of pkce-challenge 4.0.1 from NPM for use in OAuth 2 login
+/*
+MIT License
+
+Copyright (c) 2019 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+const crypto = globalThis.crypto?.webcrypto ?? // Node.js 16 REPL has globalThis.crypto as node:crypto
+    globalThis.crypto ?? // web browsers and Node.js 18+ 
+    (await import("node:crypto")).webcrypto; // Node.js 16 non-REPL
+/**
+ * Creates an array of length `size` of random bytes
+ * @param size
+ * @returns Array of random ints (0 to 255)
+ */
+function getRandomValues(size) {
+    return crypto.getRandomValues(new Uint8Array(size));
+}
+/** Generate cryptographically strong random string
+ * @param size The desired length of the string
+ * @returns The random string
+ */
+function random(size) {
+    const mask = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._~";
+    let result = "";
+    const randomUints = getRandomValues(size);
+    for (let i = 0; i < size; i++) {
+        // cap the value of the randomIndex to mask.length - 1
+        const randomIndex = randomUints[i] % mask.length;
+        result += mask[randomIndex];
+    }
+    return result;
+}
+/** Generate a PKCE challenge verifier
+ * @param length Length of the verifier
+ * @returns A random verifier `length` characters long
+ */
+function generateVerifier(length) {
+    return random(length);
+}
+/** Generate a PKCE code challenge from a code verifier
+ * @param code_verifier
+ * @returns The base64 url encoded code challenge
+ */
+export async function generateChallenge(code_verifier) {
+    const buffer = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(code_verifier));
+    // Generate base64url string
+    // btoa is deprecated in Node.js but is used here for web browser compatibility
+    // (which has no good replacement yet, see also https://github.com/whatwg/html/issues/6811)
+    return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+        .replace(/\//g, '_')
+        .replace(/\+/g, '-')
+        .replace(/=/g, '');
+}
+/** Generate a PKCE challenge pair
+ * @param length Length of the verifer (between 43-128). Defaults to 43.
+ * @returns PKCE challenge pair
+ */
+export default async function pkceChallenge(length) {
+    if (!length)
+        length = 43;
+    if (length < 43 || length > 128) {
+        throw `Expected a length between 43 and 128. Received ${length}.`;
+    }
+    const verifier = generateVerifier(length);
+    const challenge = await generateChallenge(verifier);
+    return {
+        code_verifier: verifier,
+        code_challenge: challenge,
+    };
+}
+/** Verify that a code_verifier produces the expected code challenge
+ * @param code_verifier
+ * @param expectedChallenge The code challenge to verify
+ * @returns True if challenges are equal. False otherwise.
+ */
+export async function verifyChallenge(code_verifier, expectedChallenge) {
+    const actualChallenge = await generateChallenge(code_verifier);
+    return actualChallenge === expectedChallenge;
+}

From d424498b07064be9dbb6cc6b139b5803511f26c9 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Tue, 5 Sep 2023 19:59:26 +0300
Subject: [PATCH 27/33] Fix pkce-challenge to work in our build system

---
 src/pkce-challenge.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pkce-challenge.js b/src/pkce-challenge.js
index 21517ab3..3327ab5d 100644
--- a/src/pkce-challenge.js
+++ b/src/pkce-challenge.js
@@ -1,8 +1,10 @@
 // Copy of pkce-challenge 4.0.1 from NPM for use in OAuth 2 login
+// The package as installed didn't work in our build system
+
 /*
 MIT License
 
-Copyright (c) 2019 
+Copyright (c) 2019
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -23,9 +25,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
 
-const crypto = globalThis.crypto?.webcrypto ?? // Node.js 16 REPL has globalThis.crypto as node:crypto
-    globalThis.crypto ?? // web browsers and Node.js 18+ 
-    (await import("node:crypto")).webcrypto; // Node.js 16 non-REPL
+const crypto = globalThis.crypto; // WDX: modified to only work on browsers
+
 /**
  * Creates an array of length `size` of random bytes
  * @param size

From fc5add08e6e907f69f8ba9b79902d9ce0e4a10f2 Mon Sep 17 00:00:00 2001
From: Tuukka Hastrup <Tuukka.Hastrup@iki.fi>
Date: Tue, 5 Sep 2023 19:51:16 +0300
Subject: [PATCH 28/33] Add OAuth code challenge for our non-confidential app

---
 src/components/authentication/Login.vue       | 19 ++++++++++++++++---
 .../authentication/LoginSuccess.vue           |  2 ++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/authentication/Login.vue b/src/components/authentication/Login.vue
index 594b5afd..1e9b2810 100644
--- a/src/components/authentication/Login.vue
+++ b/src/components/authentication/Login.vue
@@ -14,6 +14,8 @@ authentication page. After successful login, the user is redirected back to the
 </template>
 
 <script>
+import pkceChallenge from "@/pkce-challenge";
+
 import ToolbarMenu from '@/components/menu/ToolbarMenu'
 export default {
     name: 'LoginButton',
@@ -28,9 +30,20 @@ export default {
         ToolbarMenu,
     },
     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";
+        async getCode() {
+            localStorage.setItem('previouspage', window.location.href);
+
+            const challenge = await pkceChallenge();
+            localStorage.setItem('codeVerifier', challenge.code_verifier);
+
+            const params = new URLSearchParams();
+            params.append("client_id", this.CLIENT_ID);
+            params.append("response_type", "code");
+            params.append("code_challenge", challenge.code_challenge);
+            params.append("code_challenge_method", "S256");
+
+            // Redirect the browser to the OAuth 2 login page
+            const url = "https://meta.wikimedia.org/w/rest.php/oauth2/authorize?" + params;
             window.location.href = url;
         },
     }
diff --git a/src/components/authentication/LoginSuccess.vue b/src/components/authentication/LoginSuccess.vue
index f9465809..71f3d8af 100644
--- a/src/components/authentication/LoginSuccess.vue
+++ b/src/components/authentication/LoginSuccess.vue
@@ -40,6 +40,7 @@ export default {
       params.append("code", code);
       params.append("client_id", this.CLIENT_ID);
       params.append("client_secret", this.CLIENT_SECRET);
+      params.append("code_verifier", localStorage.codeVerifier);
       console.log(params);
       const fetchDataRes = await axios.request({
         url: "/w/rest.php/oauth2/access_token",
@@ -49,6 +50,7 @@ export default {
       });
       console.log(fetchDataRes.data.access_token);
       localStorage.setItem("access_token", fetchDataRes.data.access_token);
+      localStorage.removeItem('codeVerifier');
     },
     async getUserProfile() {
       let response = await fetch(this.profileUrl, {

From 0ea9a31155f4507fd36680495cd0b1c2e7c519fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susanna=20=C3=85n=C3=A4s?= <susanna.anas@gmail.com>
Date: Sat, 9 Sep 2023 18:12:50 +0300
Subject: [PATCH 29/33] Update en.json

Style changes
---
 src/App.vue                                 |  29 ++-
 src/components/MainPage.vue                 |   2 +-
 src/components/image_viewer/ImageViewer.vue |   4 +-
 src/components/topic_page/Banner.vue        |  12 -
 src/components/upload/ItemPullDown.vue      |   9 +
 src/components/upload/Popup.vue             | 264 +++++++++++++-------
 src/store/translation/en.json               |  24 +-
 7 files changed, 220 insertions(+), 124 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7870828b..f0a0c566 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -169,7 +169,7 @@ a:hover {
 .toolbar {
   display: flex;
   color: #333;
-  padding: 0 20px;
+  padding-left: 20px;
   min-height: 45px; /* Normal height, but line wrap can grow this */
   align-items: flex-start; /* We want multiple lines to align to the top */
   line-height: 1.2;
@@ -187,8 +187,8 @@ a:hover {
   justify-content: center;
   cursor: pointer;
   width: 45px;
-  padding-top: 9px; /* To adjust baseline to a good position */
-  padding-bottom: 6px; /* For visual symmetry */
+  height: 45px;
+  align-items: center;
 }
 
 .toolbar-item-a {
@@ -717,6 +717,19 @@ i.wikiglyph {
   -webkit-column-break-inside: avoid;
 }
 
+.upload-button {
+    padding: 10px 15px;
+    background-color: var(--main-red);
+    color: white;
+    font-weight: 600;
+    border-radius: 3px;
+    white-space: nowrap;
+}
+
+a:hover .upload-button {
+    background-color: var(--main-orange);
+}
+
 .data-select {
   display: block;
   background: var(--main-red);
@@ -729,6 +742,16 @@ i.wikiglyph {
   /* transition: background 80ms ease-in, color 80ms ease-in; */
 }
 
+.data-select a {
+  color:white;
+  font-size: 0.7em;
+}
+
+.data-select a:hover {
+  box-shadow: none;
+  text-decoration: underline;
+}
+
 .data-button {
   display: inline-block;
   position: absolute;
diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue
index a90dbdd7..b0776f73 100644
--- a/src/components/MainPage.vue
+++ b/src/components/MainPage.vue
@@ -159,7 +159,7 @@ a.main-button:hover {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 20px;
+    padding-left: 20px;
 }
 
 /*. main-toolbar-buttons {
diff --git a/src/components/image_viewer/ImageViewer.vue b/src/components/image_viewer/ImageViewer.vue
index 2889cfae..d9ce8ba7 100644
--- a/src/components/image_viewer/ImageViewer.vue
+++ b/src/components/image_viewer/ImageViewer.vue
@@ -495,14 +495,14 @@ export default {
       topicVectorLayer: null,
       // showLinks: true,
       toolbarActionMenuItems: [
-        {
+/*         {
           id: MENU_ACTIONS.SELECT_HEADER,
           text: "topic_page.TopicImages.imagesActionMenu.selectFeatured"
         },
         {
           id: MENU_ACTIONS.GEOLOCATE,
           text: "topic_page.TopicImages.imagesActionMenu.doGeolocatingText"
-        },
+        }, */
         {
           id: MENU_ACTIONS.UPLOAD,
           text: "topic_page.TopicImages.imagesActionMenu.upload"
diff --git a/src/components/topic_page/Banner.vue b/src/components/topic_page/Banner.vue
index c5929050..f749d562 100644
--- a/src/components/topic_page/Banner.vue
+++ b/src/components/topic_page/Banner.vue
@@ -389,18 +389,6 @@ export default {
     text-align: center;
 }
 
-.upload-button {
-    padding: 10px 15px;
-    background-color: var(--main-red);
-    color: white;
-    font-weight: 600;
-    border-radius: 3px;
-    white-space: nowrap;
-}
-
-a:hover .upload-button {
-    background-color: var(--main-orange);
-}
 .noshadow  {
 	-webkit-box-shadow: none;
 	-moz-box-shadow: none;
diff --git a/src/components/upload/ItemPullDown.vue b/src/components/upload/ItemPullDown.vue
index 4c922e26..3d8e21b2 100644
--- a/src/components/upload/ItemPullDown.vue
+++ b/src/components/upload/ItemPullDown.vue
@@ -272,6 +272,15 @@
     background-color: var(--main-red);
     color: white;
   }
+
+  .drop-option:hover a {
+    color: var(--main-txt-color);
+  }
+
+  .drop-option:hover a:hover {
+    box-shadow:none;
+    color:white;
+  }
   
   .topic-title {
     font-weight: bold;
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index 79875fcf..fe679add 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -5,95 +5,128 @@
   -->
 <template>
   <div v-if="showModal" class="popup">
+    <!-- While uploading -->
     <div v-if="inUpload" key="inUpload" class="popup-inner">
       <div class="toolbar">
-        <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
+        <h1 class="header-title">{{ $t("upload.popup.popupTitle") }}</h1>
         <div class="toolbar-item">
           <a href="#" class="toolbar-item-a">
             <i class="wikiglyph wikiglyph-cross"></i>
           </a>
-          <span class="tooltip">{{ $t('upload.popup.uploadInProgress') }}</span>
+          <span class="tooltip">{{ $t("upload.popup.uploadInProgress") }}</span>
         </div>
       </div>
       <InUpload></InUpload>
-      <div class="message">{{ currentProcess }}</div>
-      <div class="message">{{ filenameNoUnderscore }}</div>
-      <div>
-        <button class="button" @click.prevent="hide">{{ $t('upload.popup.cancel') }}</button>
-        <button class="disable-button">{{ $t('upload.popup.upload') }}</button>
+      <div class="messages">
+        <div class="status">{{ currentProcess }}</div>
+        <div class="message break">{{ filenameNoUnderscore }}</div>
+      </div>
+      <div class="actions">
+        <div>
+          <button class="button cancel" @click.prevent="hide">
+            {{ $t("upload.popup.cancel") }}
+          </button>
+        </div>
       </div>
     </div>
+    <!-- Error: Upload response -->
     <div v-else-if="showResult" key="showResult" class="popup-inner">
-      showresult
       <div class="toolbar">
-        <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
+        <h1 class="header-title">{{ $t("upload.popup.popupTitle") }}</h1>
         <div class="toolbar-item" @click.prevent="hide">
           <a href="#" class="toolbar-item-a">
             <i class="wikiglyph wikiglyph-cross"></i>
           </a>
-          <span class="tooltip">{{ $t('upload.popup.closePopup') }}</span>
+          <span class="tooltip">{{ $t("upload.popup.closePopup") }}</span>
         </div>
       </div>
-      <div class="message">{{ resultMessage }}</div>
+      <div class="actions alert">
+        <div class="message">{{ resultMessage }}</div>
+      </div>
     </div>
+    <!-- Upload successfully completed -->
     <div v-else-if="uploadFinish" key="uploadFinish" class="popup-inner">
-      uploadfinish
-      <h2 class="message">{{ $t('upload.popup.uploadSuccess') }}</h2>
-      <h4 class="message">{{ $t('upload.popup.view') }}
+      <div class="toolbar">
+        <h1 class="header-title">{{ $t("upload.popup.popupTitle") }}</h1>
+        <div class="toolbar-item" @click.prevent="hide">
+          <a href="#" class="toolbar-item-a">
+            <i class="wikiglyph wikiglyph-cross"></i>
+          </a>
+          <span class="tooltip">{{ $t("upload.popup.closePopup") }}</span>
+        </div>
+      </div>
+      <div class="messages">
+      <div class="message">{{ $t("upload.popup.uploadSuccess") }}</div>
+      <div class="message break">
+        {{ $t("upload.popup.view") }}
         <a :href="commonsUrl" target="_blank">{{ filenameNoUnderscore }}</a>
-        {{ $t('upload.popup.inWikimediaCommons') }}
-      </h4>
-      <div><button class="button" @click.prevent="hide">
-          {{ $t('upload.popup.ok') }}
-        </button></div>
+        {{ $t("upload.popup.inWikimediaCommons") }}
+      </div>
+      </div>
+      <div class="actions">
+        <button class="button upload" @click.prevent="hide">
+          {{ $t("upload.popup.ok") }}
+        </button>
+      </div>
     </div>
+    <!-- Normal flow -->
     <div v-else class="popup-inner">
       <div>
         <div class="toolbar">
-          <h1 class="header-title">{{ $t('upload.popup.popupTitle') }}</h1>
+          <h1 class="header-title">{{ $t("upload.popup.popupTitle") }}</h1>
           <div class="toolbar-item" @click.prevent="hide">
             <a href="#" class="toolbar-item-a">
               <i class="wikiglyph wikiglyph-cross"></i>
             </a>
-            <span class="tooltip">{{ $t('upload.popup.closePopup') }}</span>
+            <span class="tooltip">{{ $t("upload.popup.closePopup") }}</span>
           </div>
         </div>
-        <div class="toolbar">
-          <h4 class="popupTip">{{ $t('upload.popup.popupTip') }}</h4>
-        </div>
+
+        <!-- Introductory text -->
+        <div class="intro">{{ $t("upload.popup.intro") }}</div>
+
+        <!-- Metadata section -->
         <div class="columns">
           <div class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-view-details metadata-glyph"></i>
             </div>
             <div class="grid-text">
-              <div class="grid-item">{{ $t('upload.popup.filename') }}</div>
+              <div class="grid-item">{{ $t("upload.popup.filename") }}</div>
               <div class="data">
-                <div class="grid-body unedited">{{ filename }}</div>
+                <div class="grid-body unedited break">{{ filename }}</div>
               </div>
             </div>
-
           </div>
+
           <div class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-stripe-summary metadata-glyph"></i>
             </div>
             <div class="grid-text">
-              <div class="grid-item">{{ $t('imageViewer.imageMetadata.caption') }}</div>
-              <div class="data">
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.caption") }}
+              </div>
+              <div class="data break">
                 <div class="grid-body unedited">{{ title }}</div>
               </div>
             </div>
-
           </div>
+
           <div v-if="element.creators" class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-user-avatar metadata-glyph"></i>
             </div>
             <div class="grid-text">
-              <div class="grid-item">{{ $t('imageViewer.imageMetadata.creator') }}</div>
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.creator") }}
+              </div>
               <div class="grid-body unedited">
-                <ItemPullDown @clicked="onClickChild" class="grid-select value" v-bind:term="this.author">
+                <ItemPullDown
+                  @clicked="onClickChild"
+                  class="grid-select"
+                  v-bind:term="this.author"
+                >
                 </ItemPullDown>
               </div>
             </div>
@@ -104,7 +137,9 @@
               <i class="wikiglyph wikiglyph-production-date metadata-glyph"></i>
             </div>
             <div class="grid-text">
-              <div class="grid-item">{{ $t('imageViewer.imageMetadata.dateCreated') }}</div>
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.dateCreated") }}
+              </div>
               <div class="data">
                 <div class="grid-body unedited">{{ date }}</div>
               </div>
@@ -116,9 +151,13 @@
               <i class="wikiglyph wikiglyph-public-domain metadata-glyph"></i>
             </div>
             <div class="grid-text">
-              <div class="grid-item">{{ $t('imageViewer.imageMetadata.license') }}</div>
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.license") }}
+              </div>
               <div class="data">
-                <a :href="element.license_link" target="_blank">{{ license }}</a>
+                <a :href="element.license_link" target="_blank">{{
+                  license
+                }}</a>
               </div>
             </div>
           </div>
@@ -128,7 +167,7 @@
               <i class="wikiglyph wikiglyph-message metadata-glyph"></i>
             </div>
             <div class="grid-text">
-              <div class="grid-item">{{ $t('upload.popup.category') }}</div>
+              <div class="grid-item">{{ $t("upload.popup.category") }}</div>
               <div class="data">
                 <a :href="this.categoryLink" target="_blank">{{ category }}</a>
               </div>
@@ -140,7 +179,9 @@
               <i class="wikiglyph wikiglyph-article metadata-glyph"></i>
             </div>
             <div class="grid-text">
-              <div class="grid-item">{{ $t('imageViewer.imageMetadata.imageInfoPage') }}</div>
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.imageInfoPage") }}
+              </div>
               <div class="data break">
                 <a :href="element.infoURL" target="_blank">{{ source }}</a>
               </div>
@@ -153,27 +194,38 @@
               <i class="wikiglyph wikiglyph-depicted metadata-glyph"></i>
             </div>
             <div class="grid-text">
-              <div class="grid-item">{{ $t('imageViewer.imageMetadata.depicted') }}</div>
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.depicted") }}
+              </div>
               <div class="data">
-                <div class="grid-body unedited"><a :href="imgDepictUrl" target="_blank">{{ imgDepict }}</a></div>
+                <div class="grid-body unedited">
+                  <a :href="imgDepictUrl" target="_blank">{{ imgDepict }}</a>
+                </div>
               </div>
             </div>
           </div>
-
         </div>
-        <div v-if="licenseTemplate"><button class="button" @click="getCsrfToken">
-            {{ $t('upload.popup.upload') }}
-          </button>
+        <!-- Show upload button(s) -->
+        <div v-if="licenseTemplate">
+          <div class="actions">
+            <button class="button cancel" @click.prevent="hide">
+              {{ $t("upload.popup.cancel") }}
+            </button>
+            <button class="button upload" @click="getCsrfToken">
+              {{ $t("upload.popup.upload") }}
+            </button>
+          </div>
         </div>
-        <div v-else><button class="disable-button">
-          {{ $t('upload.popup.upload') }}
-          </button>
-          <div class="licenseMessage">
-            <div class="toolbar">
-              <h4 class="popupTip">{{ $t('upload.popup.cannotUpload') }}
-                <a href='https://github.com/Wikidocumentaries/wikidocumentaries-ui/issues/new/choose'
-                  target="_blank">{{ $t('upload.popup.Github') }}</a>
-              </h4>
+        <!-- Error: Incompatible licence -->
+        <div v-else>
+          <div class="actions alert">
+            <div class="message">
+              {{ $t("upload.popup.cannotUpload") }}
+              <a
+                href="https://github.com/Wikidocumentaries/wikidocumentaries-ui/issues/new/choose"
+                target="_blank"
+                >{{ $t("upload.popup.Github") }}</a
+              >
             </div>
           </div>
         </div>
@@ -211,12 +263,12 @@ export default {
       imgDepictUrl: "",
       response: "",
       commonsUrl: "",
-      finnaId: ""
+      finnaId: "",
     };
   },
   components: {
     ItemPullDown,
-    InUpload
+    InUpload,
   },
   methods: {
     show(element) {
@@ -273,9 +325,11 @@ export default {
         }
       }
       this.imgDepict = this.$store.state.wikidocumentaries.title;
-      this.imgDepictUrl = 'https://www.wikidata.org/wiki/' + this.$store.state.wikidocumentaries.wikidataId;
+      this.imgDepictUrl =
+        "https://www.wikidata.org/wiki/" +
+        this.$store.state.wikidocumentaries.wikidataId;
       this.finnaId = element.id;
-      console.log(element.id)
+      console.log(element.id);
     },
     hide() {
       this.showModal = false;
@@ -288,8 +342,8 @@ export default {
         url: "/csrfToken",
         method: "get",
         params: {
-          token: localStorage.getItem("access_token")
-        }
+          token: localStorage.getItem("access_token"),
+        },
       };
       let response = await axios.request(requestConfig);
       console.log(response.data.csrf_token);
@@ -307,7 +361,7 @@ export default {
         method: "get",
         params: {
           finnaId: this.finnaId,
-        }
+        },
       };
       let response = await axios.request(requestConfig);
       console.log(response.data);
@@ -326,7 +380,7 @@ export default {
         method: "get",
         params: {
           finnaId: this.finnaId,
-        }
+        },
       };
       let response = axios.request(requestConfig);
     },
@@ -357,7 +411,7 @@ ${category}`;
           csrf_token: csrf_token,
           finnaId: this.finnaId,
           text: text,
-        }
+        },
       };
       let response = await axios.request(requestConfig);
       console.log(response.data.uploadResponse);
@@ -383,8 +437,8 @@ ${category}`;
         params: {
           token: localStorage.getItem("access_token"),
           title: title,
-          depictId: this.$store.state.wikidocumentaries.wikidataId
-        }
+          depictId: this.$store.state.wikidocumentaries.wikidataId,
+        },
       };
       let response = await axios.request(requestConfig);
       this.inUpload = false;
@@ -392,7 +446,7 @@ ${category}`;
     onClickChild(value) {
       this.author = value;
     },
-  }
+  },
 };
 </script>
 <style scoped>
@@ -411,7 +465,6 @@ ${category}`;
 
 .popup-inner {
   background: #fff;
-  padding: 30px;
   max-width: 1000px;
 }
 
@@ -445,7 +498,7 @@ ${category}`;
 .columns {
   column-width: 400px;
   column-gap: 1.5em;
-  padding: 10px 20px 15px 20px;
+  padding: 10px 20px 0 20px;
 }
 
 .break {
@@ -461,45 +514,68 @@ ${category}`;
   text-align: left;
 }
 
-.popupTip {
-  font-weight: lighter;
-  margin-top: 0px;
-  width: 600px;
-  text-align: left;
+.actions {
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  justify-content: flex-end;
 }
 
-.licenseMessage {
-  margin-bottom: 0px;
-  width: 600px;
-  display: inline-block;
+.alert {
+  background-color: var(--main-yellow);
+}
+
+.alert a {
+  color: var(--main-red);
+}
+
+.status {
+  font-weight: 600;
+  color: var(--main-red);
+}
+
+.messages {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+
+.message {
 }
 
 .button {
-  background-color: #249ad1;
   border: none;
-  color: white;
-  padding: 15px 32px;
+  border-radius: 3px;
+  white-space: nowrap;
+  padding: 10px 15px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
-  font-size: 18px;
-  font-weight: normal;
-  margin: 4px 2px;
+  font-weight: 600;
   cursor: pointer;
-  align-items: left;
+  font-size: var(--main-font-size);
+  line-height: var(--main-line-height);
 }
-
-.disable-button {
-  background-color: #777;
-  border: none;
+.upload, .cancel:hover {
+  background-color: var(--main-link-color);
   color: white;
-  padding: 15px 32px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 18px;
-  font-weight: normal;
-  margin: 4px 2px;
-  cursor: pointer;
+}
+
+.upload:hover {
+  background-color: var(--main-blue);
+}
+
+.disabled {
+  border:2px;
+  color: var(--main-blue);
+}
+
+.cancel {
+  border:2px solid var(--main-link-color);
+  color: var(--main-link-color);
+  background-color: white;
 }
 </style>
diff --git a/src/store/translation/en.json b/src/store/translation/en.json
index a89b17bd..8b9cea88 100644
--- a/src/store/translation/en.json
+++ b/src/store/translation/en.json
@@ -275,7 +275,7 @@
                 "doGeolocatingText": "Set the location...",
                 "showImageText": "Show image",
                 "selectFeatured": "Choose as a header image",
-                "upload" : "upload"
+                "upload" : "Upload to Commons"
             },
             "imagesRemoveMenu": {
                 "menuTitle": "Remove the image because...",
@@ -523,29 +523,29 @@
     "upload": {
         "popup": {
             "popupTitle": "Upload image",
-            "popupTip": "Verify the information and edit the texts if needed.",
+            "intro": "Verify the information and edit if needed.",
             "filename": "File name",
-            "upload": "Upload" ,
+            "upload": "Upload image" ,
             "closePopup": "Close",
-            "cannotUpload": "This image cannot be uploaded to Wikimedia Commons because the license is not in the list of allowed licenses. If you think this is an error, please [file an issue] on ",
+            "cannotUpload": "This image cannot be uploaded to Wikimedia Commons because the license is not in the list of allowed licenses. If you think this is an error, please file an issue on ",
             "uploadInProgress": "Upload in progress",
-            "cancel": "cancel",
+            "cancel": "Cancel",
             "category": "Category",
-            "uploadSuccess": "uploadSuccess",
+            "uploadSuccess": "Upload successful.",
             "view": "View",
             "inWikimediaCommons": "in Wikimedia Commons",
             "ok": "OK",
             "Github": "Github",
-            "topicPage": "go to topic page"
+            "topicPage": "View topic"
         }
     },
     "login": {
         "loginMenu": {
-            "title": "User Profile",
-            "tooltip": "Login",
-            "item": "Log In",
-            "logout": "Log Out",
-            "showProfile": "Show profile"
+            "title": "User profile",
+            "tooltip": "Log in",
+            "item": "Log in",
+            "logout": "Log out",
+            "showProfile": "Log out"
 
         },
         "loginSuccess": "Login successful. You are being redirected back to Wikidocumentaries."

From d97af486cc1e5c24ddb3be7fd889755a7fdf9ac4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susanna=20=C3=85n=C3=A4s?= <susanna.anas@gmail.com>
Date: Sat, 9 Sep 2023 19:47:56 +0300
Subject: [PATCH 30/33] Upload UI style changes

---
 src/App.vue                                 |   7 +-
 src/components/image_viewer/ImageViewer.vue | 285 ++++++++++++++------
 src/components/upload/Popup.vue             |  85 +++++-
 src/store/translation/en.json               |   2 +-
 4 files changed, 275 insertions(+), 104 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f0a0c566..d915b685 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -744,7 +744,6 @@ a:hover .upload-button {
 
 .data-select a {
   color:white;
-  font-size: 0.7em;
 }
 
 .data-select a:hover {
@@ -777,18 +776,18 @@ a:hover .upload-button {
 .data-button:hover,
 .key > .data-select:hover,
 .action > .data-select:hover {
-  background: black;
+  background: var(--main-txt-color);
   /* border-radius: 0;*/
   color: white;
   box-shadow: none;
 }
 
 .unedited {
-  color: var(--main-red);
+  color: var(--main-txt-color);
 }
 
 .unedited:hover {
-  color: black;
+  color: var(--main-red);
   cursor: pointer;
 }
 
diff --git a/src/components/image_viewer/ImageViewer.vue b/src/components/image_viewer/ImageViewer.vue
index d9ce8ba7..f0a12942 100644
--- a/src/components/image_viewer/ImageViewer.vue
+++ b/src/components/image_viewer/ImageViewer.vue
@@ -17,10 +17,14 @@
               ref="viewer-image"
               v-on:load="onimageload"
               class="viewer-image"
-            >
+            />
             <div class="viewer-contents">
               <!-- <div class="viewer-contents" :class="showLinks ? 'show-links' : ''"> -->
-              <div v-if="index < items.length-1" @click="stepRight" class="step-right">
+              <div
+                v-if="index < items.length - 1"
+                @click="stepRight"
+                class="step-right"
+              >
                 <i class="wikiglyph wikiglyph-caret-right step-glyph"></i>
               </div>
               <div v-if="index > 0" @click="stepLeft" class="step-left">
@@ -36,7 +40,9 @@
                       :items="toolbarActionMenuItems"
                       @doMenuItemAction="onDoMenuItemAction"
                     >
-                    <div slot="menu-title">{{ $t('general.menus.actionMenuTitle') }}</div>
+                      <div slot="menu-title">
+                        {{ $t("general.menus.actionMenuTitle") }}
+                      </div>
                     </ToolbarMenu>
                     <PopUp ref="popup"></PopUp>
                     <HeaderLink
@@ -50,15 +56,25 @@
                       <a href="#" class="toolbar-item-a">
                         <i class="wikiglyph wikiglyph-cross"></i>
                       </a>
-                      <span class="tooltip">{{ $t('imageViewer.closeViewer') }}</span>
+                      <span class="tooltip">{{
+                        $t("imageViewer.closeViewer")
+                      }}</span>
                     </div>
                   </div>
                 </div>
               </div>
               <div class="bottomshade">
                 <div class="titlebox white">
-                  <div v-for="title in element.title" :key="title.id" class="titlebox-title">{{ title }}</div>
-                  <div class="titlebox-subtitle white">{{ getCredits(element) }}</div>
+                  <div
+                    v-for="title in element.title"
+                    :key="title.id"
+                    class="titlebox-title"
+                  >
+                    {{ title }}
+                  </div>
+                  <div class="titlebox-subtitle white">
+                    {{ getCredits(element) }}
+                  </div>
                 </div>
               </div>
             </div>
@@ -68,16 +84,28 @@
         <div class="metadata-area">
           <div class="metadata-original">
             <div class="toolbar">
-              <h1 class="header-title">{{ $t('imageViewer.imageMetadata.image') }}</h1>
+              <h1 class="header-title">
+                {{ $t("imageViewer.imageMetadata.image") }}
+              </h1>
             </div>
             <div class="columns">
               <div class="grid-row">
                 <div class="grid-icons">
-                  <i class="wikiglyph wikiglyph-stripe-summary metadata-glyph"></i>
+                  <i
+                    class="wikiglyph wikiglyph-stripe-summary metadata-glyph"
+                  ></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.caption') }}</div>
-                  <div v-for="title in element.title" :key="title.id" class="grid-body unedited">{{ title }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.caption") }}
+                  </div>
+                  <div
+                    v-for="title in element.title"
+                    :key="title.id"
+                    class="grid-body unedited"
+                  >
+                    {{ title }}
+                  </div>
                 </div>
               </div>
               <div class="grid-row">
@@ -85,15 +113,17 @@
                   <i class="wikiglyph wikiglyph-description metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.description') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.description") }}
+                  </div>
                   <div
-                    v-if="element.description && element.description.length>0"
-                    class="grid-body unedited" v-html="element.description[0]"
+                    v-if="element.description && element.description.length > 0"
+                    class="grid-body unedited"
+                    v-html="element.description[0]"
                   ></div>
-                  <div
-                    v-else
-                    class="grid-body action"
-                  >{{ $t('imageViewer.imageMetadata.addDescription') }}</div>
+                  <div v-else class="grid-body action">
+                    {{ $t("imageViewer.imageMetadata.addDescription") }}
+                  </div>
                 </div>
               </div>
               <div v-show="element.inscriptions" class="grid-row">
@@ -101,14 +131,18 @@
                   <i class="wikiglyph wikiglyph-signature metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.inscriptions') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.inscriptions") }}
+                  </div>
                   <div
                     class="grid-body unedited"
                     v-for="item in element.inscriptions"
                     :key="item.id"
                   >
                     <div class="line" v-for="block in item" :key="block.id">
-                      <div class="line-type" v-if="block.type">{{ block.type }}:</div>
+                      <div class="line-type" v-if="block.type">
+                        {{ block.type }}:
+                      </div>
                       <div class="line-content">{{ block.content }}</div>
                     </div>
                   </div>
@@ -119,15 +153,32 @@
                   <i class="wikiglyph wikiglyph-user-avatar metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.creator') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.creator") }}
+                  </div>
                   <template v-if="element.source == 'Finna'">
-                    <div class="compound" v-for="creator in element.creators" :key="creator.id">
-                      <Dataselect class="grid-select key" v-bind:term="creator.role"></Dataselect>
-                      <Dataselect class="grid-select value" v-bind:term="creator.name"></Dataselect>
+                    <div
+                      class="compound"
+                      v-for="creator in element.creators"
+                      :key="creator.id"
+                    >
+                      <Dataselect
+                        class="grid-select key"
+                        v-bind:term="creator.role"
+                      ></Dataselect>
+                      <Dataselect
+                        class="grid-select value"
+                        v-bind:term="creator.name"
+                      ></Dataselect>
                     </div>
                   </template>
                   <template v-else>
-                    <Dataselect class="grid-select" v-for="creator in element.creators" :key="creator.id" v-bind:term="creator"></Dataselect>
+                    <Dataselect
+                      class="grid-select"
+                      v-for="creator in element.creators"
+                      :key="creator.id"
+                      v-bind:term="creator"
+                    ></Dataselect>
                   </template>
                   <Dataselect
                     class="grid-select action"
@@ -137,10 +188,14 @@
               </div>
               <div class="grid-row" v-if="element.datecreated">
                 <div class="grid-icons">
-                  <i class="wikiglyph wikiglyph-production-date metadata-glyph"></i>
+                  <i
+                    class="wikiglyph wikiglyph-production-date metadata-glyph"
+                  ></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.dateCreated') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.dateCreated") }}
+                  </div>
                   <Dataselect
                     v-for="item in element.datecreated"
                     :key="item.id"
@@ -149,11 +204,15 @@
                   ></Dataselect>
                   <Dataselect
                     class="grid-select action"
-                    v-bind:title="$t('imageViewer.imageMetadata.addDateCreated')"
+                    v-bind:title="
+                      $t('imageViewer.imageMetadata.addDateCreated')
+                    "
                   ></Dataselect>
                   <Dataselect
                     class="grid-select action"
-                    v-bind:title="$t('imageViewer.imageMetadata.addDateDepicted')"
+                    v-bind:title="
+                      $t('imageViewer.imageMetadata.addDateDepicted')
+                    "
                   ></Dataselect>
                 </div>
               </div>
@@ -162,7 +221,9 @@
                   <i class="wikiglyph wikiglyph-image metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.format') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.format") }}
+                  </div>
                   <Dataselect
                     v-if="element.formats"
                     class="grid-select"
@@ -179,12 +240,16 @@
                   <i class="wikiglyph wikiglyph-measures metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.measurements') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.measurements") }}
+                  </div>
                   <div
                     class="grid-body unedited"
                     v-for="measurement in element.measurements"
                     :key="measurement.id"
-                  >{{ measurement }}</div>
+                  >
+                    {{ measurement }}
+                  </div>
                 </div>
               </div>
               <div v-if="element.genre" class="grid-row">
@@ -192,8 +257,14 @@
                   <i class="wikiglyph wikiglyph-genre metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.genre') }}</div>
-                  <Dataselect v-if="element.genre" class="grid-select" v-bind:term="element.genre"></Dataselect>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.genre") }}
+                  </div>
+                  <Dataselect
+                    v-if="element.genre"
+                    class="grid-select"
+                    v-bind:term="element.genre"
+                  ></Dataselect>
                   <Dataselect
                     class="grid-select action"
                     v-bind:title="$t('imageViewer.imageMetadata.addGenre')"
@@ -205,7 +276,9 @@
                   <i class="wikiglyph wikiglyph-depicted metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.depicts') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.depicts") }}
+                  </div>
                   <Dataselect
                     v-for="subject in element.subjects"
                     class="grid-select"
@@ -223,7 +296,9 @@
                   <i class="wikiglyph wikiglyph-map-pin metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.location') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.location") }}
+                  </div>
                   <Dataselect
                     v-for="place in element.places"
                     class="grid-select"
@@ -239,7 +314,8 @@
                     v-bind:title="$t('imageViewer.imageMetadata.addAddress')"
                   ></Dataselect>
                 </div>
-              </div><!-- 
+              </div>
+              <!-- 
               <div v-if="element.address" class="grid-row">
                 <div class="grid-icons">
                   <i class="wikiglyph wikiglyph-map-pin metadata-glyph"></i>
@@ -255,10 +331,14 @@
               </div> -->
               <div v-if="element.actors" class="grid-row">
                 <div class="grid-icons">
-                  <i class="wikiglyph wikiglyph-depicted-person metadata-glyph"></i>
+                  <i
+                    class="wikiglyph wikiglyph-depicted-person metadata-glyph"
+                  ></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.depictedPeople') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.depictedPeople") }}
+                  </div>
                   <Dataselect
                     v-for="actor in element.actors"
                     class="grid-select"
@@ -276,7 +356,9 @@
                   <i class="wikiglyph wikiglyph-event metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.event') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.event") }}
+                  </div>
                   <Dataselect
                     class="grid-select"
                     v-if="element.events"
@@ -293,8 +375,11 @@
                   <i class="wikiglyph wikiglyph-institution metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.institution') }}</div>
-                  <Dataselect v-for="institution in element.institutions"
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.institution") }}
+                  </div>
+                  <Dataselect
+                    v-for="institution in element.institutions"
                     :key="institution.id"
                     class="grid-select"
                     v-bind:term="institution"
@@ -306,7 +391,9 @@
                   <i class="wikiglyph wikiglyph-collection metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.collection') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.collection") }}
+                  </div>
                   <Dataselect
                     class="grid-select"
                     v-if="element.collection"
@@ -319,7 +406,9 @@
                   <i class="wikiglyph wikiglyph-id metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.inventoryNumber') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.inventoryNumber") }}
+                  </div>
                   <div class="data-text">{{ element.inventoryNumber }}</div>
                 </div>
               </div>
@@ -336,7 +425,7 @@
               </div>
               <div v-if="element.geoLocations.length > 0" class="grid-row">
                 <div class="metadata-map">
-                  {{ $t('imageViewer.imageMetadata.locationMap') }}
+                  {{ $t("imageViewer.imageMetadata.locationMap") }}
                   <div id="imagemap" class="map-component"></div>
                 </div>
               </div>
@@ -349,15 +438,21 @@
           </div-->
           <div class="metadata-copyright">
             <div class="toolbar">
-              <h1 class="header-title">{{ $t('imageViewer.imageMetadata.copyright') }}</h1>
+              <h1 class="header-title">
+                {{ $t("imageViewer.imageMetadata.copyright") }}
+              </h1>
             </div>
             <div class="columns">
               <div v-if="element.license" class="grid-row">
                 <div class="grid-icons">
-                  <i class="wikiglyph wikiglyph-public-domain metadata-glyph"></i>
+                  <i
+                    class="wikiglyph wikiglyph-public-domain metadata-glyph"
+                  ></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.license') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.license") }}
+                  </div>
                   <div class="data-text">
                     <a :href="element.license_link">{{ element.license }}</a>
                   </div>
@@ -368,9 +463,13 @@
                   <i class="wikiglyph wikiglyph-attribution metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.attribution') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.attribution") }}
+                  </div>
                   <div class="data-text">
-                    <i v-for="title in element.title" :key="title.id">{{ title }}</i>
+                    <i v-for="title in element.title" :key="title.id">{{
+                      title
+                    }}</i>
                     {{ getCredits(element) }}
                   </div>
                 </div>
@@ -391,7 +490,9 @@
           </div>
           <div class="metadata-digital">
             <div class="toolbar">
-              <h1 class="header-title">{{ $t('imageViewer.imageMetadata.digitalCopy') }}</h1>
+              <h1 class="header-title">
+                {{ $t("imageViewer.imageMetadata.digitalCopy") }}
+              </h1>
             </div>
             <div class="columns">
               <div class="grid-row">
@@ -399,7 +500,9 @@
                   <i class="wikiglyph wikiglyph-browser metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.publishingPlatform') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.publishingPlatform") }}
+                  </div>
                   <div class="data-text">
                     <a href="#">{{ element.source }}</a>
                   </div>
@@ -410,7 +513,9 @@
                   <i class="wikiglyph wikiglyph-id metadata-glyph"></i>
                 </div>
                 <div v-if="element.id" class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.platformId') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.platformId") }}
+                  </div>
                   <div class="data-text break">{{ element.id }}</div>
                 </div>
               </div>
@@ -419,9 +524,13 @@
                   <i class="wikiglyph wikiglyph-article metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.imageInfoPage') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.imageInfoPage") }}
+                  </div>
                   <div class="data-text break">
-                    <a :href="element.infoURL" target="_blank">{{ element.infoURL }}</a>
+                    <a :href="element.infoURL" target="_blank">{{
+                      element.infoURL
+                    }}</a>
                   </div>
                 </div>
               </div>
@@ -430,8 +539,12 @@
                   <i class="wikiglyph wikiglyph-imagesize metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.imageDimensions') }}</div>
-                  <div class="data-text">{{ dimension.x }} X {{ dimension.y }} px</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.imageDimensions") }}
+                  </div>
+                  <div class="data-text">
+                    {{ dimension.x }} X {{ dimension.y }} px
+                  </div>
                 </div>
               </div>
               <div v-if="element.uploader" class="grid-row">
@@ -439,11 +552,13 @@
                   <i class="wikiglyph wikiglyph-user-avatar metadata-glyph"></i>
                 </div>
                 <div class="grid-text">
-                  <div class="grid-item">{{ $t('imageViewer.imageMetadata.uploader') }}</div>
+                  <div class="grid-item">
+                    {{ $t("imageViewer.imageMetadata.uploader") }}
+                  </div>
                   <div class="data-text">{{ element.uploader }}</div>
                 </div>
               </div>
-<!--               <div class="grid-row">
+              <!--               <div class="grid-row">
                 <div class="grid-icons">
                   <i class="wikiglyph wikiglyph-filesize metadata-glyph"></i>
                 </div>
@@ -452,7 +567,7 @@
                   <div class="data-text">2,1 MB</div>
                 </div>
               </div> -->
-<!--               <div class="grid-row">
+              <!--               <div class="grid-row">
                 <div class="grid-icons">
                   <i class="wikiglyph wikiglyph-filetype metadata-glyph"></i>
                 </div>
@@ -476,7 +591,7 @@ import ToolbarMenu from "@/components/menu/ToolbarMenu";
 import PopUp from "@/components/upload/Popup";
 
 const MENU_ACTIONS = {
-  SELECT_HEADER: 0
+  SELECT_HEADER: 0,
   // GEOLOCATE: 1,
   // ADD_TO_COLLECTION: 0,
 };
@@ -495,7 +610,7 @@ export default {
       topicVectorLayer: null,
       // showLinks: true,
       toolbarActionMenuItems: [
-/*         {
+        /*         {
           id: MENU_ACTIONS.SELECT_HEADER,
           text: "topic_page.TopicImages.imagesActionMenu.selectFeatured"
         },
@@ -505,12 +620,11 @@ export default {
         }, */
         {
           id: MENU_ACTIONS.UPLOAD,
-          text: "topic_page.TopicImages.imagesActionMenu.upload"
-        }
+          text: "topic_page.TopicImages.imagesActionMenu.upload",
+        },
       ],
       clickPopUp: false,
     };
-  
   },
   components: {
     HeaderLink,
@@ -519,7 +633,7 @@ export default {
     PopUp,
   },
   props: {
-    shouldShowDialog: Boolean
+    shouldShowDialog: Boolean,
   },
   mounted() {
     // this.$el.addEventListener("mousemove", () => {
@@ -529,7 +643,7 @@ export default {
     // });
   },
   methods: {
-    handleCancel: function() {
+    handleCancel: function () {
       this.$emit("close");
     },
     show(items, index) {
@@ -538,7 +652,7 @@ export default {
       this.element = items[index];
       // console.log("Element: ", this.element);
       this.showModal = true;
-      this.$nextTick(function() {
+      this.$nextTick(function () {
         this.createMap();
       });
     },
@@ -554,7 +668,7 @@ export default {
       this.element = this.items[this.index];
     },
     onimageload() {
-      this.$nextTick(function() {
+      this.$nextTick(function () {
         this.dimension.x = this.$refs["viewer-image"].naturalWidth;
         this.dimension.y = this.$refs["viewer-image"].naturalHeight;
       });
@@ -607,12 +721,12 @@ export default {
       if (this.getFirstGeoLocationAsPoint() != null) {
         view = new ol.View({
           center: ol.proj.fromLonLat(this.getFirstGeoLocationAsPoint()),
-          zoom: 14
+          zoom: 14,
         });
       } else {
         view = new ol.View({
           center: ol.proj.fromLonLat([0, 0]),
-          zoom: 1
+          zoom: 1,
         });
       }
 
@@ -620,10 +734,10 @@ export default {
         target: "imagemap",
         layers: [
           new ol.layer.Tile({
-            source: new this.$ol.source.OSM()
-          })
+            source: new this.$ol.source.OSM(),
+          }),
         ],
-        view: view
+        view: view,
       });
 
       this.setTopicOnMap();
@@ -636,7 +750,7 @@ export default {
         this.topicFeature = new ol.Feature({
           geometry: new ol.geom.Point(
             ol.proj.fromLonLat(this.getFirstGeoLocationAsPoint())
-          )
+          ),
         });
         var iconStyle = new ol.style.Style({
           image: new ol.style.Icon({
@@ -644,13 +758,13 @@ export default {
             anchorXUnits: "fraction",
             anchorYUnits: "fraction",
             src: "/static/wikifont/svgs/mod/uniE851 - mapPin - red.svg",
-            scale: 1.4
-          })
+            scale: 1.4,
+          }),
         });
         this.topicFeature.setStyle(iconStyle);
 
         var vectorSource = new ol.source.Vector({
-          features: [this.topicFeature]
+          features: [this.topicFeature],
         });
 
         if (this.topicVectorLayer != null) {
@@ -660,7 +774,7 @@ export default {
 
         this.topicVectorLayer = new ol.layer.Vector({
           source: vectorSource,
-          zIndex: 1000
+          zIndex: 1000,
         });
 
         this.map.addLayer(this.topicVectorLayer);
@@ -734,12 +848,7 @@ export default {
             var pointParts = partsWithoutParenthesis[i].split(",");
             var polygonPart = [];
             for (var j = 0; j < pointParts.length; j++) {
-              polygonPart.push(
-                pointParts[j]
-                  .trim()
-                  .split(" ")
-                  .map(Number)
-              );
+              polygonPart.push(pointParts[j].trim().split(" ").map(Number));
             }
             geoLocation.push(polygonPart);
           }
@@ -754,7 +863,7 @@ export default {
             [pointParts[0], pointParts[2]],
             [pointParts[1], pointParts[2]],
             [pointParts[1], pointParts[3]],
-            [pointParts[0], pointParts[3]]
+            [pointParts[0], pointParts[3]],
           ];
           //console.log(envelopePolygon);
           geoLocation = [envelopePolygon];
@@ -792,14 +901,14 @@ export default {
     },
     getCentroid(coords) {
       var center = coords.reduce(
-        function(x, y) {
+        function (x, y) {
           return [x[0] + y[0] / coords.length, x[1] + y[1] / coords.length];
         },
         [0, 0]
       );
       return center;
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index fe679add..f67a1ff0 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -56,12 +56,12 @@
         </div>
       </div>
       <div class="messages">
-      <div class="message">{{ $t("upload.popup.uploadSuccess") }}</div>
-      <div class="message break">
-        {{ $t("upload.popup.view") }}
-        <a :href="commonsUrl" target="_blank">{{ filenameNoUnderscore }}</a>
-        {{ $t("upload.popup.inWikimediaCommons") }}
-      </div>
+        <div class="message">{{ $t("upload.popup.uploadSuccess") }}</div>
+        <div class="message break">
+          {{ $t("upload.popup.view") }}
+          <a :href="commonsUrl" target="_blank">{{ filenameNoUnderscore }}</a>
+          {{ $t("upload.popup.inWikimediaCommons") }}
+        </div>
       </div>
       <div class="actions">
         <button class="button upload" @click.prevent="hide">
@@ -87,6 +87,7 @@
 
         <!-- Metadata section -->
         <div class="columns">
+          <!-- Filename -->
           <div class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-view-details metadata-glyph"></i>
@@ -98,7 +99,7 @@
               </div>
             </div>
           </div>
-
+          <!-- Caption -->
           <div class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-stripe-summary metadata-glyph"></i>
@@ -112,7 +113,26 @@
               </div>
             </div>
           </div>
+          <div v-if="element.description" class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-description metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.description") }}
+              </div>
+              <div
+                v-if="element.description && element.description.length > 0"
+                class="grid-body unedited"
+                v-html="element.description[0]"
+              ></div>
+              <div v-else class="grid-body action">
+                {{ $t("imageViewer.imageMetadata.addDescription") }}
+              </div>
+            </div>
+          </div>
 
+          <!-- Creator -->
           <div v-if="element.creators" class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-user-avatar metadata-glyph"></i>
@@ -204,6 +224,49 @@
               </div>
             </div>
           </div>
+          <!-- Institution -->
+          <div v-if="element.institutions" class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-institution metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.institution") }}
+              </div>
+              <Dataselect
+                v-for="institution in element.institutions"
+                :key="institution.id"
+                class="grid-select"
+                v-bind:term="institution"
+              ></Dataselect>
+            </div>
+          </div>
+          <div v-if="element.collection" class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-collection metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.collection") }}
+              </div>
+              <Dataselect
+                class="grid-select"
+                v-if="element.collection"
+                v-bind:term="element.collection"
+              ></Dataselect>
+            </div>
+          </div>
+          <div v-if="element.inventoryNumber" class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-id metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.inventoryNumber") }}
+              </div>
+              <div class="data-text">{{ element.inventoryNumber }}</div>
+            </div>
+          </div>
         </div>
         <!-- Show upload button(s) -->
         <div v-if="licenseTemplate">
@@ -542,7 +605,6 @@ ${category}`;
   gap: 1em;
 }
 
-
 .message {
 }
 
@@ -559,7 +621,8 @@ ${category}`;
   font-size: var(--main-font-size);
   line-height: var(--main-line-height);
 }
-.upload, .cancel:hover {
+.upload,
+.cancel:hover {
   background-color: var(--main-link-color);
   color: white;
 }
@@ -569,12 +632,12 @@ ${category}`;
 }
 
 .disabled {
-  border:2px;
+  border: 2px;
   color: var(--main-blue);
 }
 
 .cancel {
-  border:2px solid var(--main-link-color);
+  border: 2px solid var(--main-link-color);
   color: var(--main-link-color);
   background-color: white;
 }
diff --git a/src/store/translation/en.json b/src/store/translation/en.json
index 8b9cea88..5ebe41dd 100644
--- a/src/store/translation/en.json
+++ b/src/store/translation/en.json
@@ -524,7 +524,7 @@
         "popup": {
             "popupTitle": "Upload image",
             "intro": "Verify the information and edit if needed.",
-            "filename": "File name",
+            "filename": "Filename",
             "upload": "Upload image" ,
             "closePopup": "Close",
             "cannotUpload": "This image cannot be uploaded to Wikimedia Commons because the license is not in the list of allowed licenses. If you think this is an error, please file an issue on ",

From bdfe9dac7d381d20da8579a6597d1b92f9287cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susanna=20=C3=85n=C3=A4s?= <susanna.anas@gmail.com>
Date: Mon, 11 Sep 2023 09:27:30 +0300
Subject: [PATCH 31/33] documentation, conditions

Added documentation about remaining work in the popup.
Added condition to show the upload menu only for Finna images.
---
 src/components/ImageGrid.vue    |  2 +-
 src/components/upload/Popup.vue | 59 +++++++++++++++++----------------
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/components/ImageGrid.vue b/src/components/ImageGrid.vue
index 102b9e0e..8c1ea497 100644
--- a/src/components/ImageGrid.vue
+++ b/src/components/ImageGrid.vue
@@ -19,7 +19,7 @@
           <img class="icon" :src="getIcon(item)" align="right">
         </div>
         <div class="thumb-image-header"> 
-          <div class="left-align" @click.stop>
+          <div v-if="item.source == 'Finna'" class="left-align" @click.stop>
             <ImagesActionMenu v-bind:element="item"></ImagesActionMenu>
             <div
               v-if="item.geoLocations != undefined && item.geoLocations.length > 0"
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index f67a1ff0..f86e02aa 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -87,6 +87,22 @@
 
         <!-- Metadata section -->
         <div class="columns">
+          <!-- Depicts: Add also other keywords from source. Upload original text as a qualifier. Remove false match from this and other related sections (category). Add all keywords in a separate section. Choose property for this section: depicts / creator / location. -->
+          <div class="grid-row">
+            <div class="grid-icons">
+              <i class="wikiglyph wikiglyph-depicted metadata-glyph"></i>
+            </div>
+            <div class="grid-text">
+              <div class="grid-item">
+                {{ $t("imageViewer.imageMetadata.depicted") }}
+              </div>
+              <div class="data">
+                <div class="grid-body unedited">
+                  <a :href="imgDepictUrl" target="_blank">{{ imgDepict }}</a>
+                </div>
+              </div>
+            </div>
+          </div>
           <!-- Filename -->
           <div class="grid-row">
             <div class="grid-icons">
@@ -99,7 +115,7 @@
               </div>
             </div>
           </div>
-          <!-- Caption -->
+          <!-- Caption: Edit option needed, upload missing -->
           <div class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-stripe-summary metadata-glyph"></i>
@@ -113,6 +129,7 @@
               </div>
             </div>
           </div>
+          <!-- Description: Edit option needed, upload missing -->
           <div v-if="element.description" class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-description metadata-glyph"></i>
@@ -131,8 +148,7 @@
               </div>
             </div>
           </div>
-
-          <!-- Creator -->
+          <!-- Creator: Upload missing, change style after reconciling, adding to crosswalk table-->
           <div v-if="element.creators" class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-user-avatar metadata-glyph"></i>
@@ -151,7 +167,7 @@
               </div>
             </div>
           </div>
-
+          <!-- Date created: Normalized, based on year. No editing-->
           <div class="grid-row" v-if="element.datecreated">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-production-date metadata-glyph"></i>
@@ -165,7 +181,7 @@
               </div>
             </div>
           </div>
-
+          <!-- License: No editing-->
           <div v-if="element.license" class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-public-domain metadata-glyph"></i>
@@ -181,7 +197,7 @@
               </div>
             </div>
           </div>
-
+          <!-- Category: Based on Wikidata. No editing, maybe a good idea?-->
           <div v-if="this.category" class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-message metadata-glyph"></i>
@@ -193,7 +209,7 @@
               </div>
             </div>
           </div>
-
+          <!-- Source: Source url, no editing-->
           <div class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-article metadata-glyph"></i>
@@ -207,24 +223,7 @@
               </div>
             </div>
           </div>
-
-          <!-- Depicts -->
-          <div class="grid-row">
-            <div class="grid-icons">
-              <i class="wikiglyph wikiglyph-depicted metadata-glyph"></i>
-            </div>
-            <div class="grid-text">
-              <div class="grid-item">
-                {{ $t("imageViewer.imageMetadata.depicted") }}
-              </div>
-              <div class="data">
-                <div class="grid-body unedited">
-                  <a :href="imgDepictUrl" target="_blank">{{ imgDepict }}</a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- Institution -->
+          <!-- Institution: Reconcile possible, upload missing, style change after reconciling. Possible to add to Information as well as SDC, adding to crosswalk table-->
           <div v-if="element.institutions" class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-institution metadata-glyph"></i>
@@ -233,14 +232,15 @@
               <div class="grid-item">
                 {{ $t("imageViewer.imageMetadata.institution") }}
               </div>
-              <Dataselect
+              <ItemPullDown
                 v-for="institution in element.institutions"
                 :key="institution.id"
                 class="grid-select"
                 v-bind:term="institution"
-              ></Dataselect>
+              ></ItemPullDown>
             </div>
           </div>
+          <!-- Collection: Upload missing, style change after reconciling, adding to crosswalk table-->
           <div v-if="element.collection" class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-collection metadata-glyph"></i>
@@ -249,13 +249,14 @@
               <div class="grid-item">
                 {{ $t("imageViewer.imageMetadata.collection") }}
               </div>
-              <Dataselect
+              <ItemPullDown
                 class="grid-select"
                 v-if="element.collection"
                 v-bind:term="element.collection"
-              ></Dataselect>
+              ></ItemPullDown>
             </div>
           </div>
+          <!-- Inventory number, upload missing, add to both Information and SDC -->
           <div v-if="element.inventoryNumber" class="grid-row">
             <div class="grid-icons">
               <i class="wikiglyph wikiglyph-id metadata-glyph"></i>

From 6fdf512af55fdff30cffcdd660261c4caee84be0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susanna=20=C3=85n=C3=A4s?= <susanna.anas@gmail.com>
Date: Mon, 11 Sep 2023 16:33:20 +0300
Subject: [PATCH 32/33] Slight style changes

---
 src/App.vue                     | 4 +++-
 src/components/upload/Popup.vue | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d915b685..b3f130ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,7 @@ export default {
   --main-txt-color: #333;
   --main-dimmed: #777;
   --main-dark: #555;
+  --main-light-bg: #fafafa;
   --main-link-color: #00a3cc;
   --main-modal-color: #ececec;
   --main-yellow: #ffd76e;
@@ -656,9 +657,10 @@ i.wikiglyph {
 .gallery {
   height: 40vh;
   display: flex;
-  padding: 0 0 10px 10px;
+  padding: 0 0 0 10px;
   overflow-x: auto;
   overflow-y: hidden;
+  background-color: var(--main-light-bg);
 }
 
 .gallery-item {
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index f86e02aa..6ccadc98 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -562,7 +562,7 @@ ${category}`;
 .columns {
   column-width: 400px;
   column-gap: 1.5em;
-  padding: 10px 20px 0 20px;
+  padding: 10px 20px;
 }
 
 .break {

From f8486ac7019acca31e0fa08c85d1b2a37b97eb3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Susanna=20=C3=85n=C3=A4s?= <susanna.anas@gmail.com>
Date: Tue, 12 Sep 2023 13:39:17 +0300
Subject: [PATCH 33/33] Styles

popup, wikidata ja imagevoewer
---
 src/App.vue                                 | 4 ++++
 src/components/image_viewer/ImageViewer.vue | 6 +-----
 src/components/topic_page/Wikidata.vue      | 2 +-
 src/components/upload/Popup.vue             | 3 ++-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b3f130ea..dd1f47c0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -123,6 +123,10 @@ a:hover {
   text-transform: capitalize;
 }
 
+.break {
+  word-break: break-all;
+}
+
 .left-align {
   display: flex;
   height: 100%;
diff --git a/src/components/image_viewer/ImageViewer.vue b/src/components/image_viewer/ImageViewer.vue
index f0a12942..594fedfd 100644
--- a/src/components/image_viewer/ImageViewer.vue
+++ b/src/components/image_viewer/ImageViewer.vue
@@ -935,10 +935,6 @@ export default {
   text-transform: uppercase;
 }
 
-.break {
-  word-break: break-all;
-}
-
 /*
 .main-toolbar {
   display: -ms-flexbox;
@@ -959,7 +955,7 @@ export default {
     rgba(0, 0, 0, 0) 0%,
     rgba(0, 0, 0, 0.25) 100%
   );
-  padding: 0 20px;
+  padding: 0 0 0 20px;
   box-sizing: border-box;
 }
 
diff --git a/src/components/topic_page/Wikidata.vue b/src/components/topic_page/Wikidata.vue
index 42b79b2b..b95c82c8 100644
--- a/src/components/topic_page/Wikidata.vue
+++ b/src/components/topic_page/Wikidata.vue
@@ -22,7 +22,7 @@
                 v-for="(value, index) in statement.values"
                 :key="getID(value) + index"
               >
-                <div class="statement-value">
+                <div class="statement-value break">
                   <div v-if="value.url != null">
                     <a
                       v-if="getTarget(value) != '_self'"
diff --git a/src/components/upload/Popup.vue b/src/components/upload/Popup.vue
index 6ccadc98..4dff4179 100644
--- a/src/components/upload/Popup.vue
+++ b/src/components/upload/Popup.vue
@@ -349,6 +349,7 @@ export default {
       } else {
         this.title = "";
       }
+      //further work: multiple creators and their roles
       if (element.creators[0]) {
         this.author = element.creators[0].name
           .split(", ")
@@ -529,7 +530,7 @@ ${category}`;
 
 .popup-inner {
   background: #fff;
-  max-width: 1000px;
+  max-width: calc(100% - 40px);
 }
 
 .grid-icons {