Change account settings to modal

appinfo/routes.php

@@ -34,11 +34,6 @@
 			'url' => '/setup',
 			'verb' => 'GET'
 		],
-		[
-			'name' => 'page#accountSettings',
-			'url' => '/accounts/{id}/settings',
-			'verb' => 'GET'
-		],
 		[
 			'name' => 'page#mailbox',
 			'url' => '/box/{id}',

lib/Controller/PageController.php

@@ -165,16 +165,6 @@ public function setup(): TemplateResponse {
 		return $this->index();
 	}
 
-	/**
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 *
-	 * @return TemplateResponse
-	 */
-	public function accountSettings(int $id): TemplateResponse {
-		return $this->index();
-	}
-
 	/**
 	 * @NoAdminRequired
 	 * @NoCSRFRequired

package.json

@@ -38,7 +38,7 @@
     "@nextcloud/logger": "^1.1.2",
     "@nextcloud/moment": "^1.1.1",
     "@nextcloud/router": "^1.2.0",
-    "@nextcloud/vue": "^2.8.1",
+    "@nextcloud/vue": "^3.1.0",
     "@nextcloud/vue-dashboard": "^1.0.1",
     "@vue/babel-preset-app": "^4.5.8",
     "color-convert": "^2.0.1",

src/components/AccountSettings.vue

@@ -0,0 +1,153 @@
+<!--
+  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<AppSettingsDialog
+		:open.sync="showSettings">
+		<AppSettingsSection
+			:title="t('mail', 'Account settings')">
+			<strong>{{ displayName }}</strong> &lt;{{ email }}&gt;
+			<a
+				v-if="!account.provisioned"
+				class="button icon-rename"
+				href="#account-form"
+				:title="t('mail', 'Change name')" />
+		</AppSettingsSection>
+		<AppSettingsSection :title="t('mail', 'Alias settings')">
+			<AliasSettings v-if="!account.provisioned" :account="account" />
+		</AppSettingsSection>
+		<AppSettingsSection :title="t('mail', 'Signature settings')">
+			<SignatureSettings :account="account" />
+		</AppSettingsSection>
+		<AppSettingsSection :title="t('mail', 'Editor settings')">
+			<EditorSettings :account="account" />
+			<div v-if="!account.provisioned" class="section">
+				<h2>{{ t('mail', 'Mail server') }}</h2>
+				<div id="mail-settings">
+					<AccountForm
+						:key="account.accountId"
+						:display-name="displayName"
+						:email="email"
+						:save="onSave"
+						:account="account" />
+				</div>
+			</div>
+		</AppSettingsSection>
+	</AppSettingsDialog>
+</template>
+
+<script>
+import AccountForm from '../components/AccountForm'
+import EditorSettings from '../components/EditorSettings'
+import Logger from '../logger'
+import SignatureSettings from '../components/SignatureSettings'
+import AliasSettings from '../components/AliasSettings'
+import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog'
+import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection'
+
+export default {
+	name: 'AccountSettings',
+	components: {
+		AccountForm,
+		AliasSettings,
+		EditorSettings,
+		SignatureSettings,
+		AppSettingsDialog,
+		AppSettingsSection,
+	},
+	props: {
+		account: {
+			required: true,
+			type: Object,
+		},
+		open: {
+			required: true,
+			type: Boolean,
+		},
+	},
+	data() {
+		return {
+			showSettings: false,
+		}
+	},
+	computed: {
+		menu() {
+			return this.buildMenu()
+		},
+		displayName() {
+			return this.account.name
+		},
+		email() {
+			return this.account.emailAddress
+		},
+	},
+	watch: {
+		showSettings(value) {
+			if (!value) {
+				this.$emit('update:open', value)
+			}
+		},
+		open(value) {
+			if (value) {
+				this.showSettings = true
+			}
+		},
+	},
+	methods: {
+		onSave(data) {
+			Logger.log('saving data', { data })
+			return this.$store
+				.dispatch('updateAccount', {
+					...data,
+					accountId: this.$route.params.accountId,
+				})
+				.then((account) => account)
+				.catch((error) => {
+					Logger.error('account update failed:', { error })
+
+					throw error
+				})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .modal-container {
+	display: block;
+	overflow: scroll;
+	transition: transform 300ms ease;
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 0 40px rgba(0,0,0,0.2);
+	padding: 30px 70px 20px;
+}
+.button.icon-rename {
+	background-image: var(--icon-rename-000);
+	background-color: var(--color-main-background);
+	border: none;
+	opacity: 0.7;
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
+}
+</style>

src/components/AliasSettings.vue

@@ -130,6 +130,15 @@ input {
 }
 .icon-delete {
 	vertical-align: bottom;
+	background-image: var(--icon-delete-000);
+	background-color: var(--color-main-background);
+	border: none;
+	opacity: 0.7;
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
 }
 .icon-add {
 	background-image: var(--icon-add-fff);

src/components/NavigationAccount.vue

@@ -38,9 +38,12 @@
 			<ActionText v-if="!account.isUnified" icon="icon-info" :title="t('mail', 'Quota')">
 				{{ quotaText }}
 			</ActionText>
-			<ActionRouter :to="settingsRoute" icon="icon-settings">
+			<ActionButton icon="icon-settings"
+				:close-after-click="true"
+				@click="showAccountSettings"
+				@shortkey="toggleAccountSettings">
 				{{ t('mail', 'Account settings') }}
-			</ActionRouter>
+			</ActionButton>
 			<ActionCheckbox
 				:checked="account.showSubscribedOnly"
 				:disabled="savingShowOnlySubscribed"
@@ -64,30 +67,33 @@
 				{{ t('mail', 'Remove account') }}
 			</ActionButton>
 		</template>
+
+		<template #extra>
+			<AccountSettings :open.sync="showSettings" :account="account" />
+		</template>
 	</AppNavigationItem>
 </template>
 
 <script>
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/AppNavigationIconBullet'
-import ActionRouter from '@nextcloud/vue/dist/Components/ActionRouter'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 
+import AccountSettings from './AccountSettings'
 import { calculateAccountColor } from '../util/AccountColor'
 import logger from '../logger'
 import { fetchQuota } from '../service/AccountService'
-
 export default {
 	name: 'NavigationAccount',
 	components: {
+		AccountSettings,
 		AppNavigationItem,
 		AppNavigationIconBullet,
-		ActionRouter,
 		ActionButton,
 		ActionCheckbox,
 		ActionInput,
@@ -121,20 +127,13 @@ export default {
 			quota: undefined,
 			editing: false,
 			showSaving: false,
+			showSettings: false,
 		}
 	},
 	computed: {
 		visible() {
 			return this.account.isUnified !== true && this.account.visible !== false
 		},
-		settingsRoute() {
-			return {
-				name: 'accountSettings',
-				params: {
-					accountId: this.account.id,
-				},
-			}
-		},
 		firstMailboxRoute() {
 			return {
 				name: 'mailbox',
@@ -267,6 +266,18 @@ export default {
 				this.quota = quota
 			}
 		},
+		/**
+		 * Toggles the account settings overview
+		 */
+		toggleAccountSettings() {
+			this.displayAccountSettings = !this.displayAccountSettings
+		},
+		/**
+		 * Shows the account settings
+		 */
+		showAccountSettings() {
+			this.showSettings = true
+		},
 	},
 }
 </script>

src/components/SignatureSettings.vue

@@ -112,7 +112,7 @@ export default {
 }
 
 .ck.ck-editor__editable_inline {
-	width: 400px;
+	width: 330px;
 	max-width: 78vw;
 	height: 100px;
 	border-radius: var(--border-radius) !important;

src/router.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
 
-const AccountSettings = () => import('./views/AccountSettings')
 const Home = () => import('./views/Home')
 const Setup = () => import('./views/Setup')
 
@@ -33,11 +32,6 @@ export default new Router({
 			name: 'message',
 			component: Home,
 		},
-		{
-			path: '/accounts/:accountId/settings',
-			name: 'accountSettings',
-			component: AccountSettings,
-		},
 		{
 			path: '/setup',
 			name: 'setup',