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

client: fix auth page layout

Browse source 
This also includes better rendering when no permissions are requested.

Changelog: Fixed
This commit is contained in:
Johann150 2022-10-16 21:09:30 +02:00
parent 20d8f6cd36
commit d16c717c3b
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
3 changed files with 45 additions and 30 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"

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

@ -8,9 +8,12 @@
</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<{
@ -150,4 +155,9 @@ function denied(): void {
function onLogin(res): void {
login(res.i);
}
definePageMetadata({
title: i18n.ts.appAuthorization,
icon: 'fas fa-shield',
});
</script>