Change account settings into modal

Signed-off-by: GretaD <gretadoci@gmail.com>

10 files changed, 222 insertions, 156 deletions

diff --git a/appinfo/routes.php b/appinfo/routes.php
index 3093b5c73..01af30c94 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -35,11 +35,6 @@ return [
 			'verb' => 'GET'
 		],
 		[
-			'name' => 'page#accountSettings',
-			'url' => '/accounts/{id}/settings',
-			'verb' => 'GET'
-		],
-		[
 			'name' => 'page#mailbox',
 			'url' => '/box/{id}',
 			'verb' => 'GET'
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index 4577bc983..4091519b3 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -174,16 +174,6 @@ class PageController extends Controller {
 	 *
 	 * @return TemplateResponse
 	 */
-	public function accountSettings(int $id): TemplateResponse {
-		return $this->index();
-	}
-
-	/**
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 *
-	 * @return TemplateResponse
-	 */
 	public function mailbox(int $id): TemplateResponse {
 		return $this->index();
 	}
diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
index ad5f86668..a37cc7dea 100644
--- a/src/components/AccountForm.vue
+++ b/src/components/AccountForm.vue
@@ -358,6 +358,7 @@ export default {
 	flex-grow: 1;
 	text-align: center;
 	color: var(--color-text-lighter);
+	margin-bottom: 10px;
 }
 
 ::v-deep .tabs-component-tab.is-active {
diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue
new file mode 100644
index 000000000..066039b17
--- /dev/null
+++ b/src/components/AccountSettings.vue
@@ -0,0 +1,183 @@
+<!--
+  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  - @copyright 2020 Greta Doci <gretadoci@gmail.com>
+  -
+  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  - @author 2020 Greta Doci <gretadoci@gmail.com>
+  -
+  -
+  - @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"
+				:title="t('mail', 'Change name')"
+				@click="handleClick" />
+			<AliasSettings v-if="!account.provisioned" :account="account" />
+		</AppSettingsSection>
+		<AppSettingsSection :title="t('mail', 'Signature')">
+			<p class="settings-hint">
+				{{ t('mail', 'A signature is added to the text of new messages and replies.') }}
+			</p>
+			<SignatureSettings :account="account" />
+		</AppSettingsSection>
+		<AppSettingsSection :title="t('mail', 'Writing mode')">
+			<p class="settings-hint">
+				{{ t('mail', 'Preferred writing mode for new messages and replies.') }}
+			</p>
+			<EditorSettings :account="account" />
+		</AppSettingsSection>
+
+		<AppSettingsSection :title="t('mail', 'Mail server')">
+			<div v-if="!account.provisioned">
+				<div id="mail-settings">
+					<AccountForm
+						:key="account.accountId"
+						ref="accountForm"
+						: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
+				})
+		},
+		handleClick() {
+			this.$refs.accountForm.$el.scrollIntoView({
+				behavior: 'smooth',
+			})
+
+		},
+	},
+}
+</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;
+	}
+}
+.settings-hint {
+	margin-top: -12px;
+	margin-bottom: 6px;
+	color: var(--color-text-maxcontrast);
+}
+h2 {
+	font-weight: bold;
+	font-size: 20px;
+	margin-bottom: 12px;
+	margin-left: -30px;
+	line-height: 30px;
+	color: var(--color-text-light);
+}
+.app-settings-section {
+margin-bottom: 45px;
+}
+
+</style>
diff --git a/src/components/AliasSettings.vue b/src/components/AliasSettings.vue
index 6707396c5..c7fd79025 100644
--- a/src/components/AliasSettings.vue
+++ b/src/components/AliasSettings.vue
@@ -130,6 +130,14 @@ 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);
diff --git a/src/components/EditorSettings.vue b/src/components/EditorSettings.vue
index fc260ba24..bc7523059 100644
--- a/src/components/EditorSettings.vue
+++ b/src/components/EditorSettings.vue
@@ -20,11 +20,7 @@
   -->
 
 <template>
-	<div class="section">
-		<h2>{{ t('mail', 'Writing mode') }}</h2>
-		<p class="settings-hint">
-			{{ t('mail', 'Preferred writing mode for new messages and replies.') }}
-		</p>
+	<div>
 		<p>
 			<input id="plaintext"
 				v-model="mode"
@@ -85,11 +81,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.settings-hint {
-	margin-top: -12px;
-	margin-bottom: 6px;
-	color: var(--color-text-maxcontrast);
-}
 
 label {
 	padding-right: 12px;
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
index 20d1e56a9..e543f5656 100644
--- a/src/components/NavigationAccount.vue
+++ b/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,13 +67,15 @@
 				{{ 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'
@@ -81,17 +86,18 @@ import { generateUrl } from '@nextcloud/router'
 import { calculateAccountColor } from '../util/AccountColor'
 import logger from '../logger'
 import { fetchQuota } from '../service/AccountService'
+import AccountSettings from './AccountSettings'
 
 export default {
 	name: 'NavigationAccount',
 	components: {
 		AppNavigationItem,
 		AppNavigationIconBullet,
-		ActionRouter,
 		ActionButton,
 		ActionCheckbox,
 		ActionInput,
 		ActionText,
+		AccountSettings,
 	},
 	props: {
 		account: {
@@ -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>
diff --git a/src/components/SignatureSettings.vue b/src/components/SignatureSettings.vue
index 1d399859d..b8cbbeeca 100644
--- a/src/components/SignatureSettings.vue
+++ b/src/components/SignatureSettings.vue
@@ -21,10 +21,6 @@
 
 <template>
 	<div class="section">
-		<h2>{{ t('mail', 'Signature') }}</h2>
-		<p class="settings-hint">
-			{{ t('mail', 'A signature is added to the text of new messages and replies.') }}
-		</p>
 		<TextEditor v-model="signature"
 			:html="true"
 			:placeholder="t('mail', 'Signature …')"
@@ -103,14 +99,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.settings-hint {
-	margin-top: -12px;
-	margin-bottom: 6px;
-	color: var(--color-text-maxcontrast);
-}
 
 .ck.ck-editor__editable_inline {
-	width: 400px;
+	width: 330px;
 	max-width: 78vw;
 	height: 100px;
 	border-radius: var(--border-radius) !important;
@@ -139,4 +130,9 @@ export default {
 		color: var(--color-main-text);
 	}
 }
+.section {
+	display: block;
+	padding: 0;
+	margin-bottom: 23px;
+}
 </style>
diff --git a/src/router.js b/src/router.js
index 5b00f696a..313b83116 100644
--- a/src/router.js
+++ b/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')
 
@@ -34,11 +33,6 @@ export default new Router({
 			component: Home,
 		},
 		{
-			path: '/accounts/:accountId/settings',
-			name: 'accountSettings',
-			component: AccountSettings,
-		},
-		{
 			path: '/setup',
 			name: 'setup',
 			component: Setup,
diff --git a/src/views/AccountSettings.vue b/src/views/AccountSettings.vue
deleted file mode 100644
index 2df04e4bd..000000000
--- a/src/views/AccountSettings.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-	<Content app-name="mail">
-		<Navigation />
-		<AppContent>
-			<div class="section">
-				<h2>{{ t('mail', 'Account settings') }}</h2>
-				<p>
-					<strong>{{ displayName }}</strong> &lt;{{ email }}&gt;
-					<a
-						v-if="!account.provisioned"
-						class="button icon-rename"
-						href="#account-form"
-						:title="t('mail', 'Change name')" />
-				</p>
-				<AliasSettings v-if="!account.provisioned" :key="'alias-settings-' + account.id" :account="account" />
-			</div>
-			<SignatureSettings :key="'signature-settings-' + account.id" :account="account" />
-			<EditorSettings :key="'editor-settings-' + account.id" :account="account" />
-			<AccountDefaultsSettings :key="'defaults-settings-' + account.id" :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>
-		</AppContent>
-	</Content>
-</template>
-
-<script>
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import Content from '@nextcloud/vue/dist/Components/Content'
-
-import AccountDefaultsSettings from '../components/AccountDefaultsSettings'
-import AccountForm from '../components/AccountForm'
-import AliasSettings from '../components/AliasSettings'
-import EditorSettings from '../components/EditorSettings'
-import Logger from '../logger'
-import Navigation from '../components/Navigation'
-import SignatureSettings from '../components/SignatureSettings'
-
-export default {
-	name: 'AccountSettings',
-	components: {
-		AccountDefaultsSettings,
-		AccountForm,
-		AliasSettings,
-		AppContent,
-		Content,
-		EditorSettings,
-		Navigation,
-		SignatureSettings,
-	},
-	computed: {
-		menu() {
-			return this.buildMenu()
-		},
-		account() {
-			return this.$store.getters.getAccount(this.$route.params.accountId)
-		},
-		displayName() {
-			return this.$store.getters.getAccount(this.$route.params.accountId).name
-		},
-		email() {
-			return this.$store.getters.getAccount(this.$route.params.accountId).emailAddress
-		},
-	},
-	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>
-.button.icon-rename {
-	background-color: transparent;
-	border: none;
-	opacity: 0.3;
-
-	&:hover,
-	&:focus {
-		opacity: 1;
-	}
-}
-</style>