68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<template>
|
|
<div class="login-container" v-if="realm">
|
|
<form class="login-form" method="POST" :action="useRuntimeConfig().public.baseUrl + '/realms/' + realmKey + '/protocol/openid-connect/auth?client_id=' + useRoute().query.client_id">
|
|
<div style="display: flex; flex-direction: column; justify-content: center;">
|
|
<h2 class="sso-heading">Sign in with Verifoo</h2>
|
|
<p class="sso-subheading">{{ realm.name }}</p>
|
|
</div>
|
|
<div class="field">
|
|
<p>E-Mail</p>
|
|
<input name="email" type="text" value="andreas.j.dinauer@gmail.com">
|
|
</div>
|
|
<div class="field">
|
|
<p>Password</p>
|
|
<input name="password" type="password" value="pw">
|
|
</div>
|
|
<a href="">Forgot password?</a>
|
|
<button class="button" type="submit">Login</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type {Realm} from "~/realm/Realm";
|
|
|
|
const realmKey = useRoute().params.realm as string;
|
|
const { data: realm } = await useFetch<Realm>(useRuntimeConfig().public.baseUrl + '/realms/' + realmKey)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-container {
|
|
width: 620px;
|
|
}
|
|
.field {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
.login-form {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.25rem;
|
|
background-color: #f4f4f4;
|
|
padding: 3rem;
|
|
border: 1px solid #dfdfdf;
|
|
}
|
|
.sso-heading {
|
|
text-align: center;
|
|
display: inline-block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.sso-subheading {
|
|
text-align: center;
|
|
display: inline-block;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.button {
|
|
background-color: #232323;
|
|
color: white;
|
|
height: 2.5rem;
|
|
outline: none;
|
|
border: none;
|
|
font-size: 1.125rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
a {
|
|
color: black;
|
|
}
|
|
</style> |