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
This commit is contained in:
Johann150 2022-10-16 21:09:30 +02:00 committed by Gitea
parent c65fdebe26
commit c5568cfdf3
3 changed files with 45 additions and 31 deletions
locales
packages/client/src/pages

View file

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

View file

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

View file

@ -1,32 +1,37 @@
<template> <template>
<div v-if="$i"> <MkStickyContainer>
<MkLoading v-if="state == 'fetching'"/> <template #header><MkPageHeader/></template>
<XForm <MkSpacer :max-content="700">
v-else-if="state == 'waiting'" <div v-if="$i">
ref="form" <MkLoading v-if="state == 'fetching'"/>
class="form" <XForm
:session="session" v-else-if="state == 'waiting'"
@denied="denied" ref="form"
@accepted="accepted" class="form"
/> :session="session"
<div v-else-if="state == 'denied'" class="denied"> @denied="denied"
<h1>{{ i18n.ts._auth.denied }}</h1> @accepted="accepted"
</div> />
<div v-else-if="state == 'accepted'" class="accepted"> <div v-else-if="state == 'denied'" class="denied">
<h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1> <h1>{{ i18n.ts._auth.denied }}</h1>
<p v-if="session.app.callbackUrl">{{ i18n.ts._auth.callback }}<MkEllipsis/></p> </div>
<p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p> <div v-else-if="state == 'accepted'" class="accepted">
</div> <h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1>
<div v-else-if="state == 'fetch-session-error'" class="error"> <p v-if="session.app.callbackUrl">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
<p>{{ i18n.ts.somethingHappened }}</p> <p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p>
</div> </div>
<div v-else-if="state == 'oauth-error'" class="error"> <div v-else-if="state == 'fetch-session-error'" class="error">
<p>{{ i18n.ts.oauthErrorGoBack }}</p> <p>{{ i18n.ts.somethingHappened }}</p>
</div> </div>
</div> <div v-else-if="state == 'oauth-error'" class="error">
<div v-else class="signin"> <p>{{ i18n.ts.oauthErrorGoBack }}</p>
<MkSignin @login="onLogin"/> </div>
</div> </div>
<div v-else class="signin">
<MkSignin @login="onLogin"/>
</div>
</MkSpacer>
</MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -36,7 +41,7 @@ import MkSignin from '@/components/signin.vue';
import * as os from '@/os'; import * as os from '@/os';
import { login , $i } from '@/account'; import { login , $i } from '@/account';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { query, appendQuery } from '@/scripts/url'; import { query, appendQuery } from '@/scripts/url';
const props = defineProps<{ const props = defineProps<{
@ -152,4 +157,9 @@ function denied(): void {
function onLogin(res): void { function onLogin(res): void {
login(res.i); login(res.i);
} }
definePageMetadata({
title: i18n.ts.appAuthorization,
icon: 'fas fa-shield',
});
</script> </script>