feat: restyle unauthenticated screens (#1103)
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
I wanted to give the no-auth screens a new look. Here's what I ended up with:  The image is something we could change with every release. Co-authored-by: kolaente <k@knt.li> Reviewed-on: #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:
Dominik Pschenitschni
parent
14f1ee1885
commit
32353e3b76
Binary file not shown.
|
After Width: | Height: | Size: 519 KiB |
|
|
@ -23,7 +23,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="api-url-info" v-else>
|
||||
<i18n-t keypath="apiConfig.signInOn">
|
||||
<i18n-t keypath="apiConfig.use">
|
||||
<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
|
||||
</i18n-t>
|
||||
<br/>
|
||||
|
|
@ -101,7 +101,7 @@ export default {
|
|||
|
||||
// Set it + save it to local storage to save us the hoops
|
||||
this.errorMsg = ''
|
||||
this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain})
|
||||
this.$message.success({message: this.$t('apiConfig.success', {domain: this.apiDomain})})
|
||||
this.configureApi = false
|
||||
this.apiUrl = url
|
||||
this.$emit('foundApi', this.apiUrl)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div class="message" :class="variant">
|
||||
<slot/>
|
||||
<div class="message-wrapper">
|
||||
<div class="message" :class="variant">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -14,6 +16,11 @@ defineProps({
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-wrapper {
|
||||
border-radius: $radius;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: .75rem 1rem;
|
||||
border-radius: $radius;
|
||||
|
|
|
|||
|
|
@ -1,40 +1,134 @@
|
|||
<template>
|
||||
<div class="no-auth-wrapper">
|
||||
<Logo class="logo" width="200" height="58"/>
|
||||
<div class="noauth-container">
|
||||
<Logo class="logo" width="400" height="117" />
|
||||
<Message v-if="motd !== ''" class="my-2">
|
||||
{{ motd }}
|
||||
</Message>
|
||||
<slot/>
|
||||
<section class="image" :class="{'has-message': motd !== ''}">
|
||||
<Message v-if="motd !== ''">
|
||||
{{ motd }}
|
||||
</Message>
|
||||
<h2 class="image-title">
|
||||
{{ $t('misc.welcomeBack') }}
|
||||
</h2>
|
||||
</section>
|
||||
<section class="content">
|
||||
<div>
|
||||
<h2 class="title" v-if="title">{{ title }}</h2>
|
||||
<api-config @foundApi="hasApiUrl = true"/>
|
||||
<slot/>
|
||||
</div>
|
||||
<legal/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Logo from '@/components/home/Logo.vue'
|
||||
import Message from '@/components/misc/message.vue'
|
||||
import Logo from '@/components/home/Logo'
|
||||
import Message from '@/components/misc/message'
|
||||
import Legal from '@/components/misc/legal'
|
||||
import ApiConfig from '@/components/misc/api-config.vue'
|
||||
import {useStore} from 'vuex'
|
||||
import {computed} from 'vue'
|
||||
import {useRoute} from 'vue-router'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {useTitle} from '@/composables/useTitle'
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
const {t} = useI18n()
|
||||
|
||||
const motd = computed(() => store.state.config.motd)
|
||||
// @ts-ignore
|
||||
const title = computed(() => t(route.meta.title ?? ''))
|
||||
useTitle(() => title.value)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.no-auth-wrapper {
|
||||
background: url('@/assets/llama.svg?url') no-repeat bottom left fixed var(--site-background);
|
||||
background: var(--site-background) url('@/assets/llama.svg?url') no-repeat fixed bottom left;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
|
||||
@media screen and (max-width: $fullhd) {
|
||||
padding-bottom: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.noauth-container {
|
||||
max-width: 450px;
|
||||
max-width: $desktop;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
background-color: var(--white);
|
||||
box-shadow: var(--shadow-md);
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 50%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
|
||||
position: relative;
|
||||
|
||||
&.has-message {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 2rem 2rem 1.5rem;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--logo-text-color);
|
||||
max-width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.image-title {
|
||||
color: var(--white);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
"password": "Password",
|
||||
"passwordRepeat": "Retype your password",
|
||||
"passwordPlaceholder": "e.g. •••••••••••",
|
||||
"forgotPassword": "Forgot your password?",
|
||||
"resetPassword": "Reset your password",
|
||||
"resetPasswordAction": "Send me a password reset link",
|
||||
"resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
|
||||
|
|
@ -473,7 +474,8 @@
|
|||
"download": "Download",
|
||||
"showMenu": "Show the menu",
|
||||
"hideMenu": "Hide the menu",
|
||||
"forExample": "For example:"
|
||||
"forExample": "For example:",
|
||||
"welcomeBack": "Welcome Back!"
|
||||
},
|
||||
"input": {
|
||||
"resetColor": "Reset Color",
|
||||
|
|
@ -811,7 +813,7 @@
|
|||
"url": "Vikunja URL",
|
||||
"urlPlaceholder": "eg. https://localhost:3456",
|
||||
"change": "change",
|
||||
"signInOn": "Sign in to your Vikunja account on {0}",
|
||||
"use": "Using Vikunja installation at {0}",
|
||||
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
|
||||
"success": "Using Vikunja installation at \"{domain}\".",
|
||||
"urlRequired": "A url is required."
|
||||
|
|
|
|||
|
|
@ -105,21 +105,33 @@ const router = createRouter({
|
|||
path: '/login',
|
||||
name: 'user.login',
|
||||
component: LoginComponent,
|
||||
meta: {
|
||||
title: 'user.auth.login',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/get-password-reset',
|
||||
name: 'user.password-reset.request',
|
||||
component: GetPasswordResetComponent,
|
||||
meta: {
|
||||
title: 'user.auth.resetPassword',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/password-reset',
|
||||
name: 'user.password-reset.reset',
|
||||
component: PasswordResetComponent,
|
||||
meta: {
|
||||
title: 'user.auth.resetPassword',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'user.register',
|
||||
component: RegisterComponent,
|
||||
meta: {
|
||||
title: 'user.auth.register',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/user/settings',
|
||||
|
|
|
|||
|
|
@ -1,103 +1,97 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2 class="title has-text-centered">Login</h2>
|
||||
<div class="box">
|
||||
<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
|
||||
{{ $t('user.auth.confirmEmailSuccess') }}
|
||||
</message>
|
||||
<api-config @foundApi="hasApiUrl = true"/>
|
||||
<form @submit.prevent="submit" id="loginform" v-if="hasApiUrl && localAuthEnabled">
|
||||
<div class="field">
|
||||
<label class="label" for="username">{{ $t('user.auth.usernameEmail') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input" id="username"
|
||||
name="username"
|
||||
:placeholder="$t('user.auth.usernamePlaceholder')"
|
||||
ref="username"
|
||||
required
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
v-focus
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
|
||||
{{ $t('user.auth.confirmEmailSuccess') }}
|
||||
</message>
|
||||
<message variant="danger" v-if="errorMessage">
|
||||
{{ errorMessage }}
|
||||
</message>
|
||||
<form @submit.prevent="submit" id="loginform" v-if="localAuthEnabled">
|
||||
<div class="field">
|
||||
<label class="label" for="username">{{ $t('user.auth.usernameEmail') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input" id="username"
|
||||
name="username"
|
||||
:placeholder="$t('user.auth.usernamePlaceholder')"
|
||||
ref="username"
|
||||
required
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
v-focus
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="password"
|
||||
name="password"
|
||||
:placeholder="$t('user.auth.passwordPlaceholder')"
|
||||
ref="password"
|
||||
required
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="password"
|
||||
name="password"
|
||||
:placeholder="$t('user.auth.passwordPlaceholder')"
|
||||
ref="password"
|
||||
required
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
<div class="field" v-if="needsTotpPasscode">
|
||||
<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
autocomplete="one-time-code"
|
||||
class="input"
|
||||
id="totpPasscode"
|
||||
:placeholder="$t('user.auth.totpPlaceholder')"
|
||||
ref="totpPasscode"
|
||||
required
|
||||
type="text"
|
||||
v-focus
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" v-if="needsTotpPasscode">
|
||||
<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
autocomplete="one-time-code"
|
||||
class="input"
|
||||
id="totpPasscode"
|
||||
:placeholder="$t('user.auth.totpPlaceholder')"
|
||||
ref="totpPasscode"
|
||||
required
|
||||
type="text"
|
||||
v-focus
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped login-buttons">
|
||||
<div class="control is-expanded">
|
||||
<x-button
|
||||
@click="submit"
|
||||
:loading="loading"
|
||||
>
|
||||
{{ $t('user.auth.login') }}
|
||||
</x-button>
|
||||
<x-button
|
||||
:to="{ name: 'user.register' }"
|
||||
v-if="registrationEnabled"
|
||||
type="secondary"
|
||||
>
|
||||
{{ $t('user.auth.register') }}
|
||||
</x-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
|
||||
{{ $t('user.auth.resetPassword') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<message variant="danger" v-if="errorMessage">
|
||||
{{ errorMessage }}
|
||||
</message>
|
||||
</form>
|
||||
|
||||
<div
|
||||
v-if="hasOpenIdProviders"
|
||||
class="mt-4">
|
||||
<x-button
|
||||
@click="redirectToProvider(p)"
|
||||
v-for="(p, k) in openidConnect.providers"
|
||||
:key="k"
|
||||
type="secondary"
|
||||
class="is-fullwidth mt-2"
|
||||
>
|
||||
{{ $t('user.auth.loginWith', {provider: p.name}) }}
|
||||
</x-button>
|
||||
</div>
|
||||
|
||||
<legal/>
|
||||
<div class="field is-grouped login-buttons">
|
||||
<div class="control is-expanded">
|
||||
<x-button
|
||||
@click="submit"
|
||||
:loading="loading"
|
||||
>
|
||||
{{ $t('user.auth.login') }}
|
||||
</x-button>
|
||||
<x-button
|
||||
:to="{ name: 'user.register' }"
|
||||
v-if="registrationEnabled"
|
||||
type="secondary"
|
||||
>
|
||||
{{ $t('user.auth.register') }}
|
||||
</x-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
|
||||
{{ $t('user.auth.forgotPassword') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div
|
||||
v-if="hasOpenIdProviders"
|
||||
class="mt-4">
|
||||
<x-button
|
||||
@click="redirectToProvider(p)"
|
||||
v-for="(p, k) in openidConnect.providers"
|
||||
:key="k"
|
||||
type="secondary"
|
||||
class="is-fullwidth mt-2"
|
||||
>
|
||||
{{ $t('user.auth.loginWith', {provider: p.name}) }}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -107,8 +101,6 @@ import {mapState} from 'vuex'
|
|||
|
||||
import {HTTPFactory} from '@/http-common'
|
||||
import {LOADING} from '@/store/mutation-types'
|
||||
import legal from '../../components/misc/legal'
|
||||
import ApiConfig from '@/components/misc/api-config.vue'
|
||||
import {getErrorText} from '@/message'
|
||||
import Message from '@/components/misc/message'
|
||||
import {redirectToProvider} from '../../helpers/redirectToProvider'
|
||||
|
|
@ -117,13 +109,10 @@ import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
|
|||
export default {
|
||||
components: {
|
||||
Message,
|
||||
ApiConfig,
|
||||
legal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
confirmedEmailSuccess: false,
|
||||
hasApiUrl: false,
|
||||
errorMessage: '',
|
||||
}
|
||||
},
|
||||
|
|
@ -161,13 +150,11 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
this.hasApiUrl = window.API_URL !== ''
|
||||
this.setTitle(this.$t('user.auth.login'))
|
||||
},
|
||||
computed: {
|
||||
hasOpenIdProviders() {
|
||||
return this.hasApiUrl &&
|
||||
this.openidConnect.enabled &&
|
||||
return this.openidConnect.enabled &&
|
||||
this.openidConnect.providers &&
|
||||
this.openidConnect.providers.length > 0
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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: '',
|
||||
|
|
|
|||
|
|
@ -1,97 +1,90 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2 class="title has-text-centered">{{ $t('user.auth.register') }}</h2>
|
||||
<div class="box">
|
||||
<form @submit.prevent="submit" id="registerform">
|
||||
<div class="field">
|
||||
<label class="label" for="username">{{ $t('user.auth.username') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="username"
|
||||
name="username"
|
||||
:placeholder="$t('user.auth.usernamePlaceholder')"
|
||||
required
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
v-focus
|
||||
v-model="credentials.username"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
<message variant="danger" v-if="errorMessage !== ''">
|
||||
{{ errorMessage }}
|
||||
</message>
|
||||
<form @submit.prevent="submit" id="registerform">
|
||||
<div class="field">
|
||||
<label class="label" for="username">{{ $t('user.auth.username') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="username"
|
||||
name="username"
|
||||
:placeholder="$t('user.auth.usernamePlaceholder')"
|
||||
required
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
v-focus
|
||||
v-model="credentials.username"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="email"
|
||||
name="email"
|
||||
:placeholder="$t('user.auth.emailPlaceholder')"
|
||||
required
|
||||
type="email"
|
||||
v-model="credentials.email"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="email"
|
||||
name="email"
|
||||
:placeholder="$t('user.auth.emailPlaceholder')"
|
||||
required
|
||||
type="email"
|
||||
v-model="credentials.email"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="password"
|
||||
name="password"
|
||||
:placeholder="$t('user.auth.passwordPlaceholder')"
|
||||
required
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
v-model="credentials.password"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="password"
|
||||
name="password"
|
||||
:placeholder="$t('user.auth.passwordPlaceholder')"
|
||||
required
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
v-model="credentials.password"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="passwordValidation">{{ $t('user.auth.passwordRepeat') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="passwordValidation"
|
||||
name="passwordValidation"
|
||||
:placeholder="$t('user.auth.passwordPlaceholder')"
|
||||
required
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
v-model="passwordValidation"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="passwordValidation">{{ $t('user.auth.passwordRepeat') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="passwordValidation"
|
||||
name="passwordValidation"
|
||||
:placeholder="$t('user.auth.passwordPlaceholder')"
|
||||
required
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
v-model="passwordValidation"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<x-button
|
||||
:loading="loading"
|
||||
id="register-submit"
|
||||
@click="submit"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ $t('user.auth.register') }}
|
||||
</x-button>
|
||||
<x-button :to="{ name: 'user.login' }" type="secondary">
|
||||
{{ $t('user.auth.login') }}
|
||||
</x-button>
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<x-button
|
||||
:loading="loading"
|
||||
id="register-submit"
|
||||
@click="submit"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ $t('user.auth.register') }}
|
||||
</x-button>
|
||||
<x-button :to="{ name: 'user.login' }" type="secondary">
|
||||
{{ $t('user.auth.login') }}
|
||||
</x-button>
|
||||
</div>
|
||||
<message v-if="loading">
|
||||
{{ $t('misc.loading') }}
|
||||
</message>
|
||||
<message variant="danger" v-if="errorMessage !== ''">
|
||||
{{ errorMessage }}
|
||||
</message>
|
||||
</form>
|
||||
<legal/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -101,8 +94,6 @@ import {useI18n} from 'vue-i18n'
|
|||
|
||||
import router from '@/router'
|
||||
import {store} from '@/store'
|
||||
import {useTitle} from '@/composables/useTitle'
|
||||
import Legal from '@/components/misc/legal'
|
||||
import Message from '@/components/misc/message'
|
||||
|
||||
// FIXME: use the `beforeEnter` hook of vue-router
|
||||
|
|
@ -114,7 +105,6 @@ onBeforeMount(() => {
|
|||
})
|
||||
|
||||
const {t} = useI18n()
|
||||
useTitle(() => t('user.auth.register'))
|
||||
|
||||
const credentials = reactive({
|
||||
username: '',
|
||||
|
|
|
|||
|
|
@ -1,67 +1,56 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2 class="title has-text-centered">{{ $t('user.auth.resetPassword') }}</h2>
|
||||
<div class="box">
|
||||
<form @submit.prevent="submit" v-if="!isSuccess">
|
||||
<div class="field">
|
||||
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="email"
|
||||
name="email"
|
||||
:placeholder="$t('user.auth.emailPlaceholder')"
|
||||
required
|
||||
type="email"
|
||||
v-focus
|
||||
v-model="passwordReset.email"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<x-button
|
||||
@click="submit"
|
||||
:loading="passwordResetService.loading"
|
||||
>
|
||||
{{ $t('user.auth.resetPasswordAction') }}
|
||||
</x-button>
|
||||
<x-button :to="{ name: 'user.login' }" type="secondary">
|
||||
{{ $t('user.auth.login') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
<message variant="danger" v-if="errorMsg">
|
||||
{{ errorMsg }}
|
||||
</message>
|
||||
</form>
|
||||
<div class="has-text-centered" v-if="isSuccess">
|
||||
<message variant="success">
|
||||
{{ $t('user.auth.resetPasswordSuccess') }}
|
||||
</message>
|
||||
<x-button :to="{ name: 'user.login' }">
|
||||
{{ $t('user.auth.login') }}
|
||||
</x-button>
|
||||
</div>
|
||||
<Legal />
|
||||
<message variant="danger" v-if="errorMsg">
|
||||
{{ errorMsg }}
|
||||
</message>
|
||||
<div class="has-text-centered" v-if="isSuccess">
|
||||
<message variant="success">
|
||||
{{ $t('user.auth.resetPasswordSuccess') }}
|
||||
</message>
|
||||
<x-button :to="{ name: 'user.login' }">
|
||||
{{ $t('user.auth.login') }}
|
||||
</x-button>
|
||||
</div>
|
||||
<form @submit.prevent="submit" v-if="!isSuccess">
|
||||
<div class="field">
|
||||
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="email"
|
||||
name="email"
|
||||
:placeholder="$t('user.auth.emailPlaceholder')"
|
||||
required
|
||||
type="email"
|
||||
v-focus
|
||||
v-model="passwordReset.email"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<x-button
|
||||
@click="submit"
|
||||
:loading="passwordResetService.loading"
|
||||
>
|
||||
{{ $t('user.auth.resetPasswordAction') }}
|
||||
</x-button>
|
||||
<x-button :to="{ name: 'user.login' }" type="secondary">
|
||||
{{ $t('user.auth.login') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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'))
|
||||
|
||||
// Not sure if this instance needs a shalloRef at all
|
||||
const passwordResetService = reactive(new PasswordResetService())
|
||||
const passwordReset = ref(new PasswordResetModel())
|
||||
|
|
@ -73,7 +62,7 @@ async function submit() {
|
|||
try {
|
||||
await passwordResetService.requestResetPassword(passwordReset.value)
|
||||
isSuccess.value = true
|
||||
} catch(e) {
|
||||
} catch (e) {
|
||||
errorMsg.value = e.response.data.message
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue