Improve admin UI (#2802)

src/client/app/desktop/views/pages/admin/admin.announcements.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="qldxjjsrseehkusjuoooapmsprvfrxyl mk-admin-card">
 	<header>%i18n:@announcements%</header>
-	<textarea v-model="broadcasts"></textarea>
+	<textarea v-model="broadcasts" placeholder='[ { "title": "Title1", "text": "Text1" }, { "title": "Title2", "text": "Text2" } ]'></textarea>
 	<button class="ui" @click="save">%i18n:@save%</button>
 </div>
 </template>
@@ -22,8 +22,21 @@ export default Vue.extend({
 	},
 	methods: {
 		save() {
+			let json;
+
+			try {
+				json = JSON.parse(this.broadcasts);
+			} catch (e) {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+				return;
+			}
+
 			(this as any).api('admin/update-meta', {
-				broadcasts: JSON.parse(this.broadcasts)
+				broadcasts: json
+			}).then(() => {
+				(this as any).os.apis.dialog({ text: `Saved` });
+			}.catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed ${e}` });
 			});
 		}
 	}

src/client/app/desktop/views/pages/admin/admin.dashboard.vue

@@ -13,7 +13,7 @@
 		<x-cpu-memory :connection="connection"/>
 	</div>
 
-	<div class="form">
+	<div v-if="this.$store.state.i && this.$store.state.i.isAdmin" class="form">
 		<div>
 			<label>
 				<p>%i18n:@banner-url%</p>
@@ -81,6 +81,8 @@ export default Vue.extend({
 		invite() {
 			(this as any).api('admin/invite').then(x => {
 				this.inviteCode = x.code;
+			}).catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed ${e}` });
 			});
 		},
 		updateMeta() {
@@ -88,6 +90,10 @@ export default Vue.extend({
 				disableRegistration: this.disableRegistration,
 				disableLocalTimeline: this.disableLocalTimeline,
 				bannerUrl: this.bannerUrl
+			}).then(() => {
+				(this as any).os.apis.dialog({ text: `Saved` });
+			}).catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed ${e}` });
 			});
 		}
 	}

src/client/app/desktop/views/pages/admin/admin.hashtags.vue

@@ -24,6 +24,10 @@ export default Vue.extend({
 		save() {
 			(this as any).api('admin/update-meta', {
 				hidedTags: this.hidedTags.split('\n')
+			}).then(() => {
+				(this as any).os.apis.dialog({ text: `Saved` });
+			}).catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed ${e}` });
 			});
 		}
 	}

src/client/app/desktop/views/pages/admin/admin.suspend-user.vue

@@ -21,6 +21,7 @@ export default Vue.extend({
 		async suspendUser() {
 			this.suspending = true;
 
+			const process = async () => {
 				const user = await (this as any).os.api(
 					"users/show",
 					parseAcct(this.username)
@@ -30,9 +31,14 @@ export default Vue.extend({
 					userId: user.id
 				});
 
-			this.suspending = false;
-
 				(this as any).os.apis.dialog({ text: "%i18n:@suspended%" });
+			};
+
+			await process().catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+			});
+
+			this.suspending = false;
 		}
 	}
 });

src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue

@@ -21,6 +21,7 @@ export default Vue.extend({
 		async unsuspendUser() {
 			this.unsuspending = true;
 
+			const process = async () => {
 				const user = await (this as any).os.api(
 					"users/show",
 					parseAcct(this.username)
@@ -30,9 +31,15 @@ export default Vue.extend({
 					userId: user.id
 				});
 
+				(this as any).os.apis.dialog({ text: "%i18n:@unsuspended%" });
+			};
+
+			await process().catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+			});
+
 			this.unsuspending = false;
 
-			(this as any).os.apis.dialog({ text: "%i18n:@unsuspended%" });
 		}
 	}
 });

src/client/app/desktop/views/pages/admin/admin.unverify-user.vue

@@ -21,6 +21,7 @@ export default Vue.extend({
 		async unverifyUser() {
 			this.unverifying = true;
 
+			const process = async () => {
 				const user = await (this as any).os.api(
 					"users/show",
 					parseAcct(this.username)
@@ -30,9 +31,14 @@ export default Vue.extend({
 					userId: user.id
 				});
 
-			this.unverifying = false;
-
 				(this as any).os.apis.dialog({ text: "%i18n:@unverified%" });
+			};
+
+			await process().catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+			});
+
+			this.unverifying = false;
 		}
 	}
 });

src/client/app/desktop/views/pages/admin/admin.verify-user.vue

@@ -21,6 +21,7 @@ export default Vue.extend({
 		async verifyUser() {
 			this.verifying = true;
 
+			const process = async () => {
 				const user = await (this as any).os.api(
 					"users/show",
 					parseAcct(this.username)
@@ -30,9 +31,14 @@ export default Vue.extend({
 					userId: user.id
 				});
 
-			this.verifying = false;
-
 				(this as any).os.apis.dialog({ text: "%i18n:@verified%" });
+			};
+
+			await process().catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+			});
+
+			this.verifying = false;
 		}
 	}
 });

src/client/app/desktop/views/pages/admin/admin.vue

@@ -3,9 +3,15 @@
 	<nav>
 		<ul>
 			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:chalkboard .fw%%i18n:@dashboard%</li>
-			<li @click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li>
+
-			<li @click="nav('announcements')" :class="{ active: page == 'announcements' }">%fa:broadcast-tower .fw%%i18n:@announcements%</li>
+			<li v-if="this.$store.state.i && this.$store.state.i.isAdmin"
-			<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }">%fa:hashtag .fw%%i18n:@hashtags%</li>
+				@click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li>
+
+			<li v-if="this.$store.state.i && this.$store.state.i.isAdmin"
+				@click="nav('announcements')" :class="{ active: page == 'announcements' }">%fa:broadcast-tower .fw%%i18n:@announcements%</li>
+
+			<li v-if="this.$store.state.i && this.$store.state.i.isAdmin"
+				@click="nav('hashtags')" :class="{ active: page == 'hashtags' }">%fa:hashtag .fw%%i18n:@hashtags%</li>
 
 			<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:@drive%</li> -->
 			<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->