🚧 Move user processing from widget to mixin

plus
* some template and style tweaking
* improve tooltips
* enforce Nextcloud app-password instead of login password

src/mixins/NextcloudMixin.js

@@ -1,6 +1,6 @@
 import { serviceEndpoints } from '@/utils/defaults';
 import { convertBytes, formatNumber, getTimeAgo } from '@/utils/MiscHelpers';
-// //import { NcdCap } from '@/utils/ncd';
+// //import { NcdCap, NcdUsr } from '@/utils/ncd';
 
 /** Reusable mixin for Nextcloud widgets */
 export default {
@@ -11,6 +11,19 @@ export default {
         activity: null,
       },
       capabilitiesLastUpdated: 0,
+      user: {
+        id: null,
+        isAdmin: false,
+        displayName: null,
+        email: null,
+        quota: {
+          relative: null,
+          total: null,
+          used: null,
+          free: null,
+          quota: null,
+        },
+      },
     };
   },
   computed: {
@@ -24,6 +37,9 @@ export default {
     },
     password() {
       if (!this.options.password) this.error('An app-password is required');
+      if (!/^([a-z0-9]{5}-){4}[a-z0-9]{5}$/i.test(this.options.password)) {
+        this.error('Please use an app-password for this widget, not your login password.');
+      }
       return this.options.password;
     },
     headers() {
@@ -33,6 +49,9 @@ export default {
         Authorization: `Basic ${window.btoa(`${this.username}:${this.password}`)}`,
       };
     },
+    capabilitiesTtl() {
+      return (parseInt(this.options.capabilitiesTtl, 10) || 3600) * 1000;
+    },
     proxyReqEndpoint() {
       const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
       return `${baseUrl}${serviceEndpoints.corsProxy}`;
@@ -40,21 +59,23 @@ export default {
   },
   methods: {
     endpoint(id) {
-      const endpoints = {
-        capabilities: `${this.hostname}/ocs/v1.php/cloud/capabilities`,
-        user: `${this.hostname}/ocs/v1.php/cloud/users/${this.username}`,
-        serverinfo: `${this.hostname}/ocs/v2.php/apps/serverinfo/api/v1/info`,
-      };
-      return endpoints[id];
+      switch (id) {
+        case 'capabilities':
+        default:
+          return `${this.hostname}/ocs/v1.php/cloud/capabilities`;
+        case 'user':
+          return `${this.hostname}/ocs/v1.php/cloud/users/${this.username}`;
+        case 'serverinfo':
+          return `${this.hostname}/ocs/v2.php/apps/serverinfo/api/v1/info`;
+      }
     },
-    fetchCapabilities() {
-      const promise = Promise.resolve();
-      if ((new Date().getTime()) - this.capabilitiesLastUpdated > 3600000) {
-        promise.then(() => this.makeRequest(this.endpoint('capabilities'), this.headers))
-        // //promise.then(() => NcdCap)
+    loadCapabilities() {
+      if ((new Date().getTime()) - this.capabilitiesLastUpdated > this.capabilitiesTtl) {
+        return this.makeRequest(this.endpoint('capabilities'), this.headers)
+        // //return Promise.resolve(NcdCap)
           .then(this.processCapabilities);
       }
-      return promise;
+      return Promise.resolve();
     },
     processCapabilities(data) {
       const ocdata = data?.ocs?.data;
@@ -69,6 +90,23 @@ export default {
       this.version.edition = ocdata?.version?.edition;
       this.capabilitiesLastUpdated = new Date().getTime();
     },
+    loadUser() {
+      return this.makeRequest(this.endpoint('user'), this.headers).then(this.processUser);
+      // //return Promise.resolve(NcdUsr).then(this.processUser);
+    },
+    processUser(userData) {
+      const user = userData?.ocs?.data;
+      if (!user) {
+        this.error('Invalid response');
+        return;
+      }
+      this.user.id = user.id;
+      this.user.email = user.email;
+      this.user.quota = user.quota;
+      this.user.displayName = user.displayname;
+      this.user.lastLogin = user.lastLogin;
+      this.user.isAdmin = user.groups && user.groups.includes('admin');
+    },
     formatNumber(number) {
       return formatNumber(number);
     },