62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<script setup>
|
|
|
|
// keep this to load pankow Button css
|
|
import { Button } from '@cloudron/pankow';
|
|
|
|
import PublicPageLayout from '../components/PublicPageLayout.vue';
|
|
|
|
// coming from oidc_device_confirm.html server-side rendered
|
|
const clientName = window.cloudron.clientName;
|
|
const userCode = window.cloudron.userCode;
|
|
const form = window.cloudron.form;
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<PublicPageLayout>
|
|
<div>
|
|
<h2>Authorize {{ clientName }}</h2>
|
|
<p>Verify the code below</p>
|
|
<div class="user-code">{{ userCode }}</div>
|
|
<p class="code-hint">If you did not initiate this action or the code does not match, please close this window or cancel.</p>
|
|
|
|
<!-- injected form for submission from oidcserver.js -->
|
|
<div v-html="form"></div>
|
|
|
|
<button class="pankow-button" type="submit" form="op.deviceConfirmForm">Continue</button>
|
|
<button type="submit" form="op.deviceConfirmForm" value="yes" name="abort" class="cancel-button">Cancel</button>
|
|
</div>
|
|
</PublicPageLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
p {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.user-code {
|
|
font-size: 26px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.code-hint {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cancel-button {
|
|
margin-left: 15px;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: var(--pankow-color-dark);
|
|
}
|
|
|
|
.cancel-button:hover {
|
|
color: var(--pankow-color-primary-hover);
|
|
}
|
|
|
|
</style>
|