ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: restyle unauthenticated screens (#1103)

Browse Source 
I wanted to give the no-auth screens a new look. Here's what I ended up with:

![image](/attachments/d272f36b-03c1-40ca-91f6-30f34e03e5fd)

The image is something we could change with every release.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1103
Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad
2021-12-12 16:40:13 +00:00
committed by Dominik Pschenitschni
parent 14f1ee1885
commit 32353e3b76
10 changed files with 394 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/views/user/PasswordReset.vue
View File

@ -1,67 +1,60 @@
<template>
<div>
<h2 class="title has-text-centered">{{ $t('user.auth.resetPassword') }}</h2>
<div class="box">
<form @submit.prevent="submit" id="form" v-if="!successMessage">
<div class="field">
<label class="label" for="password1">{{ $t('user.auth.password') }}</label>
<div class="control">
<input
class="input"
id="password1"
name="password1"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-focus
v-model="credentials.password"/>
</div>
</div>
<div class="field">
<label class="label" for="password2">{{ $t('user.auth.passwordRepeat') }}</label>
<div class="control">
<input
class="input"
id="password2"
name="password2"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-model="credentials.password2"
@keyup.enter="submit"
/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<x-button
:loading="this.passwordResetService.loading"
@click="submit"
>
{{ $t('user.auth.resetPassword') }}
</x-button>
</div>
</div>
<message v-if="this.passwordResetService.loading">
{{ $t('misc.loading') }}
</message>
<message v-if="errorMsg">
{{ errorMsg }}
</message>
</form>
<div class="has-text-centered" v-if="successMessage">
<message variant="success">
{{ successMessage }}
</message>
<x-button :to="{ name: 'user.login' }">
{{ $t('user.auth.login') }}
</x-button>
</div>
<Legal/>
<message v-if="errorMsg">
{{ errorMsg }}
</message>
<div class="has-text-centered" v-if="successMessage">
<message variant="success">
{{ successMessage }}
</message>
<x-button :to="{ name: 'user.login' }">
{{ $t('user.auth.login') }}
</x-button>
</div>
<form @submit.prevent="submit" id="form" v-if="!successMessage">
<div class="field">
<label class="label" for="password1">{{ $t('user.auth.password') }}</label>
<div class="control">
<input
class="input"
id="password1"
name="password1"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-focus
v-model="credentials.password"/>
</div>
</div>
<div class="field">
<label class="label" for="password2">{{ $t('user.auth.passwordRepeat') }}</label>
<div class="control">
<input
class="input"
id="password2"
name="password2"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-model="credentials.password2"
@keyup.enter="submit"
/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<x-button
:loading="this.passwordResetService.loading"
@click="submit"
>
{{ $t('user.auth.resetPassword') }}
</x-button>
</div>
</div>
</form>
</div>
</template>
@ -69,14 +62,11 @@
import {ref, reactive} from 'vue'
import {useI18n} from 'vue-i18n'
import Legal from '@/components/misc/legal'
import PasswordResetModel from '@/models/passwordReset'
import PasswordResetService from '@/services/passwordReset'
import {useTitle} from '@/composables/useTitle'
import Message from '@/components/misc/message'
const {t} = useI18n()
useTitle(() => t('user.auth.resetPassword'))
const credentials = reactive({
password: '',