Client - update scopes

This commit is contained in:
Sam 2022-06-15 20:37:24 +02:00
parent 8b2543eb61
commit 40a5fcccf3
6 changed files with 76 additions and 42 deletions

View File

@ -48,32 +48,29 @@
<div class="form-item-scope-label"> <div class="form-item-scope-label">
{{ $t('oauth2.APP.SCOPE.LABEL') }}* {{ $t('oauth2.APP.SCOPE.LABEL') }}*
</div> </div>
<div class="form-item-scope-checkboxes"> <div
<label> v-for="scope in oauth2_scopes"
class="form-item-scope-checkboxes"
:key="scope"
>
<label class="scope-label">
<input <input
type="checkbox" type="checkbox"
:checked="appForm.read" :name="scope"
@change="appForm.read = !appForm.read" :checked="scopes.includes(scope)"
@change="updateScopes(scope)"
/> />
{{ $t('oauth2.APP.SCOPE.READ') }} <code>{{ scope }}</code>
</label>
<label>
<input
type="checkbox"
:checked="appForm.write"
@change="appForm.write = !appForm.write"
/>
{{ $t('oauth2.APP.SCOPE.WRITE') }}
</label> </label>
<p
class="scope-description"
v-html="$t(`oauth2.APP.SCOPE.${scope}_DESCRIPTION`)"
></p>
</div> </div>
</div> </div>
</div> </div>
<div class="form-buttons"> <div class="form-buttons">
<button <button class="confirm" type="submit" :disabled="scopes.length === 0">
class="confirm"
type="submit"
:disabled="!appForm.read && !appForm.write"
>
{{ $t('buttons.SUBMIT') }} {{ $t('buttons.SUBMIT') }}
</button> </button>
<button <button
@ -94,6 +91,7 @@
import { OAUTH2_STORE } from '@/store/constants' import { OAUTH2_STORE } from '@/store/constants'
import { IOAuth2ClientPayload } from '@/types/oauth' import { IOAuth2ClientPayload } from '@/types/oauth'
import { useStore } from '@/use/useStore' import { useStore } from '@/use/useStore'
import { oauth2_scopes } from '@/utils/oauth'
const store = useStore() const store = useStore()
const appForm = reactive({ const appForm = reactive({
@ -101,9 +99,8 @@
client_uri: '', client_uri: '',
client_description: '', client_description: '',
redirect_uri: '', redirect_uri: '',
read: true,
write: false,
}) })
const scopes: string[] = reactive([])
function createApp() { function createApp() {
const payload: IOAuth2ClientPayload = { const payload: IOAuth2ClientPayload = {
@ -111,13 +108,21 @@
client_description: appForm.client_description, client_description: appForm.client_description,
client_uri: appForm.client_uri, client_uri: appForm.client_uri,
redirect_uris: [appForm.redirect_uri], redirect_uris: [appForm.redirect_uri],
scope: `${appForm.read ? 'read' : ''} ${appForm.write ? 'write' : ''}`, scope: scopes.join(' '),
} }
store.dispatch(OAUTH2_STORE.ACTIONS.CREATE_CLIENT, payload) store.dispatch(OAUTH2_STORE.ACTIONS.CREATE_CLIENT, payload)
} }
function updateDescription(value: string) { function updateDescription(value: string) {
appForm.client_description = value appForm.client_description = value
} }
function updateScopes(scope: string) {
const index = scopes.indexOf(scope)
if (index > -1) {
scopes.splice(index, 1)
} else {
scopes.push(scope)
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -135,7 +140,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
input { input[type='text'] {
height: 20px; height: 20px;
} }
.form-item-scope { .form-item-scope {
@ -146,8 +151,15 @@
} }
.form-item-scope-checkboxes { .form-item-scope-checkboxes {
display: flex; padding-bottom: $default-padding;
gap: $default-padding;
.scope-label {
height: inherit;
}
.scope-description {
font-style: italic;
margin: 0 $default-margin * 0.5;
}
} }
} }

View File

@ -9,17 +9,16 @@
</i18n-t> </i18n-t>
</h1> </h1>
<ErrorMessage :message="errorMessages" v-if="errorMessages" /> <ErrorMessage :message="errorMessages" v-if="errorMessages" />
<div class="oauth2-access"> <div class="oauth2-access description-list">
<p>{{ $t('oauth2.APP_REQUESTING_ACCESS') }}</p> <p>{{ $t('oauth2.APP_REQUESTING_ACCESS') }}</p>
<ul> <dl>
<li <template v-for="scope in client.scope.split(' ')" :key="scope">
class="client-scope" <dt class="client-scope">
v-for="scope in client.scope.split(' ')" <code>{{ scope }}</code>
:key="scope" </dt>
> <dd v-html="$t(`oauth2.APP.SCOPE.${scope}_DESCRIPTION`)"></dd>
{{ $t(`oauth2.APP.SCOPE.${scope.toUpperCase()}`) }} </template>
</li> </dl>
</ul>
<div class="authorize-oauth2-buttons"> <div class="authorize-oauth2-buttons">
<button class="danger" @click="authorizeApp"> <button class="danger" @click="authorizeApp">
{{ $t('buttons.AUTHORIZE') }} {{ $t('buttons.AUTHORIZE') }}

View File

@ -53,13 +53,13 @@
{{ client.redirect_uris.length > 0 ? client.redirect_uris[0] : '' }} {{ client.redirect_uris.length > 0 ? client.redirect_uris[0] : '' }}
</dd> </dd>
<dt>{{ $t('oauth2.APP.SCOPE.LABEL') }}:</dt> <dt>{{ $t('oauth2.APP.SCOPE.LABEL') }}:</dt>
<dd> <dd class="client-scopes">
<span <span
class="client-scope" class="client-scope"
v-for="scope in client.scope.split(' ')" v-for="scope in client.scope.split(' ')"
:key="scope" :key="scope"
> >
{{ $t(`oauth2.APP.SCOPE.${scope.toUpperCase()}`) }} <code>{{ scope }}</code>
</span> </span>
</dd> </dd>
</dl> </dl>
@ -183,8 +183,12 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: $default-padding; gap: $default-padding;
} }
.client-scope { .client-scopes {
padding-right: $default-padding * 0.5; display: flex;
flex-wrap: wrap;
.client-scope {
padding-right: $default-padding * 1.5;
}
} }
.no-description { .no-description {
font-style: italic; font-style: italic;

View File

@ -9,8 +9,13 @@
"REDIRECT_URL": "Redirect URL", "REDIRECT_URL": "Redirect URL",
"SCOPE": { "SCOPE": {
"LABEL": "Scope", "LABEL": "Scope",
"READ": "read", "application:write_DESCRIPTION": "grants write access to application configuration.",
"WRITE": "write" "profile:read_DESCRIPTION": "grants read access to <code>auth</code> endpoints.",
"profile:write_DESCRIPTION": "grants write access to <code>auth</code> endpoints.",
"users:read_DESCRIPTION": "grants read access to <code>users</code> endpoints.",
"users:write_DESCRIPTION": "grants write access to <code>users</code> endpoints.",
"workouts:read_DESCRIPTION": "grants read access to <code>workouts</code> endpoints.",
"workouts:write_DESCRIPTION": "grants write access to <code>workouts</code> endpoints."
}, },
"URL": "Application URL" "URL": "Application URL"
}, },

View File

@ -9,8 +9,13 @@
"REDIRECT_URL": "URL de redirection", "REDIRECT_URL": "URL de redirection",
"SCOPE": { "SCOPE": {
"LABEL": "Scope", "LABEL": "Scope",
"READ": "lecture", "application:write_DESCRIPTION": "donne les droits en écriture à la configuration de l'application.",
"WRITE": "écriture" "profile:read_DESCRIPTION": "donne les droits en lecture aux routes <code>auth</code>.",
"profile:write_DESCRIPTION": "donne les droits en écriture aux routes <code>auth</code>.",
"users:read_DESCRIPTION": "donne les droits en lecture aux routes <code>users</code>.",
"users:write_DESCRIPTION": "donne les droits en écriture aux routes <code>users</code>.",
"workouts:read_DESCRIPTION": "donne les droits en lecture aux routes <code>workouts</code>.",
"workouts:write_DESCRIPTION": "donne les droits en écriture aux routes <code>workouts</code>."
}, },
"URL": "URL de l'application" "URL": "URL de l'application"
}, },

View File

@ -0,0 +1,9 @@
export const oauth2_scopes = [
'application:write',
'profile:read',
'profile:write',
'users:read',
'users:write',
'workouts:read',
'workouts:write',
]