oauth/resources/js/pages/Authorize.vue

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const data = window.__OAUTH_AUTHORIZE__ ?? null;
const approveForm = ref<HTMLFormElement | null>(null);
const denyForm = ref<HTMLFormElement | null>(null);
</script>

<template>
    <div class="auth-page">
        <div class="auth-page__glow"></div>

        <div class="auth-card auth-card--wide">
            <template v-if="data">
                <span class="auth-card__logo">O2</span>
                <h1 class="auth-card__title">{{ t('authorize.title') }}</h1>
                <p class="auth-card__subtitle">
                    <i18n-t keypath="authorize.wantsAccess" tag="span">
                        <template #client><strong>{{ data.client.name }}</strong></template>
                        <template #email>{{ data.user.email }}</template>
                    </i18n-t>
                </p>

                <ul class="auth-card__scopes">
                    <li v-for="scope in data.scopes" :key="scope.id" class="auth-card__scope">
                        <span class="auth-card__scope-check">✓</span>
                        {{ scope.description }}
                    </li>
                    <li v-if="!data.scopes.length" class="auth-card__scope">
                        {{ t('authorize.noScopes') }}
                    </li>
                </ul>

                <div class="auth-card__actions">
                    <form ref="approveForm" method="POST" action="/oauth/authorize">
                        <input type="hidden" name="_token" :value="data.csrfToken" />
                        <input type="hidden" name="auth_token" :value="data.authToken" />
                        <button type="submit" class="btn btn--primary btn--pill btn--full">
                            {{ t('authorize.approve') }}
                        </button>
                    </form>

                    <form ref="denyForm" method="POST" action="/oauth/authorize">
                        <input type="hidden" name="_token" :value="data.csrfToken" />
                        <input type="hidden" name="_method" value="DELETE" />
                        <input type="hidden" name="auth_token" :value="data.authToken" />
                        <button type="submit" class="btn btn--secondary btn--pill btn--full">
                            {{ t('authorize.cancel') }}
                        </button>
                    </form>
                </div>
            </template>

            <template v-else>
                <h1 class="auth-card__title">{{ t('authorize.notFoundTitle') }}</h1>
                <p class="auth-card__subtitle">
                    <i18n-t keypath="authorize.notFoundBody" tag="span">
                        <template #path><code>/oauth/authorize</code></template>
                    </i18n-t>
                </p>
                <p class="auth-card__footer">
                    <router-link to="/" class="link">{{ t('authorize.goDashboard') }}</router-link>
                </p>
            </template>
        </div>
    </div>
</template>