Change css names, refactor login guard
This commit is contained in:
Christian Cueni
parent
2eae460b31
commit
81d89dae9a
|
|
@ -1,34 +1,34 @@
|
|||
<template>
|
||||
<div class="pw-change">
|
||||
<form class="pw-change__form change-form" novalidate @submit.prevent="validateBeforeSubmit">
|
||||
<div class="change-form__field sbform-input">
|
||||
<label for="old-pw" class="sbform-input__label">Aktuelles Passwort</label>
|
||||
<div class="change-form__field skillboxform-input">
|
||||
<label for="old-pw" class="skillboxform-input__label">Aktuelles Passwort</label>
|
||||
<input id="old-pw"
|
||||
name="oldPassword"
|
||||
type="text"
|
||||
v-model="oldPassword"
|
||||
v-validate="'required'"
|
||||
:class="{ 'sbform-input__input--error': errors.has('oldPassword') }"
|
||||
class="change-form__old skillbox-input sbform-input__input"
|
||||
:class="{ 'skillboxform-input__input--error': errors.has('oldPassword') }"
|
||||
class="change-form__old skillbox-input skillboxform-input__input"
|
||||
autocomplete="off"
|
||||
data-cy="old-password">
|
||||
<small v-if="errors.has('oldPassword') && submitted" class="sbform-input__error" data-cy="old-password-local-errors">{{ errors.first('oldPassword') }}</small>
|
||||
<small v-for="error in oldPasswordErrors" :key="error" class=" sbform-input__error" data-cy="old-password-remote-errors">{{ error }}</small>
|
||||
<small v-if="errors.has('oldPassword') && submitted" class="skillboxform-input__error" data-cy="old-password-local-errors">{{ errors.first('oldPassword') }}</small>
|
||||
<small v-for="error in oldPasswordErrors" :key="error" class=" skillboxform-input__error" data-cy="old-password-remote-errors">{{ error }}</small>
|
||||
</div>
|
||||
<div class="change-form__field sbform-input">
|
||||
<label for="new-pw" class="sbform-input__label">Neues Passwort</label>
|
||||
<div class="change-form__field skillboxform-input">
|
||||
<label for="new-pw" class="skillboxform-input__label">Neues Passwort</label>
|
||||
<input id="new-pw"
|
||||
name="newPassword"
|
||||
type="text"
|
||||
v-model="newPassword"
|
||||
v-validate="'required|min:8|strongPassword'"
|
||||
:class="{ 'sbform-input__input--error': errors.has('newPassword') }"
|
||||
class="change-form__new skillbox-input sbform-input__input"
|
||||
:class="{ 'skillboxform-input__input--error': errors.has('newPassword') }"
|
||||
class="change-form__new skillbox-input skillboxform-input__input"
|
||||
autocomplete="off"
|
||||
data-cy="new-password">
|
||||
<small v-if="errors.has('newPassword') && submitted" class=" sbform-input__error" data-cy="new-password-local-errors">{{ errors.first('newPassword') }}</small>
|
||||
<small v-for="error in newPasswordErrors" :key="error" class=" sbform-input__error" data-cy="new-password-remote-errors">{{ error }}</small>
|
||||
<p class="sbform-input__hint">Das Passwort muss mindestens 8 Zeichen lang sein und Grossbuchstaben, Zahlen und Sonderzeichen beinhalten.</p>
|
||||
<small v-if="errors.has('newPassword') && submitted" class=" skillboxform-input__error" data-cy="new-password-local-errors">{{ errors.first('newPassword') }}</small>
|
||||
<small v-for="error in newPasswordErrors" :key="error" class=" skillboxform-input__error" data-cy="new-password-remote-errors">{{ error }}</small>
|
||||
<p class="skillboxform-input__hint">Das Passwort muss mindestens 8 Zeichen lang sein und Grossbuchstaben, Zahlen und Sonderzeichen beinhalten.</p>
|
||||
</div>
|
||||
<button class="button button--primary change-form__submit" data-cy="change-password-button">Speichern</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -106,19 +106,19 @@ Vue.filter('date', dateFilter);
|
|||
|
||||
/* logged in guard */
|
||||
|
||||
const publicPages = ['login']
|
||||
|
||||
function getCookieValue(a) {
|
||||
var b = document.cookie.match('(^|[^;]+)\\s*' + a + '\\s*=\\s*([^;]+)');
|
||||
return b ? b.pop() : '';
|
||||
function getCookieValue(cookieName) {
|
||||
// https://stackoverflow.com/questions/5639346/what-is-the-shortest-function-for-reading-a-cookie-by-name-in-javascript
|
||||
let cookieValue = document.cookie.match('(^|[^;]+)\\s*' + cookieName + '\\s*=\\s*([^;]+)');
|
||||
return cookieValue ? cookieValue.pop() : '';
|
||||
}
|
||||
|
||||
function redirectIfLoginRequird(nameOfPage) {
|
||||
return publicPages.indexOf(nameOfPage) === -1 && getCookieValue('loginStatus') !== 'true';
|
||||
function redirectIfLoginRequird(to) {
|
||||
// public pages have the meta.public property set to true
|
||||
return (!to.hasOwnProperty('meta') || !to.meta.hasOwnProperty('public') || !to.meta.public) && getCookieValue('loginStatus') !== 'true';
|
||||
}
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (redirectIfLoginRequird(to.name)) {
|
||||
if (redirectIfLoginRequird(to)) {
|
||||
const redirectUrl = `/login?redirect=${to.path}`;
|
||||
next(redirectUrl);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -2,58 +2,58 @@
|
|||
<div class="login">
|
||||
<h1 class="login__title">Melden Sie sich jetzt an</h1>
|
||||
<form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit">
|
||||
<div class="login-form__field sbform-input">
|
||||
<label for="email" class="sbform-input__label">E-Mail</label>
|
||||
<div class="login-form__field skillboxform-input">
|
||||
<label for="email" class="skillboxform-input__label">E-Mail</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="text"
|
||||
v-model="email"
|
||||
v-validate="'required'"
|
||||
:class="{ 'sbform-input__input--error': errors.has('email') }"
|
||||
class="change-form__email skillbox-input sbform-input__input"
|
||||
:class="{ 'skillboxform-input__input--error': errors.has('email') }"
|
||||
class="change-form__email skillbox-input skillboxform-input__input"
|
||||
autocomplete="off"
|
||||
data-cy="email-input"
|
||||
/>
|
||||
<small
|
||||
v-if="errors.has('email') && submitted"
|
||||
class="sbform-input__error"
|
||||
class="skillboxform-input__error"
|
||||
data-cy="email-local-errors"
|
||||
>{{ errors.first('email') }}</small>
|
||||
<small
|
||||
v-for="error in emailErrors"
|
||||
:key="error"
|
||||
class="sbform-input__error"
|
||||
class="skillboxform-input__error"
|
||||
data-cy="email-remote-errors"
|
||||
>{{ error }}</small>
|
||||
</div>
|
||||
<div class="change-form__field sbform-input">
|
||||
<label for="pw" class="sbform-input__label">Passwort</label>
|
||||
<div class="change-form__field skillboxform-input">
|
||||
<label for="pw" class="skillboxform-input__label">Passwort</label>
|
||||
<input
|
||||
id="pw"
|
||||
name="password"
|
||||
type="password"
|
||||
v-model="password"
|
||||
v-validate="'required'"
|
||||
:class="{ 'sbform-input__input--error': errors.has('password') }"
|
||||
class="change-form__new skillbox-input sbform-input__input"
|
||||
:class="{ 'skillboxform-input__input--error': errors.has('password') }"
|
||||
class="change-form__new skillbox-input skillboxform-input__input"
|
||||
autocomplete="off"
|
||||
data-cy="password-input"
|
||||
/>
|
||||
<small
|
||||
v-if="errors.has('password') && submitted"
|
||||
class="sbform-input__error"
|
||||
class="skillboxform-input__error"
|
||||
data-cy="password-local-errors"
|
||||
>{{ errors.first('password') }}</small>
|
||||
<small
|
||||
v-for="error in passwordErrors"
|
||||
:key="error"
|
||||
class="sbform-input__error"
|
||||
class="skillboxform-input__error"
|
||||
data-cy="password-remote-errors"
|
||||
>{{ error }}</small>
|
||||
</div>
|
||||
<div class="sbform-input">
|
||||
<small class="sbform-input__error" data-cy="login-error" v-if="loginError">{{loginError}}</small>
|
||||
<div class="skillboxform-input">
|
||||
<small class="skillboxform-input__error" data-cy="login-error" v-if="loginError">{{loginError}}</small>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,10 @@ const routes = [
|
|||
path: '/login',
|
||||
name: 'login',
|
||||
component: login,
|
||||
meta: {layout: 'public'}
|
||||
meta: {
|
||||
layout: 'public',
|
||||
public: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/module/:slug',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.sbform-input {
|
||||
.skillboxform-input {
|
||||
|
||||
margin-bottom: 20px;
|
||||
font-family: $sans-serif-font-family;
|
||||
|
|
|
|||
Loading…
Reference in New Issue