Install recommended apps with a button

Signed-off-by: Christopher Ng <chrng8@gmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

Author: Pytal

core/css/guest.css

@@ -678,7 +678,8 @@ form #selectDbType label span {
 .warning,
 .update,
 .error {
-	display: block;
+	display: flex;
+	flex-direction: column;
 	margin-top: 15px;
 	padding: 15px;
 	background-color: rgba(0,0,0,.3);

core/src/components/setup/InstallButton.vue

@@ -0,0 +1,44 @@
+<!--
+  - @copyright 2022 Christopher Ng <chrng8@gmail.com>
+  -
+  - @author Christopher Ng <chrng8@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>
+	<button
+		class="primary"
+		:autofocus="true"
+		v-on="$listeners">
+		{{ t('core', 'Install recommended apps') }}
+	</button>
+</template>
+
+<script>
+export default {
+	name: 'InstallButton',
+}
+</script>
+
+<style lang="scss" scoped>
+	button {
+		margin: 20px auto 30px auto;
+		padding: 10px 20px;
+		font-size: 20px;
+	}
+</style>

core/src/components/setup/RecommendedApps.vue

@@ -23,14 +23,11 @@
 	<div class="body-login-container">
 		<h2>{{ t('core', 'Recommended apps') }}</h2>
 		<p v-if="loadingApps" class="loading text-center">
-			{{ t('core', 'Loading apps …') }}
+			{{ t('core', 'Installing apps …') }}
 		</p>
 		<p v-else-if="loadingAppsError" class="loading-error text-center">
 			{{ t('core', 'Could not fetch list of apps from the App Store.') }}
 		</p>
-		<p v-else class="text-center">
-			{{ t('core', 'Installing apps …') }}
-		</p>
 		<div v-for="app in recommendedApps" :key="app.id" class="app">
 			<img :src="customIcon(app.id)" alt="">
 			<div class="info">
@@ -51,6 +48,10 @@
 				</p>
 			</div>
 		</div>
+
+		<InstallButton v-if="showInstallButton"
+			@click.stop.prevent="installRecommendedApps" />
+
 		<p class="text-center">
 			<a :href="defaultPageUrl">{{ t('core', 'Cancel') }}</a>
 		</p>
@@ -64,6 +65,9 @@ import { loadState } from '@nextcloud/initial-state'
 import pLimit from 'p-limit'
 import { translate as t } from '@nextcloud/l10n'
 
+// TODO replace with Button component when @nextcloud/vue is upgraded to v5
+import InstallButton from './InstallButton'
+
 import logger from '../../logger'
 
 const recommended = {
@@ -97,9 +101,13 @@ const defaultPageUrl = loadState('core', 'defaultPageUrl')
 
 export default {
 	name: 'RecommendedApps',
+	components: {
+		InstallButton,
+	},
 	data() {
 		return {
-			loadingApps: true,
+			showInstallButton: true,
+			loadingApps: false,
 			loadingAppsError: false,
 			apps: [],
 			defaultPageUrl,
@@ -110,27 +118,30 @@ export default {
 			return this.apps.filter(app => recommendedIds.includes(app.id))
 		},
 	},
-	mounted() {
-		return axios.get(generateUrl('settings/apps/list'))
-			.then(resp => resp.data)
-			.then(data => {
-				logger.info(`${data.apps.length} apps fetched`)
-
-				this.apps = data.apps.map(app => Object.assign(app, { loading: false, installationError: false }))
-				logger.debug(`${this.recommendedApps.length} recommended apps found`, { apps: this.recommendedApps })
-
-				this.installApps()
-			})
-			.catch(error => {
-				logger.error('could not fetch app list', { error })
-
-				this.loadingAppsError = true
-			})
-			.then(() => {
-				this.loadingApps = false
-			})
-	},
 	methods: {
+		installRecommendedApps() {
+			this.showInstallButton = false
+			this.loadingApps = true
+
+			return axios.get(generateUrl('settings/apps/list'))
+				.then(resp => resp.data)
+				.then(data => {
+					logger.info(`${data.apps.length} apps fetched`)
+
+					this.apps = data.apps.map(app => Object.assign(app, { loading: false, installationError: false }))
+					logger.debug(`${this.recommendedApps.length} recommended apps found`, { apps: this.recommendedApps })
+
+					this.installApps()
+				})
+				.catch(error => {
+					logger.error('could not fetch app list', { error })
+
+					this.loadingAppsError = true
+				})
+				.then(() => {
+					this.loadingApps = false
+				})
+		},
 		installApps() {
 			const limit = pLimit(1)
 			const installing = this.recommendedApps