Client: Improve API settings

src/client/app/desktop/views/components/settings.2fa.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="2fa">
 	<p>%i18n:@intro%<a href="%i18n:@url%" target="_blank">%i18n:@detail%</a></p>
-	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:@caution%</p></div>
+	<ui-info warn>%i18n:@caution%</ui-info>
 	<p v-if="!data && !$store.state.i.twoFactorEnabled"><ui-button @click="register">%i18n:@register%</ui-button></p>
 	<template v-if="$store.state.i.twoFactorEnabled">
 		<p>%i18n:@already-registered%</p>

src/client/app/desktop/views/components/settings.api.vue

@@ -1,40 +0,0 @@
-<template>
-<div class="root api">
-	<ui-input :value="$store.state.i.token" readonly>
-		<span>%i18n:@token%</span>
-	</ui-input>
-	<p>%i18n:@intro%</p>
-	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:@caution%</p></div>
-	<p>%i18n:@regeneration-of-token%</p>
-	<ui-button @click="regenerateToken">%i18n:@regenerate-token%</ui-button>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	methods: {
-		regenerateToken() {
-			(this as any).apis.input({
-				title: '%i18n:@enter-password%',
-				type: 'password'
-			}).then(password => {
-				(this as any).api('i/regenerate_token', {
-					password: password
-				});
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.root.api
-	code
-		display inline-block
-		padding 4px 6px
-		color #555
-		background #eee
-		border-radius 2px
-</style>

src/client/app/desktop/views/components/settings.vue

@@ -235,12 +235,9 @@
 			</section>
 		</ui-card>
 
-		<ui-card class="api" v-show="page == 'api'">
-			<div slot="title">%fa:key% API</div>
-			<section class="fit-top">
-				<x-api/>
-			</section>
-		</ui-card>
+		<div class="api" v-show="page == 'api'">
+			<mk-api-settings/>
+		</div>
 
 		<ui-card class="other" v-show="page == 'other'">
 			<div slot="title">%fa:info-circle% %i18n:@about%</div>
@@ -295,7 +292,6 @@ import Vue from 'vue';
 import XMute from './settings.mute.vue';
 import XPassword from './settings.password.vue';
 import X2fa from './settings.2fa.vue';
-import XApi from './settings.api.vue';
 import XApps from './settings.apps.vue';
 import XSignins from './settings.signins.vue';
 import XTags from './settings.tags.vue';
@@ -307,7 +303,6 @@ export default Vue.extend({
 		XMute,
 		XPassword,
 		X2fa,
-		XApi,
 		XApps,
 		XSignins,
 		XTags