wait-what/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

client: fix auth page layout

Browse source 
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
parent 741ceb82df
commit c6ac67a3f7
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
3 changed files with 45 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
locales/en-US.yml
View file

@ -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"

6
packages/client/src/pages/auth.form.vue
View file

@ -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>

68
packages/client/src/pages/auth.vue
View file

@ -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>