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 { useI18n } from 'vue-i18n'
|
||||
|
||||
import Alert from '~/components/ui/Alert.vue'
|
||||
import Input from '~/components/ui/Input.vue'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -45,67 +48,60 @@ onMounted(() => {
|
|||
<main
|
||||
v-title="labels.confirm"
|
||||
class="main"
|
||||
>
|
||||
<section class="ui vertical stripe segment">
|
||||
<div class="ui small text container">
|
||||
<h2>{{ labels.confirm }}</h2>
|
||||
<form
|
||||
v-if="!success"
|
||||
class="ui form"
|
||||
@submit.prevent="submit()"
|
||||
>
|
||||
<div
|
||||
v-if="errors.length > 0"
|
||||
role="alert"
|
||||
class="ui negative message"
|
||||
>
|
||||
<h2>{{ labels.confirm }}</h2>
|
||||
<form
|
||||
v-if="!success"
|
||||
class="ui form"
|
||||
@submit.prevent="submit()"
|
||||
>
|
||||
<Alert red
|
||||
v-if="errors.length > 0"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ t('views.auth.EmailConfirm.header.failure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
v-for="(error, i) in errors"
|
||||
:key="i"
|
||||
>
|
||||
<h4 class="header">
|
||||
{{ t('views.auth.EmailConfirm.header.failure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
v-for="(error, i) in errors"
|
||||
:key="i"
|
||||
>
|
||||
{{ error }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
{{ error }}
|
||||
</li>
|
||||
</ul>
|
||||
</Alert>
|
||||
<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>
|
||||
</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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ import { computed, ref, onMounted } from 'vue'
|
|||
import { useI18n } from 'vue-i18n'
|
||||
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'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -48,59 +52,62 @@ onMounted(() => emailInput.value.focus())
|
|||
v-title="labels.reset"
|
||||
class="main"
|
||||
>
|
||||
<section class="ui vertical stripe segment">
|
||||
<div class="ui small text container">
|
||||
<h2>
|
||||
{{ t('views.auth.PasswordReset.header.reset') }}
|
||||
</h2>
|
||||
<form
|
||||
class="ui form"
|
||||
@submit.prevent="submit()"
|
||||
>
|
||||
<div
|
||||
v-if="errors.length > 0"
|
||||
role="alert"
|
||||
class="ui negative message"
|
||||
<h2>
|
||||
{{ t('views.auth.PasswordReset.header.reset') }}
|
||||
</h2>
|
||||
<form
|
||||
@submit.prevent="submit()"
|
||||
style="max-width: 600px"
|
||||
>
|
||||
<div
|
||||
v-if="errors.length > 0"
|
||||
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">
|
||||
{{ t('views.auth.PasswordReset.header.failure') }}
|
||||
</h4>
|
||||
<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>
|
||||
{{ error }}
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { computed, ref } from 'vue'
|
|||
import axios from 'axios'
|
||||
|
||||
import PasswordInput from '~/components/forms/PasswordInput.vue'
|
||||
import Alert from '~/components/ui/Alert.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
|
||||
interface Props {
|
||||
defaultToken: string
|
||||
|
|
@ -53,71 +55,67 @@ const submit = async () => {
|
|||
<main
|
||||
v-title="labels.changePassword"
|
||||
class="main"
|
||||
>
|
||||
<section class="ui vertical stripe segment">
|
||||
<div class="ui small text container">
|
||||
<h2>{{ labels.changePassword }}</h2>
|
||||
<form
|
||||
v-if="!success"
|
||||
class="ui form"
|
||||
@submit.prevent="submit()"
|
||||
>
|
||||
<div
|
||||
v-if="errors.length > 0"
|
||||
role="alert"
|
||||
class="ui negative message"
|
||||
>
|
||||
<h2>{{ labels.changePassword }}</h2>
|
||||
<form
|
||||
v-if="!success"
|
||||
class="ui form"
|
||||
@submit.prevent="submit()"
|
||||
>
|
||||
<Alert
|
||||
v-if="errors.length > 0"
|
||||
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">
|
||||
{{ t('views.auth.PasswordResetConfirm.header.failure') }}
|
||||
</h4>
|
||||
<ul class="list">
|
||||
<li
|
||||
v-for="(error, key) in errors"
|
||||
:key="key"
|
||||
>
|
||||
{{ error }}
|
||||
</li>
|
||||
</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>
|
||||
{{ error }}
|
||||
</li>
|
||||
</ul>
|
||||
</Alert>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<router-link :to="{path: '/login'}">
|
||||
{{ 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>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue