Minor tweaks in installation (#566)

* Don't show super admin password while loading

* Allow tab key in slug input (for tabbing to another field)

* Don't show project chooser arrow when 1 project

src/components/v-input/v-input.vue

@@ -135,7 +135,7 @@ export default defineComponent({
 
 		function processValue(event: KeyboardEvent) {
 			const key = event.key.toLowerCase();
-			const systemKeys = ['meta', 'shift', 'alt', 'backspace'];
+			const systemKeys = ['meta', 'shift', 'alt', 'backspace', 'tab'];
 			const value = (event.target as HTMLInputElement).value;
 
 			if (props.slug === true) {

src/routes/install/install-final.vue

@@ -7,18 +7,24 @@
 		</div>
 		<div class="pane-content">
 			<v-progress-linear v-if="loading" indeterminate />
-			<v-notice danger v-else-if="error">
-				{{ errorFormatted }}
-			</v-notice>
-			<template v-else>{{ $t('creating_project_success_copy') }}</template>
 
-			<template v-if="first">
-				<v-notice warning>
-					{{ $t('creating_project_success_super_admin_password') }}
+			<template v-else>
+				<v-notice danger v-if="error">
+					{{ errorFormatted }}
 				</v-notice>
-				<v-input readonly :value="token" />
+
+				<template v-else>{{ $t('creating_project_success_copy') }}</template>
+
+				<template v-if="first">
+					<v-notice warning>
+						{{ $t('creating_project_success_super_admin_password') }}
+					</v-notice>
+
+					<v-input readonly :value="_token" />
+				</template>
 			</template>
 		</div>
+
 		<div class="pane-buttons" v-if="!loading">
 			<v-button v-if="error" secondary @click="$emit('prev')">{{ $t('back') }}</v-button>
 			<v-button v-else @click="$emit('next')">{{ $t('sign_in') }}</v-button>
@@ -56,27 +62,31 @@ export default defineComponent({
 		},
 		token: {
 			type: String,
-			default: () => nanoid(),
+			default: null,
 		},
 	},
 	setup(props) {
 		const loading = ref(true);
 		const error = ref<RequestError>(null);
 
+		const _token = computed(() => {
+			return props.token || nanoid();
+		});
+
 		const errorFormatted = computed(() => {
 			return error.value && translateAPIError(error.value);
 		});
 
 		createProject();
 
-		return { loading, error, errorFormatted };
+		return { loading, error, errorFormatted, _token };
 
 		async function createProject() {
 			try {
 				await api.post('/server/projects', {
 					...props.database,
 					...props.project,
-					super_admin_token: props.token,
+					super_admin_token: _token.value,
 				});
 			} catch (err) {
 				error.value = err;
@@ -87,3 +97,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin: 24px 0;
+}
+</style>

src/views/public/components/project-chooser/project-chooser.vue

@@ -1,5 +1,11 @@
 <template>
-	<v-menu v-if="project" show-arrow placement="bottom-start" close-on-content-click>
+	<v-menu
+		v-if="project"
+		show-arrow
+		placement="bottom-start"
+		close-on-content-click
+		:disabled="projects.length <= 1"
+	>
 		<template #activator="{ toggle }">
 			<div class="project-chooser" @click="toggle">
 				<div class="public-view-logo" v-if="project && project.logo">
@@ -7,7 +13,7 @@
 				</div>
 				<img v-else class="default-logo" src="./logo-dark.svg" alt="Directus" />
 				<h1 class="title type-title">{{ project && (project.name || project.key) }}</h1>
-				<v-icon name="expand_more" />
+				<v-icon name="expand_more" v-if="projects.length > 1" />
 			</div>
 		</template>