From 8c608937bbbc0c7cddedd950b6f535e4555fa8fb Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Sat, 9 May 2020 13:15:03 +0200
Subject: [PATCH] Username can now be changed

---
 app/imports/api/users/Users.js                | 24 ++++++
 .../ui/dialogStack/DialogComponentIndex.js    |  2 +
 app/imports/ui/pages/Account.vue              | 11 ++-
 app/imports/ui/user/UsernameDialog.vue        | 81 +++++++++++++++++++
 4 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 app/imports/ui/user/UsernameDialog.vue

diff --git a/app/imports/api/users/Users.js b/app/imports/api/users/Users.js
index 35b6b585..99c26525 100644
--- a/app/imports/api/users/Users.js
+++ b/app/imports/api/users/Users.js
@@ -127,6 +127,30 @@ Meteor.users.isAdmin = function(userId){
 	return user && user.roles.includes('admin');
 }
 
+Meteor.users.canPickUsername = new ValidatedMethod({
+	name: 'Users.methods.canPickUsername',
+	validate: userSchema.pick('username').validator(),
+	run({username}){
+		if (Meteor.isClient) return;
+		let user = Accounts.findUserByUsername(username);
+    // You can pick your own username
+    if (user && user._id === this.userId){
+      return false;
+    }
+		return !!user;
+	}
+});
+
+Meteor.users.setUsername = new ValidatedMethod({
+  name: 'Users.methods.setUsername',
+	validate: userSchema.pick('username').validator(),
+	run({username}){
+		if (!this.userId) throw 'Can only set your username if logged in';
+    if (Meteor.isClient) return;
+    return Accounts.setUsername(this.userId, username)
+	}
+});
+
 Meteor.users.findUserByUsernameOrEmail = new ValidatedMethod({
 	name: 'Users.methods.findUserByUsernameOrEmail',
 	validate: new SimpleSchema({
diff --git a/app/imports/ui/dialogStack/DialogComponentIndex.js b/app/imports/ui/dialogStack/DialogComponentIndex.js
index 1ae8cd41..66b13b9d 100644
--- a/app/imports/ui/dialogStack/DialogComponentIndex.js
+++ b/app/imports/ui/dialogStack/DialogComponentIndex.js
@@ -8,6 +8,7 @@ import LibraryEditDialog from '/imports/ui/library/LibraryEditDialog.vue';
 import LibraryNodeCreationDialog from '/imports/ui/library/LibraryNodeCreationDialog.vue';
 import LibraryNodeEditDialog from '/imports/ui/library/LibraryNodeEditDialog.vue';
 import ShareDialog from '/imports/ui/sharing/ShareDialog.vue';
+import UsernameDialog from '/imports/ui/user/UsernameDialog.vue';
 
 export default {
   CreatureFormDialog,
@@ -20,4 +21,5 @@ export default {
   LibraryNodeCreationDialog,
   LibraryNodeEditDialog,
 	ShareDialog,
+  UsernameDialog,
 };
diff --git a/app/imports/ui/pages/Account.vue b/app/imports/ui/pages/Account.vue
index 307762b3..581ee6d4 100644
--- a/app/imports/ui/pages/Account.vue
+++ b/app/imports/ui/pages/Account.vue
@@ -16,7 +16,7 @@
         <v-subheader>
           Username
         </v-subheader>
-        <v-list-tile>
+        <v-list-tile data-id="username">
           <v-list-tile-action>
             <v-tooltip right>
               <span>Change Username</span>
@@ -24,6 +24,7 @@
                 slot="activator"
                 icon
                 flat
+                @click="changeUsername"
               >
                 <v-icon>create</v-icon>
               </v-btn>
@@ -53,11 +54,13 @@
             <v-list-tile-title>
               Pledged amount: ${{ entitledCents/100 }}
             </v-list-tile-title>
+            <!--
             <v-list-tile-action>
               <v-btn icon>
                 <v-icon>refresh</v-icon>
               </v-btn>
             </v-list-tile-action>
+            -->
           </v-list-tile>
           <v-list-tile>
             <v-list-tile-title>
@@ -127,6 +130,12 @@
       },
     },
     methods: {
+      changeUsername(){
+        this.$store.commit('pushDialogStack', {
+          component: 'username-dialog',
+          elementId: 'username',
+        });
+      },
       signOut(){
         Meteor.logout();
         router.push('/');
diff --git a/app/imports/ui/user/UsernameDialog.vue b/app/imports/ui/user/UsernameDialog.vue
new file mode 100644
index 00000000..9555cce1
--- /dev/null
+++ b/app/imports/ui/user/UsernameDialog.vue
@@ -0,0 +1,81 @@
+<template lang="html">
+  <dialog-base>
+    <text-field
+      :value="newUsername || username"
+      @change="change"
+    />
+    <div
+      v-if="error"
+      class="error"
+    >
+      {{ error }}
+    </div>
+    <v-spacer slot="actions" />
+    <v-btn
+      slot="actions"
+      flat
+      :disabled="!valid"
+      :loading="loading"
+      @click="setUsername"
+    >
+      Update
+    </v-btn>
+  </dialog-base>
+</template>
+
+<script>
+import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+
+export default {
+  components: {
+    DialogBase,
+  },
+  data(){return {
+    valid: true,
+    newUsername: null,
+    updatingUsername: false,
+    error: null,
+    loading: false,
+  };},
+  meteor:{
+    username(){
+      let user = Meteor.user();
+      return user && user.username;
+    },
+  },
+  methods: {
+    change(username, ack){
+      this.loading = true;
+      Meteor.users.canPickUsername.call({username}, (error, result) => {
+        this.loading = false;
+        console.log({error, result})
+        if (error){
+          this.valid = false;
+          ack(error.message || error);
+        } else if (result){
+          this.valid = false;
+          ack('Username is already taken');
+        } else {
+          this.valid = true;
+          this.newUsername = username;
+          ack();
+        }
+      });
+    },
+    setUsername(){
+      this.loading = true;
+      Meteor.users.setUsername.call({username: this.newUsername}, error => {
+        this.loading = false;
+        if (error){
+          this.error = error.message || error;
+        } else {
+          this.$store.dispatch('popDialogStack')
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>