Bluemedia/keycloak-modern-login
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add localization support

Browse source
This commit is contained in:
Oliver Traber 2023-04-16 21:33:06 +02:00
parent 47b0436b14
commit 91f9b8c4a7
Signed by: Bluemedia
GPG key ID: C0674B105057136C
15 changed files with 217 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/views/webauthn-authenticate/index.vue
View file

@ -1,16 +1,11 @@
<template>
<layout>
<h1
v-if="context.isUserIdentified"
class="text-3xl font-semibold text-center text-gray-700">
Welcome {{ context.auth?.attemptedUsername }}!
</h1>
<h1 v-else class="text-3xl font-semibold text-center text-gray-700">
Welcome!
<h1 class="text-3xl font-semibold text-center text-gray-700">
{{ $t("login.welcome") }}
</h1>
<div v-if="webauthnSupported && !error">
<p class="mt-5 mb-5 text-center">
Please use one of your registered devices to continue:
{{ $t("webauthn.title") }}
</p>
<div
v-for="authenticator in context.authenticators.authenticators"
@ -29,51 +24,48 @@
<div class="w-full ml-5 flex flex-col">
<p>{{ authenticator.label }}</p>
<p class="text-sm">
Registered: {{ new Date(authenticator.createdAt).toLocaleString() }}
{{ $t("webauthn.registered", {date: new Date(authenticator.createdAt).toLocaleString()}) }}
</p>
</div>
</div>
<button
:onclick="prepareAuthenticate"
class="w-full 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">
Authenticate
{{ $t("webauthn.authenticate") }}
</button>
<p
class="mt-5 text-sm text-center"
v-if="context.auth?.showTryAnotherWayLink">
Don't have your device at hand?
{{ $t("webauthn.noDevice") }}
<a
:onclick="tryAnotherWay"
class="text-blue-500 hover:underline cursor-pointer"
>Try another way.</a
>{{ $t("2fa.tryAnotherWay") }}</a
>
</p>
</div>
<div v-if="!webauthnSupported">
<p class="mt-5 text-center">
It seems that your browser doesn't support WebAuthn. Please try logging
in with a different browser<span
v-if="!context.auth?.showTryAnotherWayLink"
>.</span
><span v-else
>, or try a different login method using the button below.</span
>
<p v-if="!context.auth?.showTryAnotherWayLink" class="mt-5 text-center">
{{ $t("webauthn.noSupportOtherMethod") }}
</p>
<p v-else class="mt-5 text-center">
{{ $t("webauthn.noSupport") }}
</p>
<button
v-if="context.auth?.showTryAnotherWayLink"
:onclick="tryAnotherWay"
class="w-full mt-5 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">
Try another method
{{ $t("2fa.tryAnotherWay") }}
</button>
</div>
<div v-if="error" class="mt-5 flex flex-col">
<ErrorBox
>Something went wrong during authentication using your device.</ErrorBox
>{{ $t("webauthn.error") }}</ErrorBox
>
<button
:onclick="retryAuth"
class="w-full mt-5 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">
Retry
{{ $t("login.retry") }}
</button>
</div>
</layout>