120 lines
3.7 KiB
Vue
120 lines
3.7 KiB
Vue
<template>
|
|
<layout>
|
|
<h1 class="mb-8 text-3xl font-semibold text-center text-gray-700">
|
|
{{ $t("login.title") }}
|
|
</h1>
|
|
<p
|
|
v-if="context.realm.registrationAllowed"
|
|
class="mt-4 text-sm font-light text-center text-gray-700">
|
|
{{ $t("login.noAccount") }}
|
|
<a
|
|
:href="context.url.registrationUrl"
|
|
class="font-medium text-blue-500 hover:underline"
|
|
>{{ $t("login.signupLink") }}</a
|
|
>
|
|
</p>
|
|
<div v-if="context.message?.type == 'error'">
|
|
<ErrorBox>{{ context.message?.summary }}</ErrorBox>
|
|
</div>
|
|
<form
|
|
class="flex flex-col justify-center mt-6"
|
|
:action="context.url.loginAction"
|
|
method="post">
|
|
<div>
|
|
<label for="username" class="block text-sm text-gray-800">{{
|
|
context.realm.loginWithEmailAllowed
|
|
? $t("login.usernameOrEmail")
|
|
: $t("login.username")
|
|
}}</label>
|
|
<input
|
|
name="username"
|
|
type="text"
|
|
ref="focus"
|
|
:placeholder="
|
|
context.realm.loginWithEmailAllowed
|
|
? 'jane.doe@example.com'
|
|
: 'JDoe'
|
|
"
|
|
:value="context.login.username ? context.login.username : ''"
|
|
class="block w-full px-4 py-2 mt-2 text-gray-800 bg-white border rounded-md focus:border-blue-500 focus:ring-transparent focus:outline-none focus:ring focus:ring-opacity-40" />
|
|
</div>
|
|
<div class="mt-4">
|
|
<div>
|
|
<label for="password" class="block text-sm text-gray-800">{{
|
|
$t("login.password")
|
|
}}</label>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
placeholder="••••••••••••"
|
|
class="block w-full px-4 py-2 mt-2 text-gray-800 bg-white border rounded-md focus:border-blue-500 focus:ring-transparent focus:outline-none focus:ring focus:ring-opacity-40" />
|
|
</div>
|
|
<a
|
|
v-if="context.realm.resetPasswordAllowed"
|
|
:href="context.url.loginResetCredentialsUrl"
|
|
class="text-xs text-gray-600 hover:underline"
|
|
>{{ $t("login.forgotPassword") }}</a
|
|
>
|
|
</div>
|
|
<div
|
|
v-if="context.realm.rememberMe"
|
|
class="mt-5 flex flex-row items-center">
|
|
<input
|
|
type="checkbox"
|
|
name="rememberMe"
|
|
class="w-4 h-4 text-blue-500 bg-gray-100 border-gray-400 rounded dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600" />
|
|
<label for="rememberMe" class="block ml-3 text-sm text-gray-800">{{
|
|
$t("login.rememberMe")
|
|
}}</label>
|
|
</div>
|
|
<input
|
|
type="hidden"
|
|
name="credentialId"
|
|
:value="
|
|
context.auth.selectedCredential ? context.auth.selectedCredential : ''
|
|
" />
|
|
<button
|
|
class="w-full mt-6 px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
|
|
{{ $t("login.login") }}
|
|
</button>
|
|
</form>
|
|
</layout>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent, ref, onMounted, nextTick } from "vue";
|
|
import Layout from "~/components/Layout.vue";
|
|
import ErrorBox from "~/components/ErrorBox.vue";
|
|
import type { KcContextBase } from "~/types/context";
|
|
|
|
export default defineComponent({
|
|
name: "Login",
|
|
components: {
|
|
Layout,
|
|
ErrorBox,
|
|
},
|
|
data() {
|
|
return {
|
|
context: (window as any).kcContext as KcContextBase.Login,
|
|
};
|
|
},
|
|
setup() {
|
|
const focus = ref(null);
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
focus.value.focus();
|
|
});
|
|
});
|
|
|
|
return {
|
|
focus,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style>
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
</style>
|