feat: restyle unauthenticated screens #1103
BIN
src/assets/no-auth-image.jpg
Normal file
BIN
src/assets/no-auth-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 907 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
konrad marked this conversation as resolved
Outdated
|
||||
|
||||
.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);
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
Picky: Picky:
Use `background-color` => more specific, doesn't change other values if they are set (they are not in this case). Makes it easier to overwrite if necessary.
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
Why overflow: hidden? Why overflow: hidden?
konrad
commented
To prevent the background from overflowing in the (rounded) corners. To prevent the background from overflowing in the (rounded) corners.
|
||||
.image {
|
||||
width: 60%;
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
Use mobile first: => no need to reset the border-radius for mobile Use mobile first:
```scss
@media screen and (min-width: $desktop) {
border-radius: $radius;
}
```
=> no need to reset the border-radius for mobile
|
||||
background: url('@/assets/no-auth-image.jpg') no-repeat bottom;
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
Just checked this: The llama is so nice, it's too bad it's not visivle on mobile. How about adding a padding-bottom for mobile? Just checked this: The llama is so nice, it's too bad it's not visivle on mobile. How about adding a padding-bottom for mobile?
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
padding: 1rem;
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
Use mobile first: Compress image and load with something like https://github.com/JonasKruckenberg/imagetools Use mobile first:
```scss
.image {
@media screen and (max-width: $tablet) {
display: none;
}
@media screen and (min-width: $tablet) {
width: 40%;
background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
position: relative;
}
@media screen and (min-width: $desktop) {
width: 60%;
}
}
```
Compress image and load with something like https://github.com/JonasKruckenberg/imagetools
konrad
commented
With the vite wrapper and use it for other images as well? > Compress image and load with something like https://github.com/JonasKruckenberg/imagetools
With the vite wrapper and use it for other images as well?
dpschen
commented
Yes. But maybe let's move this to a new issue. Yes. But maybe let's move this to a new issue.
konrad
commented
yeah I think we should. yeah I think we should.
|
||||
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%;
|
||||
|
konrad marked this conversation as resolved
dpschen
commented
Move these rules to the Move media queries before If you change Move these rules to the `@media screen and (min-width: $tablet)` media query
=> makes it clearer that it just appies there.
```scss
width: 50%;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .2);
z-index: 10;
}
> * {
z-index: 20;
}
```
Move media queries before `&::after` and `> *`
=> those are styling other elements
=> move styles together that style the same stuff
If you change `&::after` in `&::before` you can remove the z-index if you replace
`z-index: 20;` with `position: relative` (this creates a new [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
=> less complexity with managing z-index.
konrad
commented
Done! Done!
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--logo-text-color);
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
Since the image is defined via CSS: Title could have: EDIT: I got a warning for Picky: same for background as above. Since the image is defined via CSS:
Not sure why the overlay is needed at all:
If the image uses flex itself you could position the title and message directly as a child.
Title could have: `margin-top: auto` or `justify-self: flex-end`. I think both should work.
**EDIT:**
I just saw that the overlay is used for the background-overlay. But the same could be archieved without DOM impact / new element by styling a `::after`.
I got a warning for `end` so I guess it's still better to use `flex-end`.
=> Maybe support is better, and it seems that postcss-preset-env / autoprefixer doesn't change this automatically.
Picky: same for background as above.
konrad
commented
Moved this to an after pseudo class. Moved this to an after pseudo class.
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--white);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
|
dpschen marked this conversation as resolved
Outdated
dpschen
commented
If If `.image` is either 40% or 60% why is this 50% wide? Also use mobile first for the width value.
konrad
commented
Change it so everything is always 50%. That seems to work great.
I'm not quite sure why but it does not work when I only use Change it so everything is always 50%. That seems to work great.
> Also use mobile first for the width value.
I'm not quite sure why but it does not work when I only use `min-width: $desktop`.
dpschen
commented
The default width of a flex child is auto as far as i know. The default width of a flex child is auto as far as i know.
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
There is no There is no `<api-config>` in the Register and Reset-password route. Should it be there aswell?
konrad
commented
I think it should. I've moved the I think it should. I've moved the `<api-config/>` component to the wrapper and the logo as well in the process. Should be better now.
|
||||
<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
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
Make login button larger Make login button larger
=> "hard" to tap on mobile if you keep in mind that this is the primary action of the page.
konrad
commented
Would like to do that in #1104 while changing the register link wording you mentioned earlier. Would like to do that in #1104 while changing the register link wording you mentioned earlier.
|
||||
@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">
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
The error message should be on top => can't see on small screens without scrolling The error message should be on top => can't see on small screens without scrolling
konrad
commented
Done. Done.
|
||||
{{ 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
konrad marked this conversation as resolved
Outdated
dpschen
commented
Move error and succes to top here aswell. Move error and succes to top here aswell.
|
||||
{{ successMessage }}
|
||||
</message>
|
||||
<x-button :to="{ name: 'user.login' }">
|
||||
{{ $t('user.auth.login') }}
|
||||
</x-button>
|
||||
</div>
|
||||
<Legal/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
konrad marked this conversation as resolved
dpschen
commented
Move error messages here to top aswell. Move error messages here to top aswell.
|
||||
{{ 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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue
Block a user
Super picky: use
place-items: center(I think this is replaced with the same after parsed :D)Oh, that sounds like a nice property, never heard of it before.