feat: restyle unauthenticated screens

This commit is contained in:
kolaente 2021-11-28 15:31:13 +01:00
parent f3324c6aaf
commit 0a89421189
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
7 changed files with 337 additions and 292 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 907 KiB

View File

@ -1,11 +1,20 @@
<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">
<div class="overlay">
<message v-if="motd !== ''">
{{ motd }}
</message>
<h2 class="title">
{{ $t('misc.welcomeBack') }}
</h2>
</div>
</section>
<section class="content">
<slot/>
</section>
</div>
</div>
</template>
@ -24,17 +33,60 @@ const motd = computed(() => store.state.config.motd)
.no-auth-wrapper {
background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--site-background);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.noauth-container {
max-width: 450px;
max-width: $desktop;
width: 100%;
margin: 0 auto;
min-height: 60vh;
display: flex;
background: var(--white);
border-radius: $radius;
box-shadow: var(--shadow-md);
overflow: hidden;
}
.image {
width: 60%;
background: url('@/assets/no-auth-image.jpg') no-repeat bottom;
background-size: cover;
position: relative;
}
.overlay {
padding: 1rem;
display: flex;
justify-content: space-between;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .2);
}
.content {
width: 50%;
padding: 2rem;
}
.logo {
color: var(--logo-text-color);
max-width: 100%;
margin-bottom: 1rem;
}
.message {
margin: 1rem;
}
.title {
color: var(--white);
font-size: 2.5rem;
}
</style>

View File

@ -471,7 +471,8 @@
"close": "Close",
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu"
"hideMenu": "Hide the menu",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Reset Color",

View File

@ -1,104 +1,102 @@
<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>
<h2 class="title">Login</h2>
<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>
<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.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>
</template>

View File

@ -1,67 +1,65 @@
<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>
<h2 class="title">{{ $t('user.auth.resetPassword') }}</h2>
<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 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/>
<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/>
</div>
</template>

View File

@ -1,97 +1,95 @@
<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>
<h2 class="title">{{ $t('user.auth.register') }}</h2>
<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>
<message v-if="loading">
{{ $t('misc.loading') }}
</message>
<message variant="danger" v-if="errorMessage !== ''">
{{ errorMessage }}
</message>
</form>
<legal/>
</div>
</template>

View File

@ -1,65 +1,63 @@
<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>
<h2 class="title">{{ $t('user.auth.resetPassword') }}</h2>
<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 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 />
<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/>
</div>
</template>
<script setup>
import {ref, reactive} from 'vue'
import { useI18n } from 'vue-i18n'
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 {useTitle} from '@/composables/useTitle'
import Message from '@/components/misc/message'
const { t } = useI18n()
const {t} = useI18n()
useTitle(() => t('user.auth.resetPassword'))
// Not sure if this instance needs a shalloRef at all
@ -73,7 +71,7 @@ async function submit() {
try {
await passwordResetService.requestResetPassword(passwordReset.value)
isSuccess.value = true
} catch(e) {
} catch (e) {
errorMsg.value = e.response.data.message
}
}