From c5568cfdf3f9d414ec8b387cba95e5a313230792 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 16 Oct 2022 21:09:30 +0200
Subject: [PATCH] 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                       |  2 +
 packages/client/src/pages/auth.form.vue |  6 ++-
 packages/client/src/pages/auth.vue      | 68 ++++++++++++++-----------
 3 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 10e0e4c65..2051d16c2 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -830,6 +830,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"
diff --git a/packages/client/src/pages/auth.form.vue b/packages/client/src/pages/auth.form.vue
index d4af3b6db..035ffac9a 100644
--- a/packages/client/src/pages/auth.form.vue
+++ b/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>
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
index ac9a3e051..d2c57320f 100644
--- a/packages/client/src/pages/auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -1,32 +1,37 @@
 <template>
-<div v-if="$i">
-	<MkLoading v-if="state == 'fetching'"/>
-	<XForm
-		v-else-if="state == 'waiting'"
-		ref="form"
-		class="form"
-		:session="session"
-		@denied="denied"
-		@accepted="accepted"
-	/>
-	<div v-else-if="state == 'denied'" class="denied">
-		<h1>{{ i18n.ts._auth.denied }}</h1>
-	</div>
-	<div v-else-if="state == 'accepted'" class="accepted">
-		<h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1>
-		<p v-if="session.app.callbackUrl">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
-		<p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p>
-	</div>
-	<div v-else-if="state == 'fetch-session-error'" class="error">
-		<p>{{ i18n.ts.somethingHappened }}</p>
-	</div>
-	<div v-else-if="state == 'oauth-error'" class="error">
-		<p>{{ i18n.ts.oauthErrorGoBack }}</p>
-	</div>
-</div>
-<div v-else class="signin">
-	<MkSignin @login="onLogin"/>
-</div>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :max-content="700">
+		<div v-if="$i">
+			<MkLoading v-if="state == 'fetching'"/>
+			<XForm
+				v-else-if="state == 'waiting'"
+				ref="form"
+				class="form"
+				:session="session"
+				@denied="denied"
+				@accepted="accepted"
+			/>
+			<div v-else-if="state == 'denied'" class="denied">
+				<h1>{{ i18n.ts._auth.denied }}</h1>
+			</div>
+			<div v-else-if="state == 'accepted'" class="accepted">
+				<h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1>
+				<p v-if="session.app.callbackUrl">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
+				<p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p>
+			</div>
+			<div v-else-if="state == 'fetch-session-error'" class="error">
+				<p>{{ i18n.ts.somethingHappened }}</p>
+			</div>
+			<div v-else-if="state == 'oauth-error'" class="error">
+				<p>{{ i18n.ts.oauthErrorGoBack }}</p>
+			</div>
+		</div>
+		<div v-else class="signin">
+			<MkSignin @login="onLogin"/>
+		</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>