fix(style): password reset pages
This commit is contained in:
ArneBo
upsiflu
parent
acf518a51a
commit
b9f405e52d
|
|
@ -4,6 +4,9 @@ import type { BackendError } from '~/types'
|
||||||
import { computed, ref, onMounted } from 'vue'
|
import { computed, ref, onMounted } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import Alert from '~/components/ui/Alert.vue'
|
||||||
|
import Input from '~/components/ui/Input.vue'
|
||||||
|
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -45,67 +48,60 @@ onMounted(() => {
|
||||||
<main
|
<main
|
||||||
v-title="labels.confirm"
|
v-title="labels.confirm"
|
||||||
class="main"
|
class="main"
|
||||||
>
|
>
|
||||||
<section class="ui vertical stripe segment">
|
<h2>{{ labels.confirm }}</h2>
|
||||||
<div class="ui small text container">
|
<form
|
||||||
<h2>{{ labels.confirm }}</h2>
|
v-if="!success"
|
||||||
<form
|
class="ui form"
|
||||||
v-if="!success"
|
@submit.prevent="submit()"
|
||||||
class="ui form"
|
>
|
||||||
@submit.prevent="submit()"
|
<Alert red
|
||||||
>
|
v-if="errors.length > 0"
|
||||||
<div
|
>
|
||||||
v-if="errors.length > 0"
|
<h4 class="header">
|
||||||
role="alert"
|
{{ t('views.auth.EmailConfirm.header.failure') }}
|
||||||
class="ui negative message"
|
</h4>
|
||||||
|
<ul class="list">
|
||||||
|
<li
|
||||||
|
v-for="(error, i) in errors"
|
||||||
|
:key="i"
|
||||||
>
|
>
|
||||||
<h4 class="header">
|
{{ error }}
|
||||||
{{ t('views.auth.EmailConfirm.header.failure') }}
|
</li>
|
||||||
</h4>
|
</ul>
|
||||||
<ul class="list">
|
</Alert>
|
||||||
<li
|
<div class="field">
|
||||||
v-for="(error, i) in errors"
|
<label for="confirmation-code">{{ t('views.auth.EmailConfirm.label.confirmationCode') }}</label>
|
||||||
:key="i"
|
<Input
|
||||||
>
|
id="confirmation-code"
|
||||||
{{ error }}
|
v-model="key"
|
||||||
</li>
|
name="confirmation-code"
|
||||||
</ul>
|
type="text"
|
||||||
</div>
|
required
|
||||||
<div class="field">
|
/>
|
||||||
<label for="confirmation-code">{{ t('views.auth.EmailConfirm.label.confirmationCode') }}</label>
|
|
||||||
<input
|
|
||||||
id="confirmation-code"
|
|
||||||
v-model="key"
|
|
||||||
name="confirmation-code"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<router-link :to="{path: '/login'}">
|
|
||||||
{{ t('views.auth.EmailConfirm.link.back') }}
|
|
||||||
</router-link>
|
|
||||||
<button
|
|
||||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
{{ labels.confirm }}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="ui positive message"
|
|
||||||
>
|
|
||||||
<h4 class="header">
|
|
||||||
{{ t('views.auth.EmailConfirm.header.success') }}
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
{{ t('views.auth.EmailConfirm.message.success') }}
|
|
||||||
</p>
|
|
||||||
<router-link :to="{name: 'login'}">
|
|
||||||
{{ t('views.auth.EmailConfirm.link.login') }}
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<router-link :to="{path: '/login'}">
|
||||||
|
{{ t('views.auth.EmailConfirm.link.back') }}
|
||||||
|
</router-link>
|
||||||
|
<Button
|
||||||
|
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{{ labels.confirm }}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
<Alert green
|
||||||
|
v-else
|
||||||
|
>
|
||||||
|
<h4 class="header">
|
||||||
|
{{ t('views.auth.EmailConfirm.header.success') }}
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
{{ t('views.auth.EmailConfirm.message.success') }}
|
||||||
|
</p>
|
||||||
|
<router-link :to="{name: 'login'}">
|
||||||
|
{{ t('views.auth.EmailConfirm.link.login') }}
|
||||||
|
</router-link>
|
||||||
|
</Alert>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,10 @@ import { computed, ref, onMounted } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
import Input from '~/components/ui/Input.vue'
|
||||||
|
import Button from '~/components/ui/Button.vue'
|
||||||
|
import Spacer from '~/components/ui/layout/Spacer.vue'
|
||||||
|
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -48,59 +52,62 @@ onMounted(() => emailInput.value.focus())
|
||||||
v-title="labels.reset"
|
v-title="labels.reset"
|
||||||
class="main"
|
class="main"
|
||||||
>
|
>
|
||||||
<section class="ui vertical stripe segment">
|
<h2>
|
||||||
<div class="ui small text container">
|
{{ t('views.auth.PasswordReset.header.reset') }}
|
||||||
<h2>
|
</h2>
|
||||||
{{ t('views.auth.PasswordReset.header.reset') }}
|
<form
|
||||||
</h2>
|
@submit.prevent="submit()"
|
||||||
<form
|
style="max-width: 600px"
|
||||||
class="ui form"
|
>
|
||||||
@submit.prevent="submit()"
|
<div
|
||||||
>
|
v-if="errors.length > 0"
|
||||||
<div
|
role="alert"
|
||||||
v-if="errors.length > 0"
|
class="ui negative message"
|
||||||
role="alert"
|
>
|
||||||
class="ui negative message"
|
<h4 class="header">
|
||||||
|
{{ t('views.auth.PasswordReset.header.failure') }}
|
||||||
|
</h4>
|
||||||
|
<ul class="list">
|
||||||
|
<li
|
||||||
|
v-for="(error, key) in errors"
|
||||||
|
:key="key"
|
||||||
>
|
>
|
||||||
<h4 class="header">
|
{{ error }}
|
||||||
{{ t('views.auth.PasswordReset.header.failure') }}
|
</li>
|
||||||
</h4>
|
</ul>
|
||||||
<ul class="list">
|
|
||||||
<li
|
|
||||||
v-for="(error, key) in errors"
|
|
||||||
:key="key"
|
|
||||||
>
|
|
||||||
{{ error }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
{{ t('views.auth.PasswordReset.help.form') }}
|
|
||||||
</p>
|
|
||||||
<div class="field">
|
|
||||||
<label for="account-email">{{ t('views.auth.PasswordReset.label.email') }}</label>
|
|
||||||
<input
|
|
||||||
id="account-email"
|
|
||||||
ref="emailInput"
|
|
||||||
v-model="email"
|
|
||||||
required
|
|
||||||
type="email"
|
|
||||||
name="email"
|
|
||||||
autofocus
|
|
||||||
:placeholder="labels.placeholder"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<router-link :to="{path: '/login'}">
|
|
||||||
{{ t('views.auth.PasswordReset.link.back') }}
|
|
||||||
</router-link>
|
|
||||||
<button
|
|
||||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
{{ t('views.auth.PasswordReset.button.requestReset') }}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<p>
|
||||||
|
{{ t('views.auth.PasswordReset.help.form') }}
|
||||||
|
</p>
|
||||||
|
<div class="field">
|
||||||
|
<label for="account-email">{{ t('views.auth.PasswordReset.label.email') }}</label>
|
||||||
|
<Input
|
||||||
|
id="account-email"
|
||||||
|
ref="emailInput"
|
||||||
|
v-model="email"
|
||||||
|
required
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
autofocus
|
||||||
|
:placeholder="labels.placeholder"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Spacer />
|
||||||
|
<Button
|
||||||
|
:class="['ui', {'loading': isLoading}, 'success', 'button']"
|
||||||
|
type="submit"
|
||||||
|
primary
|
||||||
|
auto
|
||||||
|
>
|
||||||
|
{{ t('views.auth.PasswordReset.button.requestReset') }}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
:to="{path: '/login'}"
|
||||||
|
ghost
|
||||||
|
auto
|
||||||
|
>
|
||||||
|
{{ t('views.auth.PasswordReset.link.back') }}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@ import { computed, ref } from 'vue'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
import PasswordInput from '~/components/forms/PasswordInput.vue'
|
import PasswordInput from '~/components/forms/PasswordInput.vue'
|
||||||
|
import Alert from '~/components/ui/Alert.vue'
|
||||||
|
import Button from '~/components/ui/Button.vue'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
defaultToken: string
|
defaultToken: string
|
||||||
|
|
@ -53,71 +55,67 @@ const submit = async () => {
|
||||||
<main
|
<main
|
||||||
v-title="labels.changePassword"
|
v-title="labels.changePassword"
|
||||||
class="main"
|
class="main"
|
||||||
>
|
>
|
||||||
<section class="ui vertical stripe segment">
|
<h2>{{ labels.changePassword }}</h2>
|
||||||
<div class="ui small text container">
|
<form
|
||||||
<h2>{{ labels.changePassword }}</h2>
|
v-if="!success"
|
||||||
<form
|
class="ui form"
|
||||||
v-if="!success"
|
@submit.prevent="submit()"
|
||||||
class="ui form"
|
>
|
||||||
@submit.prevent="submit()"
|
<Alert
|
||||||
>
|
v-if="errors.length > 0"
|
||||||
<div
|
role="alert"
|
||||||
v-if="errors.length > 0"
|
class="ui negative message"
|
||||||
role="alert"
|
>
|
||||||
class="ui negative message"
|
<h4 class="header">
|
||||||
|
{{ t('views.auth.PasswordResetConfirm.header.failure') }}
|
||||||
|
</h4>
|
||||||
|
<ul class="list">
|
||||||
|
<li
|
||||||
|
v-for="(error, key) in errors"
|
||||||
|
:key="key"
|
||||||
>
|
>
|
||||||
<h4 class="header">
|
{{ error }}
|
||||||
{{ t('views.auth.PasswordResetConfirm.header.failure') }}
|
</li>
|
||||||
</h4>
|
</ul>
|
||||||
<ul class="list">
|
</Alert>
|
||||||
<li
|
<template v-if="token && uid">
|
||||||
v-for="(error, key) in errors"
|
<div class="field">
|
||||||
:key="key"
|
<label for="password-field">{{ t('views.auth.PasswordResetConfirm.label.newPassword') }}</label>
|
||||||
>
|
<password-input
|
||||||
{{ error }}
|
v-model="newPassword"
|
||||||
</li>
|
field-id="password-field"
|
||||||
</ul>
|
/>
|
||||||
</div>
|
|
||||||
<template v-if="token && uid">
|
|
||||||
<div class="field">
|
|
||||||
<label for="password-field">{{ t('views.auth.PasswordResetConfirm.label.newPassword') }}</label>
|
|
||||||
<password-input
|
|
||||||
v-model="newPassword"
|
|
||||||
field-id="password-field"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<router-link :to="{path: '/login'}">
|
|
||||||
{{ t('views.auth.PasswordResetConfirm.link.back') }}
|
|
||||||
</router-link>
|
|
||||||
<button
|
|
||||||
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
{{ t('views.auth.PasswordResetConfirm.button.update') }}
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<p>
|
|
||||||
{{ t('views.auth.PasswordResetConfirm.message.requestSent') }}
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
</form>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="ui positive message"
|
|
||||||
>
|
|
||||||
<h4 class="header">
|
|
||||||
{{ t('views.auth.PasswordResetConfirm.header.success') }}
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
{{ t('views.auth.PasswordResetConfirm.message.success') }}
|
|
||||||
</p>
|
|
||||||
<router-link :to="{name: 'login'}">
|
|
||||||
{{ t('views.auth.PasswordResetConfirm.link.login') }}
|
|
||||||
</router-link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<router-link :to="{path: '/login'}">
|
||||||
</section>
|
{{ t('views.auth.PasswordResetConfirm.link.back') }}
|
||||||
|
</router-link>
|
||||||
|
<Button
|
||||||
|
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
|
||||||
|
type="submit"
|
||||||
|
auto
|
||||||
|
>
|
||||||
|
{{ t('views.auth.PasswordResetConfirm.button.update') }}
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<p>
|
||||||
|
{{ t('views.auth.PasswordResetConfirm.message.requestSent') }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</form>
|
||||||
|
<Alert green
|
||||||
|
v-else
|
||||||
|
>
|
||||||
|
<h4 class="header">
|
||||||
|
{{ t('views.auth.PasswordResetConfirm.header.success') }}
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
{{ t('views.auth.PasswordResetConfirm.message.success') }}
|
||||||
|
</p>
|
||||||
|
<router-link :to="{name: 'login'}">
|
||||||
|
{{ t('views.auth.PasswordResetConfirm.link.login') }}
|
||||||
|
</router-link>
|
||||||
|
</Alert>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue