extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-20 03:38:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refine UI and translations

Browse Source
This commit is contained in:
Bubka 2022-04-15 16:20:34 +02:00
parent 2ba66f5c96
commit 63fafed6a9
5 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/FormWrapper.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="columns is-centered"> <div class="columns is-centered">
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd"> <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
<h1 class="title" v-html="title" v-if="title"></h1> <h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1>
<div v-if="punchline" class="block" v-html="punchline"></div> <div v-if="punchline" class="block" v-html="punchline"></div>
<slot /> <slot />
</div> </div>

24
resources/js/views/auth/Login.vue
View File

@ -1,15 +1,17 @@
<template> <template>
<div v-if="username"> <div v-if="username">
<!-- webauthn authentication --> <!-- webauthn authentication -->
<form-wrapper v-if="showWebauthn" :title="$t('auth.forms.login')" :punchline="punchline"> <form-wrapper v-if="showWebauthn" :title="$t('auth.forms.webauthn_login')" :punchline="punchline">
<div class="field"> <div class="field">
{{ $t('auth.webauthn.use_security_device_to_sign_in') }} {{ $t('auth.webauthn.use_security_device_to_sign_in') }}
</div> </div>
<div class="control"> <div class="control">
<button type="button" class="button is-link" @click="webauthnLogin">{{ $t('auth.sign_in') }}</button> <button type="button" class="button is-link" @click="webauthnLogin">{{ $t('commons.continue') }}</button>
</div>
<div class="nav-links">
<p>{{ $t('auth.webauthn.lost_your_device') }}&nbsp;<router-link :to="{ name: 'webauthn.lost' }" class="is-link">{{ $t('auth.webauthn.recover_your_account') }}</router-link></p>
<p v-if="!this.$root.appSettings.useWebauthnOnly">{{ $t('auth.sign_in_using') }}&nbsp;<a class="is-link" @click="showWebauthn = false">{{ $t('auth.login_and_password') }}</a></p>
</div> </div>
<p>{{ $t('auth.webauthn.lost_your_device') }}&nbsp;<router-link :to="{ name: 'webauthn.lost' }" class="is-link">{{ $t('auth.webauthn.recover_your_account') }}</router-link></p>
<p v-if="!this.$root.appSettings.useWebauthnOnly">{{ $t('auth.sign_in_using') }}&nbsp;<a class="is-link" @click="showWebauthn = false">{{ $t('auth.login_and_password') }}</a></p>
</form-wrapper> </form-wrapper>
<!-- login/password legacy form --> <!-- login/password legacy form -->
<form-wrapper v-else :title="$t('auth.forms.login')" :punchline="punchline"> <form-wrapper v-else :title="$t('auth.forms.login')" :punchline="punchline">
@ -19,12 +21,14 @@
<form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.password')" /> <form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.password')" />
<form-buttons :isBusy="form.isBusy" :caption="$t('auth.sign_in')" /> <form-buttons :isBusy="form.isBusy" :caption="$t('auth.sign_in')" />
</form> </form>
<div v-if="!username"> <div class="nav-links">
<p>{{ $t('auth.forms.dont_have_account_yet') }}&nbsp;<router-link :to="{ name: 'register' }" class="is-link">{{ $t('auth.register') }}</router-link></p> <div v-if="!username">
</div> <p>{{ $t('auth.forms.dont_have_account_yet') }}&nbsp;<router-link :to="{ name: 'register' }" class="is-link">{{ $t('auth.register') }}</router-link></p>
<div v-else> </div>
<p>{{ $t('auth.forms.forgot_your_password') }}&nbsp;<router-link :to="{ name: 'password.request' }" class="is-link">{{ $t('auth.forms.request_password_reset') }}</router-link></p> <div v-else>
<p >{{ $t('auth.sign_in_using') }}&nbsp;<a class="is-link" @click="showWebauthn = true">{{ $t('auth.webauthn.security_device') }}</a></p> <p>{{ $t('auth.forms.forgot_your_password') }}&nbsp;<router-link :to="{ name: 'password.request' }" class="is-link">{{ $t('auth.forms.request_password_reset') }}</router-link></p>
<p >{{ $t('auth.sign_in_using') }}&nbsp;<a class="is-link" @click="showWebauthn = true">{{ $t('auth.webauthn.security_device') }}</a></p>
</div>
</div> </div>
</form-wrapper> </form-wrapper>
</div> </div>

4
resources/js/views/auth/Register.vue
View File

@ -29,7 +29,9 @@
<form-field :form="registerForm" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_password')" /> <form-field :form="registerForm" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_password')" />
<form-buttons :isBusy="registerForm.isBusy" :isDisabled="registerForm.isDisabled" :caption="$t('auth.register')" /> <form-buttons :isBusy="registerForm.isBusy" :isDisabled="registerForm.isDisabled" :caption="$t('auth.register')" />
</form> </form>
<p>{{ $t('auth.forms.already_register') }}&nbsp;<router-link :to="{ name: 'login' }" class="is-link">{{ $t('auth.sign_in') }}</router-link></p> <div class="nav-links">
<p>{{ $t('auth.forms.already_register') }}&nbsp;<router-link :to="{ name: 'login' }" class="is-link">{{ $t('auth.sign_in') }}</router-link></p>
</div>
</form-wrapper> </form-wrapper>
</div> </div>
</template> </template>

3
resources/lang/en/auth.php
View File

@ -41,7 +41,7 @@ return [
'security_devices_legend' => 'Authentication devices you can use to sign in 2FAuth, like security keys (i.e Yubikey) or smartphones with biometric capabilities (i.e. Apple FaceId/TouchId)', 'security_devices_legend' => 'Authentication devices you can use to sign in 2FAuth, like security keys (i.e Yubikey) or smartphones with biometric capabilities (i.e. Apple FaceId/TouchId)',
'enhance_security_using_webauthn' => 'You can enhance the security of your 2FAuth account by enabling WebAuthn authentication.<br /><br /> 'enhance_security_using_webauthn' => 'You can enhance the security of your 2FAuth account by enabling WebAuthn authentication.<br /><br />
WebAuthn allows you to use trusted devices (like Yubikeys or smartphones with biometric capabilities) to sign in quickly and more securely.', WebAuthn allows you to use trusted devices (like Yubikeys or smartphones with biometric capabilities) to sign in quickly and more securely.',
'use_security_device_to_sign_in' => 'Get ready to authenticate yourself using (one of) your security devices. Plug your key in, remove face mask or gloves, etc.', 'use_security_device_to_sign_in' => 'Get ready to authenticate using (one of) your security devices. Plug your key in, remove face mask or gloves, etc.',
'lost_your_device' => 'Lost your device?', 'lost_your_device' => 'Lost your device?',
'recover_your_account' => 'Recover your account', 'recover_your_account' => 'Recover your account',
'account_recovery' => 'Account recovery', 'account_recovery' => 'Account recovery',
@ -73,6 +73,7 @@ return [
'forms' => [ 'forms' => [
'name' => 'Name', 'name' => 'Name',
'login' => 'Login', 'login' => 'Login',
'webauthn_login' => 'WebAuthn login',
'email' => 'Email', 'email' => 'Email',
'password' => 'Password', 'password' => 'Password',
'confirm_password' => 'Confirm password', 'confirm_password' => 'Confirm password',

10
resources/sass/app.scss vendored
View File

@ -98,13 +98,13 @@ a:hover {
padding-top: 3rem; padding-top: 3rem;
} }
.form-column > p { .form-column > div.nav-links {
margin-bottom: 0.75rem; padding-top: 1.5rem;
padding-top: 0.75rem;
} }
.form-column > p:first-of-type { .form-column > div.nav-links p {
padding-top: 1.5rem !important; margin-bottom: 0.25rem;
padding-top: 0.25rem;
} }
.modal-background { .modal-background {