feat(style): new login form
This commit is contained in:
ArneBo
upsiflu
parent
f403f2207d
commit
275ed13890
|
|
@ -8,6 +8,10 @@ import { useI18n } from 'vue-i18n'
|
|||
import { useStore } from '~/store'
|
||||
|
||||
import PasswordInput from '~/components/forms/PasswordInput.vue'
|
||||
import Alert from '~/components/ui/Alert.vue'
|
||||
import Input from '~/components/ui/Input.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Spacer from '~/components/ui/layout/Spacer.vue'
|
||||
|
||||
interface Props {
|
||||
next?: RouteLocationRaw
|
||||
|
|
@ -78,33 +82,33 @@ const submit = async () => {
|
|||
|
||||
<template>
|
||||
<form
|
||||
class="ui form"
|
||||
style="max-width: 600px"
|
||||
@submit.prevent="submit()"
|
||||
>
|
||||
<div
|
||||
<Alert red
|
||||
v-if="errors.length > 0"
|
||||
role="alert"
|
||||
class="ui negative message"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ t('components.auth.LoginForm.header.loginFailure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
<component :is="errors.length>1 ? 'ul' : 'div'" class="list">
|
||||
<component :is="errors.length>1 ? 'li' : 'div'"
|
||||
v-if="errors[0] == 'invalid_credentials' && store.state.instance.settings.moderation.signup_approval_enabled.value"
|
||||
>
|
||||
{{ t('components.auth.LoginForm.help.approvalRequired') }}
|
||||
</li>
|
||||
<li v-else-if="errors[0] == 'invalid_credentials'">
|
||||
</component>
|
||||
<component :is="errors.length>1 ? 'li' : 'div'"
|
||||
v-else-if="errors[0] == 'invalid_credentials'">
|
||||
{{ t('components.auth.LoginForm.help.invalidCredentials') }}
|
||||
</li>
|
||||
<li v-else>
|
||||
</component>
|
||||
<component :is="errors.length>1 ? 'li' : 'div'" v-else>
|
||||
{{ errors[0] }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</component>
|
||||
</component>
|
||||
</Alert>
|
||||
<Spacer v-if="errors.length > 0" />
|
||||
<template v-if="domain === store.getters['instance/domain']">
|
||||
<div class="field">
|
||||
<div style="margin-bottom: 16px">
|
||||
<label for="username-field">
|
||||
{{ t('components.auth.LoginForm.label.username') }}
|
||||
<template v-if="showSignup">
|
||||
|
|
@ -114,7 +118,7 @@ const submit = async () => {
|
|||
</router-link>
|
||||
</template>
|
||||
</label>
|
||||
<input
|
||||
<Input
|
||||
id="username-field"
|
||||
ref="username"
|
||||
v-model="credentials.username"
|
||||
|
|
@ -123,9 +127,9 @@ const submit = async () => {
|
|||
type="text"
|
||||
autofocus
|
||||
:placeholder="labels.usernamePlaceholder"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div style="margin-bottom: 16px">
|
||||
<label for="password-field">
|
||||
{{ t('components.auth.LoginForm.label.password') }}
|
||||
<span class="middle pipe symbol" />
|
||||
|
|
@ -148,11 +152,24 @@ const submit = async () => {
|
|||
{{ t('components.auth.LoginForm.message.redirect', { domain: store.getters['instance/domain'] }) }}
|
||||
</p>
|
||||
</template>
|
||||
<button
|
||||
:class="['ui', { 'loading': isLoading }, 'right', 'floated', buttonClasses, 'button']"
|
||||
<Spacer :size="16" />
|
||||
<Button
|
||||
solid
|
||||
primary
|
||||
type="submit"
|
||||
>
|
||||
{{ t('components.auth.LoginForm.button.login') }}
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
label {
|
||||
display: block;
|
||||
margin: 0 0 .28571429rem 0;
|
||||
color: var(--form-label-color);
|
||||
font-size: .92857143em;
|
||||
font-weight: 700;
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { useClipboard, useVModel } from '@vueuse/core'
|
|||
import { useStore } from '~/store'
|
||||
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Input from '~/components/ui/Input.vue'
|
||||
|
||||
interface Events {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
|
|
@ -47,28 +48,41 @@ const copyPassword = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ui fluid action input">
|
||||
<input
|
||||
<div>
|
||||
<Input
|
||||
:id="fieldId"
|
||||
v-model="value"
|
||||
required
|
||||
name="password"
|
||||
:type="passwordInputType"
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
:title="labels.title"
|
||||
icon="bi-eye"
|
||||
@click.prevent="showPassword = !showPassword"
|
||||
>
|
||||
</Button>
|
||||
<Button
|
||||
v-if="copyButton && canCopy"
|
||||
type="button"
|
||||
icon="bi-copy"
|
||||
:title="labels.copy"
|
||||
@click.prevent="copyPassword"
|
||||
>
|
||||
</Button>
|
||||
<template #input-right>
|
||||
<Button
|
||||
:title="labels.title"
|
||||
icon="bi-eye"
|
||||
@click.prevent="showPassword = !showPassword"
|
||||
>
|
||||
</Button>
|
||||
<Button
|
||||
v-if="copyButton && canCopy"
|
||||
icon="bi-copy"
|
||||
:title="labels.copy"
|
||||
@click.prevent="copyPassword"
|
||||
>
|
||||
</Button>
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
input#password-field {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
label#password-field .input-right .button,
|
||||
label#password-field .input-right .button:hover {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,13 +34,9 @@ whenever(() => store.state.auth.authenticated, () => {
|
|||
v-title="labels.title"
|
||||
class="main"
|
||||
>
|
||||
<section class="ui vertical stripe segment">
|
||||
<div class="ui small text container">
|
||||
<h2>
|
||||
{{ t('views.auth.Login.header.login') }}
|
||||
</h2>
|
||||
<login-form :next="next" />
|
||||
</div>
|
||||
</section>
|
||||
<h2>
|
||||
{{ t('views.auth.Login.header.login') }}
|
||||
</h2>
|
||||
<login-form :next="next" />
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue