client: fix auth page layout

This also includes better rendering when no permissions are requested.

Also removed the app's id from the page as it makes no sense to show
this to a user.

Changelog: Fixed

locales/en-US.yml

@@ -931,6 +931,8 @@ removeTag: "Remove tag"
 externalCssSnippets: "Some CSS snippets for your inspiration (not managed by FoundKey)"
 oauthErrorGoBack: "An error happened while trying to authenticate a 3rd party app.\
     \ Please go back and try again."
+appAuthorization: "App authorization"
+noPermissionsRequested: "(No permissions requested.)"
 _emailUnavailable:
   used: "This email address is already being used"
   format: "The format of this email address is invalid"

packages/client/src/pages/auth.form.vue

@@ -3,14 +3,16 @@
 	<div class="_title">{{ i18n.t('_auth.shareAccess', { name: app.name }) }}</div>
 	<div class="_content">
 		<h2>{{ app.name }}</h2>
-		<p class="id">{{ app.id }}</p>
 		<p class="description">{{ app.description }}</p>
 	</div>
 	<div class="_content">
 		<h2>{{ i18n.ts._auth.permissionAsk }}</h2>
-		<ul>
+		<ul v-if="app.permission.length > 0">
 			<li v-for="p in app.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
 		</ul>
+		<template v-else>
+			{{ i18n.ts.noPermissionRequested }}
+		</template>
 	</div>
 	<div class="_footer">
 		<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>

packages/client/src/pages/auth.vue

@@ -1,5 +1,8 @@
 <template>
-<div v-if="$i">
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :max-content="700">
+		<div v-if="$i">
 			<MkLoading v-if="state == 'fetching'"/>
 			<XForm
 				v-else-if="state == 'waiting'"
@@ -23,10 +26,12 @@
 			<div v-else-if="state == 'oauth-error'" class="error">
 				<p>{{ i18n.ts.oauthErrorGoBack }}</p>
 			</div>
-</div>
-<div v-else class="signin">
+		</div>
+		<div v-else class="signin">
 			<MkSignin @login="onLogin"/>
-</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -36,7 +41,7 @@ import MkSignin from '@/components/signin.vue';
 import * as os from '@/os';
 import { login , $i } from '@/account';
 import { i18n } from '@/i18n';
-
+import { definePageMetadata } from '@/scripts/page-metadata';
 import { query, appendQuery } from '@/scripts/url';
 
 const props = defineProps<{
@@ -152,4 +157,9 @@ function denied(): void {
 function onLogin(res): void {
 	login(res.i);
 }
+
+definePageMetadata({
+	title: i18n.ts.appAuthorization,
+	icon: 'fas fa-shield',
+});
 </script>