Merge pull request #107 from multinet-app/permissions-ui

Permissions ui

package.json

@@ -22,15 +22,18 @@
     "axios": "^0.18.1",
     "core-js": "^2.6.5",
     "direct-vuex": "^0.10.4",
+    "lodash": "^4.17.19",
     "material-design-icons-iconfont": "^5.0.1",
-    "multinet": "0.15.0",
+    "multinet": "0.16.0",
     "vue": "^2.6.10",
+    "vue-async-computed": "^3.8.2",
     "vue-gtag": "^1.2.1",
     "vue-router": "^3.0.2",
     "vuetify": "^2.1.5",
     "vuex": "^3.1.3"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.158",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "@vue/cli-plugin-babel": "^3.11.0",

src/api.ts

@@ -1,10 +1,9 @@
-import { multinetApi } from 'multinet';
+import { multinetApi, UserSpec } from 'multinet';
 import { host } from '@/environment';
-import { UserInfo } from '@/types';
 
 const api = multinetApi(`${host}/api`);
 
-export async function getUserInfo(): Promise<UserInfo | null> {
+export async function getUserInfo(): Promise<UserSpec | null> {
   const resp = await fetch(`${host}/api/user/info`, {
     credentials: 'include',
   });

src/components/LoginMenu.vue

@@ -61,9 +61,9 @@
 </template>
 
 <script lang="ts">
+import { UserSpec } from 'multinet';
 import { host } from '@/environment';
 import store from '@/store';
-import { UserInfo } from '@/types';
 
 export default {
   data: () => ({
@@ -72,7 +72,7 @@ export default {
   }),
 
   computed: {
-    userInfo: (): UserInfo | null => store.state.userInfo,
+    userInfo: (): UserSpec | null => store.state.userInfo,
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     loginLink(this: any): string {
@@ -86,7 +86,7 @@ export default {
     userInitials(): string {
       // Required due to poor Vue TS support. See
       // https://github.com/multinet-app/multinet-client/pull/80#discussion_r422401040
-      const userInfo = this.userInfo as unknown as UserInfo | null;
+      const userInfo = this.userInfo as unknown as UserSpec | null;
 
       if (userInfo !== null) {
         return `${userInfo.given_name[0]}${userInfo.family_name[0]}`;