Initial user settings

and user token creation

src/components/usersettings.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <h4 class="title is-4">User Tokens</h4>
+    <div v-if="user.tokens">
+      <div class="item-list" v-for="token in user.tokens" v-bind:key="token">
+        <div class="field is-grouped">
+          <div class="control">
+            <input class="input" disabled type="text" placeholder="Token name" :value="token">
+          </div>
+          <button class="button is-primary" @click="deleteUserToken(token)">Delete</button>
+        </div>
+      </div>
+    </div>
+    <div v-else class="item-list">No user tokens</div>
+    <hr>
+    <div v-if="token" class="notification is-success">
+      <button class="delete" @click="closeNewTokenNotification()"></button>
+      User token created: {{token}}
+    </div>
+    <h4 class="title is-4">Create new User Token</h4>
+    <div class="field is-grouped">
+      <div class="control">
+        <input class="input is-primary" type="text" placeholder="Token name" v-model="newtokenname">
+      </div>
+      <button class="button is-primary" @click="createUserToken()">Create Token</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  fetchCurrentUser,
+  createUserToken,
+  deleteUserToken
+} from "@/util/data.js";
+
+export default {
+  components: {},
+  name: "usersettings",
+  props: {},
+  data() {
+    return {
+      user: [],
+      token: null,
+      newtokenname: null
+    };
+  },
+  methods: {
+    async createUserToken() {
+      let res = await createUserToken(this.user.username, this.newtokenname);
+      this.token = res.token;
+      this.newtokenname = null;
+      this.user = await fetchCurrentUser();
+    },
+    async deleteUserToken(tokenname) {
+      await deleteUserToken(this.user.username, tokenname);
+      this.user = await fetchCurrentUser();
+    },
+    closeNewTokenNotification() {
+      this.token = null;
+    }
+  },
+  created: async function() {
+    this.user = await fetchCurrentUser();
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/css/_variables.scss";
+</style>
+

src/router.js

@@ -5,7 +5,7 @@ import User from "./views/User.vue";
 import Org from "./views/Org.vue";
 import Project from "./views/Project.vue";
 import ProjectGroup from "./views/ProjectGroup.vue";
-//import Run from "./views/Run.vue";
+import usersettings from "./components/usersettings.vue";
 import projects from "./components/projects.vue";
 import projectsettings from "./components/projectsettings.vue";
 import projectgroupsettings from "./components/projectgroupsettings.vue";
@@ -84,6 +84,12 @@ export default new VueRouter({
           component: task,
           props: (route) => ({ ownertype: "user", ownername: route.params.username, runid: route.params.runid, taskid: route.params.taskid })
         },
+        {
+          path: "settings",
+          name: "user settings",
+          component: usersettings,
+          props: (route) => ({ username: route.params.username }),
+        },
       ]
     },
     {

src/util/data.js

@@ -1,5 +1,11 @@
 import { apiurl, fetch } from "@/util/auth";
 
+export async function fetchCurrentUser() {
+    let path = "/user"
+    let res = await fetch(apiurl(path));
+    return res.json();
+}
+
 export async function fetchRuns(group, lastrun) {
     let u = apiurl("/runs");
     if (group) {
@@ -44,3 +50,24 @@ export async function fetchVariables(ownertype, ref, all) {
     let res = await fetch(apiurl(path));
     return res.json();
 }
+
+export async function createUserToken(username, tokenname) {
+    let path = "/users/" + username + "/tokens"
+    let init = {
+        method: "POST",
+        body: JSON.stringify({
+            token_name: tokenname,
+        })
+    }
+    let res = await fetch(apiurl(path), init)
+    return res.json();
+}
+
+export async function deleteUserToken(username, tokenname) {
+    let path = "/users/" + username + "/tokens/" + tokenname
+    let init = {
+        method: "DELETE",
+    }
+    let res = await fetch(apiurl(path), init)
+    return res.text();
+}

src/util/link.js

@@ -15,9 +15,6 @@ export function ownerProjectsLink(ownertype, ownername) {
     return { name: ownertype + " projects", params: { ownername: ownername } }
 }
 
-export function projectGroupProjectsLink(ownertype, ownername) {
-    return { name: ownertype + " project group projects", params: { ownername: ownername } }
-}
 
 export function userLocalRunsLink(username) {
     return { name: "user local runs", params: { username: username } }
@@ -31,6 +28,10 @@ export function userLocalRunTaskLink(username, runid, taskid) {
     return { name: "user local run task", params: { username: username, runid: runid, taskid: taskid } }
 }
 
+export function userSettingsLink(username) {
+    return { name: "user settings", params: { username: username } }
+}
+
 // Note, when creating a router link containing a project/projectgroup ref (a
 // path), unfortunately, we cannot use route name and params since it will path
 // escape it
@@ -39,6 +40,11 @@ export function projectGroupLink(ownertype, ownername, projectgroupref) {
     return { path: `/${ownertype}/${ownername}/projectgroups/${projectgrouppath}`, }
 }
 
+export function projectGroupProjectsLink(ownertype, ownername, projectgroupref) {
+    let projectgrouppath = (projectgroupref.join("/") + ".proj")
+    return { path: `/${ownertype}/${ownername}/projectgroups/${projectgrouppath}/projects`, }
+}
+
 export function projectLink(ownertype, ownername, projectref) {
     let projectpath = (projectref.join("/") + ".proj")
     return { path: `/${ownertype}/${ownername}/projects/${projectpath}` }

src/views/ProjectGroup.vue

@@ -11,7 +11,9 @@
         <li
           :class="[{ 'is-active': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
         >
-          <router-link :to="projectGroupProjectsLink(ownertype, ownername)">Projects</router-link>
+          <router-link
+            :to="projectGroupProjectsLink(ownertype, ownername, projectgroupref)"
+          >Projects</router-link>
         </li>
       </ul>
       <ul class="is-right">

src/views/User.vue

@@ -52,6 +52,11 @@
           </router-link>
         </li>
       </ul>
+      <ul class="is-right">
+        <li :class="[{ 'is-active': $route.name.endsWith('user settings') }]">
+          <router-link :to="userSettingsLink(username)">User Settings</router-link>
+        </li>
+      </ul>
     </div>
     <router-view></router-view>
   </div>
@@ -64,7 +69,8 @@ import {
   ownerProjectsLink,
   userLocalRunsLink,
   userLocalRunLink,
-  userLocalRunTaskLink
+  userLocalRunTaskLink,
+  userSettingsLink
 } from "@/util/link.js";
 
 import { fetchRun } from "@/util/data.js";
@@ -94,7 +100,8 @@ export default {
     ownerProjectsLink: ownerProjectsLink,
     userLocalRunsLink: userLocalRunsLink,
     userLocalRunLink: userLocalRunLink,
-    userLocalRunTaskLink: userLocalRunTaskLink
+    userLocalRunTaskLink: userLocalRunTaskLink,
+    userSettingsLink: userSettingsLink
   }
 };
 </script>