fix(front): set label prop resp. slot in inputs

This commit is contained in:
upsiflu 2024-12-29 18:34:19 +01:00
parent b2ba7e1e6a
commit 81269f7fad
2 changed files with 30 additions and 27 deletions

View File

@ -108,15 +108,6 @@ const submit = async () => {
<Spacer v-if="errors.length > 0" />
<template v-if="domain === store.getters['instance/domain']">
<div style="margin-bottom: 16px">
<label for="username-field">
{{ t('components.auth.LoginForm.label.username') }}
<template v-if="showSignup">
<span class="middle pipe symbol" />
<router-link :to="{ path: '/signup' }">
{{ t('components.auth.LoginForm.link.createAccount') }}
</router-link>
</template>
</label>
<Input
id="username-field"
ref="username"
@ -126,24 +117,35 @@ const submit = async () => {
type="text"
autofocus
:placeholder="labels.usernamePlaceholder"
/>
>
<template #label>
{{ t('components.auth.LoginForm.label.username') }}
<template v-if="showSignup">
<span class="middle pipe symbol" />
<router-link :to="{ path: '/signup' }">
{{ t('components.auth.LoginForm.link.createAccount') }}
</router-link>
</template>
</template>
</Input>
</div>
<div style="margin-bottom: 16px">
<label for="password-field">
{{ t('components.auth.LoginForm.label.password') }}
<span class="middle pipe symbol" />
<router-link
tabindex="1"
:to="{ name: 'auth.password-reset', query: { email: credentials.username } }"
>
{{ t('components.auth.LoginForm.link.resetPassword') }}
</router-link>
</label>
<Input password
v-model="credentials.password"
field-id="password-field"
required
/>
>
<template #label>
{{ t('components.auth.LoginForm.label.password') }}
<span class="middle pipe symbol" />
<router-link
tabindex="1"
:to="{ name: 'auth.password-reset', query: { email: credentials.username } }"
>
{{ t('components.auth.LoginForm.link.resetPassword') }}
</router-link>
</template>
</Input>
</div>
</template>
<template v-else>

View File

@ -149,7 +149,7 @@ fetchInstanceSettings()
<div class="required field">
<Input
id="username-field"
label = "t('components.auth.SignupForm.label.username')"
:label = "t('components.auth.SignupForm.label.username')"
ref="username"
v-model="payload.username"
name="username"
@ -161,7 +161,7 @@ fetchInstanceSettings()
</div>
<div class="required field">
<Input
label="t('components.auth.SignupForm.label.email')"
:label="t('components.auth.SignupForm.label.email')"
id="email-field"
ref="email"
v-model="payload.email"
@ -173,7 +173,7 @@ fetchInstanceSettings()
</div>
<div class="required field">
<Input password
label="t('components.auth.SignupForm.label.password')"
:label="t('components.auth.SignupForm.label.password')"
v-model="payload.password1"
field-id="password-field"
/>
@ -183,7 +183,7 @@ fetchInstanceSettings()
class="required field"
>
<Input
label="t('components.auth.SignupForm.label.invitation')"
:label="t('components.auth.SignupForm.label.invitation')"
id="invitation-code"
v-model="payload.invitation"
required
@ -198,8 +198,9 @@ fetchInstanceSettings()
:key="idx"
:class="[{required: field.required}, 'field']"
>
<!-- TODO: Add `label` prop to `Textarea` component -->
<Textarea
label="field.label"
:label="field.label"
v-if="field.input_type === 'long_text'"
:id="`custom-field-${idx}`"
v-model="payload.request_fields[field.label]"
@ -209,7 +210,7 @@ fetchInstanceSettings()
<Input
v-else
:id="`custom-field-${idx}`"
label="field.label"
:label="field.label"
v-model="payload.request_fields[field.label]"
type="text"
:required="field.required"