Migrate openid error page to vuejs

dashboard/src/components/OidcError.vue

@@ -0,0 +1,72 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+import { marked } from 'marked';
+import { Button, PasswordInput, TextInput, fetcher } from 'pankow';
+import { API_ORIGIN } from '../constants.js';
+
+// coming from oidc_error.html server-side rendered
+const name = window.cloudron.name;
+const iconUrl = window.cloudron.iconUrl;
+const backgroundUrl = `${API_ORIGIN}/api/v1/cloudron/background`;
+const errorMessage = window.cloudron.errorMessage;
+const footer = window.cloudron.footer;
+
+</script>
+
+<template>
+  <div class="layout-root">
+    <div class="layout-left" :style="{ 'background-image': `url(${backgroundUrl})` }">
+      <img width="128" height="128" class="icon" :src="iconUrl"/>
+    </div>
+
+    <div class="layout-right">
+
+      <div>
+        <h2>{{ name }} OpenID Error</h2>
+        <div>{{ errorMessage }}</div>
+        <br/>
+        <Button href="/">{{ $t('passwordReset.backToLoginAction') }}</Button>
+      </div>
+
+    </div>
+  </div>
+
+  <footer v-show="footer" v-html="footer"></footer>
+</template>
+
+<style>
+
+.icon {
+  margin-bottom: 20%;
+}
+
+.layout-root {
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+  height: 100%;
+}
+
+.layout-left {
+  background-color: rgba(0,0,0,0.1);
+  background-size: cover;
+  background-position: center;
+  flex-basis: 30%;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+}
+
+.layout-right {
+  padding-left: 20px;
+  flex-basis: 70%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  justify-content: center;
+}
+
+</style>
+