Merge pull request #101 from CUAHSI:ui-auth-token

Ui-auth-token

app/frontend/src/components/UserLogin.vue

@@ -39,25 +39,54 @@
     <div v-else>
         <template v-if="mobile">
             <v-list class="text-body-1">
+                <v-list-item @click="showTokenDialog = true">
+                    <span>Show Auth Token</span>
+                </v-list-item>
                 <v-list-item @click="logOutUser">
                     <span>Log out</span>
                 </v-list-item>
             </v-list>
         </template>
         <template v-else>
-            <v-card class="nav-items mr-2 d-flex mr-4" :elevation="2">
-            <v-btn @click="logOutUser" :prepend-icon="mdiAccountKey" :elevation="0">Log Out {{ auth.user.email }}</v-btn>
-        </v-card>
+            <v-card class="nav-items ma-2" :elevation="1">
+                <v-tooltip text="Show Auth Token" location="start">
+                    <template v-slot:activator="{ props }">
+                        <v-btn icon v-bind="props" @click="showTokenDialog = true">
+                            <v-icon :icon="mdiShieldKeyOutline"></v-icon>
+                        </v-btn>
+                    </template>
+                </v-tooltip>
+                <v-btn @click="logOutUser" :prepend-icon="mdiAccountKey" :elevation="1" class="ma-2">Log Out {{
+                    auth.user.email }}</v-btn>
+            </v-card>
         </template>
     </div>
+    <v-dialog v-model="showTokenDialog" max-width="500">
+        <v-card>
+            <v-card-title>Auth Token</v-card-title>
+            <v-card-text>
+                <p class="text-body-1">
+                    Your auth token is a secret key that allows you to access the Subsetter API.
+                </p>
+                <v-text-field variant="outlined" v-on:focus="$event.target.select()" ref="clone" readonly
+                    :value="token" />
+                <v-btn v-if="!hasCopied" @click="copyToken">Copy</v-btn>
+                <v-btn color="green" v-else @click="copyToken">Copied to clipboard!</v-btn>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn text="Close" @click="showTokenDialog = false"></v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
 </template>
-
 <script setup>
-import { mdiAccount, mdiAccountKey } from '@mdi/js'
+import { mdiAccount, mdiAccountKey, mdiShieldKeyOutline } from '@mdi/js'
 import { useAuthStore } from '../stores/auth';
 import { useSubmissionsStore } from '../stores/submissions';
 import { logIn, logOut } from '@/auth.js'
 import { useRouter } from 'vue-router'
+import { ref } from 'vue'
 
 defineProps(['mobile'])
 const emit = defineEmits(['loggedIn', 'loggedOut'])
@@ -66,6 +95,17 @@ const submissionStore = useSubmissionsStore();
 const auth = useAuthStore();
 const router = useRouter()
 
+const showTokenDialog = ref(false);
+const token = auth.getToken();
+let hasCopied = ref(false);
+
+
+const copyToken = () => {
+    navigator.clipboard.writeText(token);
+    hasCopied.value = true;
+}
+
+
 async function openLogInDialog() {
     logIn(onLoggedIn);
 }
@@ -88,10 +128,12 @@ function onLogOut() {
 <style lang="scss" scoped>
 .nav-items {
     overflow: hidden;
+
     .v-btn {
         margin: 0;
-        
+
     }
 }
 </style>
-
+
+