vueify OIDC device views

dashboard/src/oidcdeviceconfirm.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+
+import '@fontsource/inter';
+
+import i18n from './i18n.js';
+import OidcDeviceConfirmView from './views/OidcDeviceConfirmView.vue';
+
+import './style.css';
+
+(async function init() {
+  const app = createApp(OidcDeviceConfirmView);
+
+  app.use(await i18n());
+
+  app.mount('#app');
+})();

dashboard/src/oidcdeviceinput.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+
+import '@fontsource/inter';
+
+import i18n from './i18n.js';
+import OidcDeviceInputView from './views/OidcDeviceInputView.vue';
+
+import './style.css';
+
+(async function init() {
+  const app = createApp(OidcDeviceInputView);
+
+  app.use(await i18n());
+
+  app.mount('#app');
+})();

dashboard/src/oidcdevicesuccess.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+
+import '@fontsource/inter';
+
+import i18n from './i18n.js';
+import OidcDeviceSuccessView from './views/OidcDeviceSuccessView.vue';
+
+import './style.css';
+
+(async function init() {
+  const app = createApp(OidcDeviceSuccessView);
+
+  app.use(await i18n());
+
+  app.mount('#app');
+})();

dashboard/src/views/OidcDeviceConfirmView.vue

@@ -0,0 +1,73 @@
+<script setup>
+
+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 style="max-width: 300px;">
+      <h2>Confirm Device</h2>
+      <p>
+        <strong>{{ clientName }}</strong>
+        <br/><br/>
+        The following code should be displayed on your device<br/><br/>
+        <code class="user-code">{{ userCode }}</code>
+        <br/><br/>
+        <small>If you did not initiate this action or the code does not match, please close this window or click abort.</small>
+      </p>
+      <div v-html="form" class="device-form"></div>
+      <button type="submit" form="op.deviceConfirmForm" class="device-submit" autofocus>Continue</button>
+      <div class="help">
+        <button type="submit" form="op.deviceConfirmForm" value="yes" name="abort" class="abort-link">[ Abort ]</button>
+      </div>
+    </div>
+  </PublicPageLayout>
+</template>
+
+<style scoped>
+.user-code {
+  font-size: 2em;
+}
+.device-submit {
+  width: 100%;
+  display: block;
+  margin-top: 12px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 700;
+  height: 36px;
+  padding: 0 8px;
+  border: 0;
+  color: #fff;
+  background-color: #4d90fe;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.device-submit:hover {
+  background-color: #357ae8;
+}
+.help {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 8px;
+}
+.abort-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  color: #666;
+  opacity: 0.6;
+}
+.abort-link:hover {
+  opacity: 1;
+}
+</style>

dashboard/src/views/OidcDeviceInputView.vue

@@ -0,0 +1,44 @@
+<script setup>
+
+import PublicPageLayout from '../components/PublicPageLayout.vue';
+
+// coming from oidc_device_input.html server-side rendered
+const message = window.cloudron.message;
+const form = window.cloudron.form;
+
+</script>
+
+<template>
+  <PublicPageLayout>
+    <div style="max-width: 300px;">
+      <h2>Sign-in</h2>
+      <div v-html="message" class="device-message"></div>
+      <div v-html="form" class="device-form"></div>
+      <button type="submit" form="op.deviceInputForm" class="device-submit">Continue</button>
+    </div>
+  </PublicPageLayout>
+</template>
+
+<style scoped>
+.device-message :deep(.red) {
+  color: #d50000;
+}
+.device-submit {
+  width: 100%;
+  display: block;
+  margin-top: 12px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 700;
+  height: 36px;
+  padding: 0 8px;
+  border: 0;
+  color: #fff;
+  background-color: #4d90fe;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.device-submit:hover {
+  background-color: #357ae8;
+}
+</style>

dashboard/src/views/OidcDeviceSuccessView.vue

@@ -0,0 +1,19 @@
+<script setup>
+
+import PublicPageLayout from '../components/PublicPageLayout.vue';
+
+// coming from oidc_device_success.html server-side rendered (optional)
+const cloudron = window.cloudron || {};
+const iconUrl = cloudron.iconUrl;
+const cloudronName = cloudron.name;
+
+</script>
+
+<template>
+  <PublicPageLayout :icon-url="iconUrl" :cloudron-name="cloudronName">
+    <div style="max-width: 300px;">
+      <h2>Success</h2>
+      <p>Your device has been authorized. You can close this window.</p>
+    </div>
+  </PublicPageLayout>
+</template>