Edit User client logic + Delete User UI

client/js/modals/admin-createuser.js → client/js/modals/admin-users-create.js

@@ -2,7 +2,7 @@
 // Vue Create User instance
 
 let vueCreateUser = new Vue({
-	el: '#modal-admin-createuser',
+	el: '#modal-admin-users-create',
 	data: {
 		email: '',
 		provider: 'local',
@@ -11,11 +11,11 @@ let vueCreateUser = new Vue({
 	},
 	methods: {
 		open: (ev) => {
-			$('#modal-admin-createuser').addClass('is-active');
+			$('#modal-admin-users-create').addClass('is-active');
-			$('#modal-admin-createuser input').first().focus();
+			$('#modal-admin-users-create input').first().focus();
 		},
 		cancel: (ev) => {
-			$('#modal-admin-createuser').removeClass('is-active');
+			$('#modal-admin-users-create').removeClass('is-active');
 			vueCreateUser.email = '';
 			vueCreateUser.provider = 'local';
 		},

client/js/modals/admin-users-delete.js

@@ -0,0 +1,22 @@
+
+// Vue Delete User instance
+
+let vueDeleteUser = new Vue({
+	el: '#modal-admin-users-delete',
+	data: {
+
+	},
+	methods: {
+		open: (ev) => {
+			$('#modal-admin-users-delete').addClass('is-active');
+		},
+		cancel: (ev) => {
+			$('#modal-admin-users-delete').removeClass('is-active');
+		},
+		deleteUser: (ev) => {
+			vueDeleteUser.cancel();
+		}
+	}
+});
+
+$('.btn-deluser-prompt').on('click', vueDeleteUser.open);

client/js/pages/admin.js

@@ -1,6 +1,50 @@
 
-if($('#page-type-admin').length) {
+if($('#page-type-admin-users').length) {
 
-	//=include ../modals/admin-createuser.js
+	//=include ../modals/admin-users-create.js
+
+} else if($('#page-type-admin-users-edit').length) {
+
+	let vueEditUser = new Vue({
+		el: '#page-type-admin-users-edit',
+		data: {
+			id: '',
+			email: '',
+			password: '********',
+			name: '',
+			rights: [],
+			roleoverride: 'none'
+		},
+		methods: {
+			addRightsRow: (ev) => {
+				vueEditUser.rights.push({});
+			},
+			removeRightsRow: (ev) => {
+
+			},
+			saveUser: (ev) => {
+
+
+			}
+		},
+		created: function() {
+
+			this.id = usrData._id;
+			this.email = usrData.email;
+			this.name = usrData.name;
+
+			console.log(_.find(usrData.rights, { role: 'admin' }));
+
+			if(_.find(usrData.rights, { role: 'admin' })) {
+				this.rights = _.reject(usrData.rights, ['role', 'admin']);
+				this.roleoverride = 'admin';
+			} else {
+				this.rights = usrData.rights;
+			}
+
+		}
+	});
+
+	//=include ../modals/admin-users-delete.js
 
 }

controllers/admin.js

@@ -69,9 +69,18 @@ router.get('/users/:id', (req, res) => {
 	}
 
 	db.User.findById(req.params.id)
-		.select('-password')
+		.select('-password -providerId')
 		.exec().then((usr) => {
-			res.render('pages/admin/users-edit', { adminTab: 'users', usr });
+			let usrOpts = {
+				canChangeEmail: (usr.email !== 'guest' && usr.provider === 'local' && usr.email !== req.app.locals.appconfig.admin),
+				canChangeName: (usr.email !== 'guest'),
+				canChangePassword: (usr.email !== 'guest' && usr.provider === 'local'),
+				canChangeRole: (usr.email !== 'guest' && !(usr.provider === 'local' && usr.email === req.app.locals.appconfig.admin)),
+				canBeDeleted: (usr.email !== 'guest' && !(usr.provider === 'local' && usr.email === req.app.locals.appconfig.admin))
+			};
+
+			res.render('pages/admin/users-edit', { adminTab: 'users', usr, usrOpts });
 		});
 
 });

views/modals/admin-createuser.pug

@@ -1,5 +1,5 @@
 
-.modal#modal-admin-createuser
+.modal#modal-admin-users-create
 	.modal-background
 	.modal-container
 		.modal-content

views/modals/admin-deleteuser.pug

@@ -0,0 +1,10 @@
+.modal#modal-admin-users-delete
+	.modal-background
+	.modal-container
+		.modal-content
+				header.is-red Delete User Account?
+				section
+					span Are you sure you want to delete this user account? This action cannot be undone!
+				footer
+					a.button.is-grey.is-outlined(v-on:click="cancel") Abort
+					a.button.is-red(v-on:click="deleteUser") Delete

views/pages/admin/users-edit.pug

@@ -8,7 +8,7 @@ block rootNavRight
 			span Return to Users
 
 block adminContent
-	#page-type-admin
+	#page-type-admin-users-edit
 		.hero
 			h1.title#title Edit User
 			h2.subtitle= usr.email
@@ -16,14 +16,12 @@ block adminContent
 			thead
 				tr
 					th Unique ID
-					th Email
 					th Provider
 					th Created On
 					th Updated On
 			tbody
 					tr
 						td.is-centered= usr._id
-						td.is-centered= usr.email
 						td.is-centered.has-icons
 							case usr.provider
 								when 'local'
@@ -42,15 +40,19 @@ block adminContent
 						td.is-centered= userMoment(usr.createdAt).format('lll')
 						td.is-centered= userMoment(usr.updatedAt).format('lll')
 		.form-sections
+			section
+				label.label Email Address
+				p.control.is-fullwidth
+					input.input(type='text', placeholder='john.smith@example.com', v-model='email', disabled=!usrOpts.canChangeEmail)
 			section
 				label.label Display Name
 				p.control.is-fullwidth
-					input.input(type='text', placeholder='John Smith', value=usr.name)
+					input.input(type='text', placeholder='John Smith', v-model='name', disabled=!usrOpts.canChangeName)
-			if usr.provider == 'local'
+			if usrOpts.canChangePassword
 				section
 					label.label Password
 					p.control.is-fullwidth
-						input.input(type='password', placeholder='Password', value='********')
+						input.input(type='password', placeholder='Password', v-model='password', value='********')
 			section
 				label.label Access Rights
 				table.table
@@ -62,7 +64,7 @@ block adminContent
 							th(style={width: '150px'}) Access
 							th(style={width: '50px'})
 					tbody
-						tr(v-for='right in rights')
+						tr(v-for='right in rights', v-cloak)
 							td.is-icon
 								i.icon-marquee-plus.is-green(v-if='!right.deny')
 								i.icon-marquee-minus.is-red(v-if='right.deny')
@@ -87,28 +89,38 @@ block adminContent
 										option(value='false') Allow
 										option(value='true') Deny
 							td.is-centered.has-action-icons
-								i.icon-delete.is-red
+								i.icon-delete.is-red(v-on:click='removeRightsRow(right._id)')
+						tr(v-if='rights.length < 1', v-cloak)
+							td.is-icon
+							td.is-centered(colspan='3'): em No additional access rights
+							td.is-centered.has-action-icons
 				.table-actions
-					button.button.is-blue
+					button.button.is-blue(v-on:click='addRightsRow')
 						i.icon-plus
 						span Add New Row
 			section
 				label.label Role Override
 				p.control.is-fullwidth
-					select(v-model='roleoverride')
+					select(v-model='roleoverride', disabled=!usrOpts.canChangeRole)
 						option(value='none') None
 						option(value='admin') Global Administrator
 			.columns.is-gapless
 				.column
 					section
-						button.button.is-green
+						button.button.is-green(v-on:click='saveUser')
 							i.icon-check
 							span Save Changes
-						button.button.is-grey.is-outlined
+						a.button.button.is-grey.is-outlined(href='/admin/users')
 							i.icon-cancel
 							span Discard
 				.column.is-narrow
 					section
-						button.button.is-red
+						if usrOpts.canBeDeleted
-							i.icon-trash2
+							button.button.is-red.btn-deluser-prompt
-							span Delete Account
+								i.icon-trash2
+								span Delete Account
+
+	include ../../modals/admin-deleteuser.pug
+
+	script(type='text/javascript').
+		var usrData = !{JSON.stringify(usr)};

views/pages/admin/users.pug

@@ -8,7 +8,7 @@ block rootNavRight
 			span Create / Authorize User
 
 block adminContent
-	#page-type-admin
+	#page-type-admin-users
 		.hero
 			h1.title#title Users
 			h2.subtitle Manage users and access rights