panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

form validationMessage

Browse Source
This commit is contained in:
Sebastian Frank 2017-09-01 18:25:46 +02:00
parent 51a01a01b7
commit 0f7a1b1f47
No known key found for this signature in database
GPG Key ID: DC2BC5C506EBF6F3
12 changed files with 52 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -100,6 +100,7 @@ npm run build
- master: http://ui.basispanel.de/master/ - master: http://ui.basispanel.de/master/
- matdev: http://ui.basispanel.de/matdev/ - matdev: http://ui.basispanel.de/matdev/
- die jeweiligen URL's sind auch unter Gitlab Environments im Projekt zu finden - 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 ## bei Problemen

2
conf/init.json
View File

@ -75,7 +75,7 @@
{ {
"name": "Profil", "name": "Profil",
"to": "/profile", "to": "/profile",
"content": "<h3>Profil anpassen</h3>" "content": "<h2>Profil anpassen</h2>"
} }
] ]
} }

11
index.html
View File

@ -4,17 +4,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> </head>
<body> <body>

10
src/app.vue
View File

@ -16,6 +16,16 @@
<style lang="less"> <style lang="less">
@import "app"; @import "app";
.component-fade-enter-active,
.component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter,
.component-fade-leave-to {
opacity: 0;
}
</style> </style>
<script> <script>

3
src/components/my-form.vue
View File

@ -10,6 +10,7 @@
v-model="formData[key]" v-model="formData[key]"
@validate="validateData(key)" @validate="validateData(key)"
:invalid="formErrors[key]" :invalid="formErrors[key]"
:validatorMessage="formErrors[key] ? formErrors[key].message : ''"
> >
</my-input> </my-input>
</div> </div>
@ -58,7 +59,7 @@ export default {
if (this.elements[name].required) { if (this.elements[name].required) {
if (!this.formData[name]) { if (!this.formData[name]) {
this.$set(this.formErrors, name, { this.$set(this.formErrors, name, {
error: 'required field' message: this.elements[name].requiredMessage
}); });
return false; return false;

7
src/components/my-input.vue
View File

@ -4,7 +4,7 @@
<label :for="name" v-if="label">{{ label }}</label> <label :for="name" v-if="label">{{ label }}</label>
<div class="input_description" v-if="description">{{ description }}</div> <div class="input_description" v-if="description">{{ description }}</div>
</div> </div>
<input type="text" v-if="type == 'text'" <input type="text" v-if="type == 'text'"
v-model="currentValue" v-model="currentValue"
:name="name" :name="name"
@ -21,6 +21,8 @@
@change="() => $emit('change', currentValue)" @change="() => $emit('change', currentValue)"
:class="{invalid}" :class="{invalid}"
> >
<div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
</div> </div>
</template> </template>
@ -42,7 +44,8 @@ export default {
'placeholder', 'placeholder',
'type', 'type',
'value', 'value',
'invalid' 'invalid',
'validatorMessage'
], ],
data() { data() {
return { return {

6
src/components/topbar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="topbar"> <div class="topbar">
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div> <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 --> <!-- User Profile -->
<div class="user_profile" ref="user_profile"> <div class="user_profile" ref="user_profile">
@ -57,8 +57,8 @@ export default {
loginID() { loginID() {
return this.$store.state.persist.login.ID; return this.$store.state.persist.login.ID;
}, },
appName() { title() {
return "Meine App"; return this.$store.state.ui.title;
} }
}, },
methods: { methods: {

2
src/views/dashboard.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="Dashboard"> <div class="Dashboard">
Dashboard <h2>Dashboard</h2>
</div> </div>
</template> </template>

29
src/views/forms/login.vue
View File

@ -10,6 +10,10 @@
<my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form> <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 style="clear:both;"></div>
</div> </div>
</div> </div>
@ -33,19 +37,22 @@ export default {
placeholder: "Benutzername", placeholder: "Benutzername",
icon: "icon-user", icon: "icon-user",
type: "text", type: "text",
required: true required: true,
requiredMessage: "Der Benutzername wird benötigt!"
}, },
password: { password: {
placeholder: "Passwort", placeholder: "Passwort",
icon: "icon-key", icon: "icon-key",
type: "password", type: "password",
required: true required: true,
requiredMessage: "Das Passwort wird benötigt!"
} }
}, },
buttons: [{ buttons: [{
label: "login", label: "login",
type: "submit" type: "submit"
}] }],
loginError: ""
} }
}, },
methods: { methods: {
@ -59,12 +66,25 @@ export default {
.catch(error => { .catch(error => {
console.log("---- login error -------"); console.log("---- login error -------");
console.log(error); console.log(error);
this.loginError = "Loginfehler: " + error;
}); });
} }
} }
} }
</script> </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"> <style lang="less">
@import "~mixins"; @import "~mixins";
@ -127,4 +147,5 @@ export default {
} }
} }
} }
</style> </style>

3
src/views/forms/logout.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div> <div>
<h3>Logout</h3>
Sie werden ausgeloggt.... Sie werden ausgeloggt....
</div> </div>
</template> </template>
@ -11,7 +12,7 @@ export default {
this.$store.commit('clearLogin'); this.$store.commit('clearLogin');
setTimeout(() => { setTimeout(() => {
this.$router.replace('/login'); this.$router.replace('/login');
}, 2000); }, 1000);
} }
} }
</script> </script>

2
src/views/lists/domainlist.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="Domainlist"> <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> <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> </div>
</template> </template>

2
src/views/lists/userlist.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="Userlist"> <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> <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> </div>
</template> </template>