ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Change css names, refactor login guard

This commit is contained in:
Christian Cueni 2019-10-23 08:33:37 +02:00
parent 2eae460b31
commit 81d89dae9a
5 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/components/profile/PasswordChangeForm.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<div class="pw-change"> <div class="pw-change">
<form class="pw-change__form change-form" novalidate @submit.prevent="validateBeforeSubmit"> <form class="pw-change__form change-form" novalidate @submit.prevent="validateBeforeSubmit">
<div class="change-form__field sbform-input"> <div class="change-form__field skillboxform-input">
<label for="old-pw" class="sbform-input__label">Aktuelles Passwort</label> <label for="old-pw" class="skillboxform-input__label">Aktuelles Passwort</label>
<input id="old-pw" <input id="old-pw"
name="oldPassword" name="oldPassword"
type="text" type="text"
v-model="oldPassword" v-model="oldPassword"
v-validate="'required'" v-validate="'required'"
:class="{ 'sbform-input__input--error': errors.has('oldPassword') }" :class="{ 'skillboxform-input__input--error': errors.has('oldPassword') }"
class="change-form__old skillbox-input sbform-input__input" class="change-form__old skillbox-input skillboxform-input__input"
autocomplete="off" autocomplete="off"
data-cy="old-password"> 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-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=" sbform-input__error" data-cy="old-password-remote-errors">{{ error }}</small> <small v-for="error in oldPasswordErrors" :key="error" class=" skillboxform-input__error" data-cy="old-password-remote-errors">{{ error }}</small>
</div> </div>
<div class="change-form__field sbform-input"> <div class="change-form__field skillboxform-input">
<label for="new-pw" class="sbform-input__label">Neues Passwort</label> <label for="new-pw" class="skillboxform-input__label">Neues Passwort</label>
<input id="new-pw" <input id="new-pw"
name="newPassword" name="newPassword"
type="text" type="text"
v-model="newPassword" v-model="newPassword"
v-validate="'required|min:8|strongPassword'" v-validate="'required|min:8|strongPassword'"
:class="{ 'sbform-input__input--error': errors.has('newPassword') }" :class="{ 'skillboxform-input__input--error': errors.has('newPassword') }"
class="change-form__new skillbox-input sbform-input__input" class="change-form__new skillbox-input skillboxform-input__input"
autocomplete="off" autocomplete="off"
data-cy="new-password"> 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-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=" sbform-input__error" data-cy="new-password-remote-errors">{{ error }}</small> <small v-for="error in newPasswordErrors" :key="error" class=" skillboxform-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> <p class="skillboxform-input__hint">Das Passwort muss mindestens 8 Zeichen lang sein und Grossbuchstaben, Zahlen und Sonderzeichen beinhalten.</p>
</div> </div>
<button class="button button--primary change-form__submit" data-cy="change-password-button">Speichern</button> <button class="button button--primary change-form__submit" data-cy="change-password-button">Speichern</button>
</form> </form>

16
client/src/main.js
View File

@ -106,19 +106,19 @@ Vue.filter('date', dateFilter);
/* logged in guard */ /* logged in guard */
const publicPages = ['login'] function getCookieValue(cookieName) {
// https://stackoverflow.com/questions/5639346/what-is-the-shortest-function-for-reading-a-cookie-by-name-in-javascript
function getCookieValue(a) { let cookieValue = document.cookie.match('(^|[^;]+)\\s*' + cookieName + '\\s*=\\s*([^;]+)');
var b = document.cookie.match('(^|[^;]+)\\s*' + a + '\\s*=\\s*([^;]+)'); return cookieValue ? cookieValue.pop() : '';
return b ? b.pop() : '';
} }
function redirectIfLoginRequird(nameOfPage) { function redirectIfLoginRequird(to) {
return publicPages.indexOf(nameOfPage) === -1 && getCookieValue('loginStatus') !== 'true'; // 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) => { router.beforeEach((to, from, next) => {
if (redirectIfLoginRequird(to.name)) { if (redirectIfLoginRequird(to)) {
const redirectUrl = `/login?redirect=${to.path}`; const redirectUrl = `/login?redirect=${to.path}`;
next(redirectUrl); next(redirectUrl);
} else { } else {

28
client/src/pages/login.vue
View File

@ -2,58 +2,58 @@
<div class="login"> <div class="login">
<h1 class="login__title">Melden Sie sich jetzt an</h1> <h1 class="login__title">Melden Sie sich jetzt an</h1>
<form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit"> <form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit">
<div class="login-form__field sbform-input"> <div class="login-form__field skillboxform-input">
<label for="email" class="sbform-input__label">E-Mail</label> <label for="email" class="skillboxform-input__label">E-Mail</label>
<input <input
id="email" id="email"
name="email" name="email"
type="text" type="text"
v-model="email" v-model="email"
v-validate="'required'" v-validate="'required'"
:class="{ 'sbform-input__input--error': errors.has('email') }" :class="{ 'skillboxform-input__input--error': errors.has('email') }"
class="change-form__email skillbox-input sbform-input__input" class="change-form__email skillbox-input skillboxform-input__input"
autocomplete="off" autocomplete="off"
data-cy="email-input" data-cy="email-input"
/> />
<small <small
v-if="errors.has('email') && submitted" v-if="errors.has('email') && submitted"
class="sbform-input__error" class="skillboxform-input__error"
data-cy="email-local-errors" data-cy="email-local-errors"
>{{ errors.first('email') }}</small> >{{ errors.first('email') }}</small>
<small <small
v-for="error in emailErrors" v-for="error in emailErrors"
:key="error" :key="error"
class="sbform-input__error" class="skillboxform-input__error"
data-cy="email-remote-errors" data-cy="email-remote-errors"
>{{ error }}</small> >{{ error }}</small>
</div> </div>
<div class="change-form__field sbform-input"> <div class="change-form__field skillboxform-input">
<label for="pw" class="sbform-input__label">Passwort</label> <label for="pw" class="skillboxform-input__label">Passwort</label>
<input <input
id="pw" id="pw"
name="password" name="password"
type="password" type="password"
v-model="password" v-model="password"
v-validate="'required'" v-validate="'required'"
:class="{ 'sbform-input__input--error': errors.has('password') }" :class="{ 'skillboxform-input__input--error': errors.has('password') }"
class="change-form__new skillbox-input sbform-input__input" class="change-form__new skillbox-input skillboxform-input__input"
autocomplete="off" autocomplete="off"
data-cy="password-input" data-cy="password-input"
/> />
<small <small
v-if="errors.has('password') && submitted" v-if="errors.has('password') && submitted"
class="sbform-input__error" class="skillboxform-input__error"
data-cy="password-local-errors" data-cy="password-local-errors"
>{{ errors.first('password') }}</small> >{{ errors.first('password') }}</small>
<small <small
v-for="error in passwordErrors" v-for="error in passwordErrors"
:key="error" :key="error"
class="sbform-input__error" class="skillboxform-input__error"
data-cy="password-remote-errors" data-cy="password-remote-errors"
>{{ error }}</small> >{{ error }}</small>
</div> </div>
<div class="sbform-input"> <div class="skillboxform-input">
<small class="sbform-input__error" data-cy="login-error" v-if="loginError">{{loginError}}</small> <small class="skillboxform-input__error" data-cy="login-error" v-if="loginError">{{loginError}}</small>
</div> </div>
<div class="actions"> <div class="actions">
<button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button> <button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button>

5
client/src/router/index.js
View File

@ -42,7 +42,10 @@ const routes = [
path: '/login', path: '/login',
name: 'login', name: 'login',
component: login, component: login,
meta: {layout: 'public'} meta: {
layout: 'public',
public: true
}
}, },
{ {
path: '/module/:slug', path: '/module/:slug',

2
client/src/styles/_password_forms.scss
View File

@ -1,4 +1,4 @@
.sbform-input { .skillboxform-input {
margin-bottom: 20px; margin-bottom: 20px;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;