form validationMessage
This commit is contained in:
Sebastian Frank
parent
51a01a01b7
commit
0f7a1b1f47
@ -100,6 +100,7 @@ npm run build
|
||||
- master: http://ui.basispanel.de/master/
|
||||
- matdev: http://ui.basispanel.de/matdev/
|
||||
- die jeweiligen URL's sind auch unter Gitlab Environments im Projekt zu finden
|
||||
- sollte mal ein automatische Deploy (fltp mirror) nicht alle geänderten Dateien kopieren, gibt es einen `deploy_fullsync` in Gitlab Pipelines, den man manuell anstoßen kann
|
||||
|
||||
|
||||
## bei Problemen
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
{
|
||||
"name": "Profil",
|
||||
"to": "/profile",
|
||||
"content": "<h3>Profil anpassen</h3>"
|
||||
"content": "<h2>Profil anpassen</h2>"
|
||||
}
|
||||
]
|
||||
}
|
||||
11
index.html
11
index.html
@ -4,17 +4,6 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
.component-fade-enter-active,
|
||||
.component-fade-leave-active {
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
.component-fade-enter,
|
||||
.component-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
10
src/app.vue
10
src/app.vue
@ -16,6 +16,16 @@
|
||||
|
||||
<style lang="less">
|
||||
@import "app";
|
||||
|
||||
.component-fade-enter-active,
|
||||
.component-fade-leave-active {
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
.component-fade-enter,
|
||||
.component-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
v-model="formData[key]"
|
||||
@validate="validateData(key)"
|
||||
:invalid="formErrors[key]"
|
||||
:validatorMessage="formErrors[key] ? formErrors[key].message : ''"
|
||||
>
|
||||
</my-input>
|
||||
</div>
|
||||
@ -58,7 +59,7 @@ export default {
|
||||
if (this.elements[name].required) {
|
||||
if (!this.formData[name]) {
|
||||
this.$set(this.formErrors, name, {
|
||||
error: 'required field'
|
||||
message: this.elements[name].requiredMessage
|
||||
});
|
||||
|
||||
return false;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<label :for="name" v-if="label">{{ label }}</label>
|
||||
<div class="input_description" v-if="description">{{ description }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
<input type="text" v-if="type == 'text'"
|
||||
v-model="currentValue"
|
||||
:name="name"
|
||||
@ -21,6 +21,8 @@
|
||||
@change="() => $emit('change', currentValue)"
|
||||
:class="{invalid}"
|
||||
>
|
||||
|
||||
<div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -42,7 +44,8 @@ export default {
|
||||
'placeholder',
|
||||
'type',
|
||||
'value',
|
||||
'invalid'
|
||||
'invalid',
|
||||
'validatorMessage'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="topbar">
|
||||
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
|
||||
<div class="name">{{ appName }}</div>
|
||||
<div class="name">{{ title }}</div>
|
||||
|
||||
<!-- User Profile -->
|
||||
<div class="user_profile" ref="user_profile">
|
||||
@ -57,8 +57,8 @@ export default {
|
||||
loginID() {
|
||||
return this.$store.state.persist.login.ID;
|
||||
},
|
||||
appName() {
|
||||
return "Meine App";
|
||||
title() {
|
||||
return this.$store.state.ui.title;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="Dashboard">
|
||||
Dashboard
|
||||
<h2>Dashboard</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -10,6 +10,10 @@
|
||||
|
||||
<my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
|
||||
|
||||
<transition name="component-fade">
|
||||
<div class="loginerror" v-show="loginError">{{ loginError }}</div>
|
||||
</transition>
|
||||
|
||||
<div style="clear:both;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,19 +37,22 @@ export default {
|
||||
placeholder: "Benutzername",
|
||||
icon: "icon-user",
|
||||
type: "text",
|
||||
required: true
|
||||
required: true,
|
||||
requiredMessage: "Der Benutzername wird benötigt!"
|
||||
},
|
||||
password: {
|
||||
placeholder: "Passwort",
|
||||
icon: "icon-key",
|
||||
type: "password",
|
||||
required: true
|
||||
required: true,
|
||||
requiredMessage: "Das Passwort wird benötigt!"
|
||||
}
|
||||
},
|
||||
buttons: [{
|
||||
label: "login",
|
||||
type: "submit"
|
||||
}]
|
||||
}],
|
||||
loginError: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -59,12 +66,25 @@ export default {
|
||||
.catch(error => {
|
||||
console.log("---- login error -------");
|
||||
console.log(error);
|
||||
this.loginError = "Loginfehler: " + error;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loginerror {
|
||||
color: black;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
background-color: #faa;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
@import "~mixins";
|
||||
|
||||
@ -127,4 +147,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3>Logout</h3>
|
||||
Sie werden ausgeloggt....
|
||||
</div>
|
||||
</template>
|
||||
@ -11,7 +12,7 @@ export default {
|
||||
this.$store.commit('clearLogin');
|
||||
setTimeout(() => {
|
||||
this.$router.replace('/login');
|
||||
}, 2000);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="Domainlist">
|
||||
<h1>Domainlist</h1>
|
||||
<h2>Domainlist</h2>
|
||||
<scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="Name" :orderDesc="false" :limit="50"></scroll-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="Userlist">
|
||||
<h1>Userlist</h1>
|
||||
<h2>Userlist</h2>
|
||||
<scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" :limit="50"></scroll-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user