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