Merge branch 'master' into 'matdev'

Master

See merge request !2

.gitlab-ci.yml

@@ -1,7 +1,7 @@
 stages:
     - build
 #    - test
-    - review
+    - deploy
 
 build_ui:
     image: node
@@ -31,7 +31,7 @@ start_review:
         - docker
     dependencies:
         - build_ui
-    stage: review
+    stage: deploy
     script:
         - cat index.html
         - mkdir _for_upload
@@ -46,7 +46,7 @@ stop_review:
     image: mwienk/docker-lftp
     tags:
         - docker
-    stage: review
+    stage: deploy
     variables:
         GIT_STRATEGY: none
     script:
@@ -58,16 +58,27 @@ stop_review:
 
 
 
-review_fullsync:
+fullsync_review:
     image: mwienk/docker-lftp
     tags:
         - docker
     dependencies:
         - build_ui
-    stage: review
+    stage: deploy
     script:
         - mkdir _for_upload
         - mv assets build conf index.html _for_upload
         - lftp -c "set sftp:auto-confirm yes; open -u intern_basispanel_ui,$FTP_PASSWORD sftp://ftp.basehosts.de;mkdir -f /$CI_COMMIT_REF_NAME; mirror -v --transfer-all -e -R -L _for_upload/ /$CI_COMMIT_REF_NAME"
     when: manual
 
+
+docker_test:
+    tags:
+        - shell
+    dependencies:
+        - build_ui
+    stage: deploy
+    script:
+        - mkdir _for_docker
+        - mv assets build conf index.html _for_docker
+        - docker-compose up -d --build

Dockerfile

@@ -0,0 +1,3 @@
+FROM larsks/thttpd
+
+ADD _for_docker/ /

conf/init.json

@@ -22,9 +22,9 @@
                     "icon": "icon-contacts"
                 },
                 {
-                    "name": "FormDemo",
+                    "name": "Settings",
-                    "to": "/formdemo",
+                    "to": "/settings",
-                    "icon": "icon-contacts"
+                    "icon": "icon-cog"
                 }
             ],
             "profile": [
@@ -63,9 +63,9 @@
             "content": "<domainlist></domainlist>"
         },
         {
-            "name": "FormDemo",
+            "name": "Settings",
-            "to": "/formdemo",
+            "to": "/settings",
-            "content": "<form-demo></form-demo>"
+            "content": "<settings></settings>"
         },
         {
             "name": "Logout",

docker-compose.yml

@@ -0,0 +1,23 @@
+version: "2.1"
+
+services:
+  frontend:
+    build: .
+    image: ${CI_PROJECT_NAME}:${CI_COMMIT_REF_NAME}
+    container_name: ${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}
+    restart: always
+    networks:
+      - web
+      - default
+    expose:
+      - "80"
+    labels:
+      - "traefik.backend=${CI_PROJECT_NAME}.${CI_COMMIT_REF_NAME}"
+      - "traefik.docker.network=web"
+      - "traefik.frontend.rule=Host:${CI_COMMIT_REF_NAME}.${CI_PROJECT_NAME}.dev.basehosts.de"
+      - "traefik.enable=true"
+      - "traefik.port=80"
+
+networks:
+  web:
+    external: true

src/app.less

@@ -89,7 +89,7 @@ a:hover {color:#901624;}
 --------------------------------------------------------------*/
 .input_holder {margin-bottom:20px; display:block;}
 .input_header {margin-bottom:10px;}
-.input_description {font-size:13px; color: @text_color;}
+.input_description {font-size:13px; color: lighten(@text_color, 20%);}
 input, textarea, select {
   font-family: @font_family;
 	width: 100%;
@@ -101,17 +101,38 @@ input, textarea, select {
   border: solid 1px #CCC;
   outline: none;
   font-size: 14px;
-	transition: all 0.3s;
+  transition: background 0.3s, color 0.3s, border 0.3s;
 }
 textarea {padding:10px; height:auto;}
 input:focus, textarea:focus, select:focus {background:#FFF; border-color: @cms_brand_primary;}
 label {font-weight:600; color: @text_color;}
 
+.checkbox_holder {
+  position: relative;
+  height: 100%;
+  min-height: 18px;
+
+  &:hover .check_checkbox {
+    border: 1px solid @cms_brand_primary;
+  }
+
+  label {
+    display: block;
+    position: absolute;
+    top: 50%;
+    margin-top: -9px;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    z-index: 10;
+  }
+}
+
 input[type="checkbox"] {
     position: absolute;
     top: -10px;
     left: -10px;
-    line-height:50px;
+    line-height: 50px;
     visibility: hidden;
     display: inline-block;
     margin: 0;
@@ -119,7 +140,6 @@ input[type="checkbox"] {
     width: auto;
     height: auto;
 }
-.checkbox_holder {position:absolute; top:0px; bottom:0px;}
 .check_checkbox {
     background: #FFF;
     display: block;
@@ -167,8 +187,6 @@ button{
   padding: 0px 30px;
   border-radius: 20px;
 }
-.cell_checkbox label {width:18px; height:18px; display:block; cursor:pointer; z-index:10; position: absolute; top:50%; margin-top:-9px;}
-.checkbox_holder:hover .check_checkbox {border: 1px solid @cms_brand_primary;}
 
 /*--------------------------------------------------------------
 # CMS CONTENT FORM

src/components/my-form.vue

@@ -1,18 +1,18 @@
 <template>
     <form @submit.prevent="submit()">
         <div v-for="(item, key) in elements" :key="key">
-            <my-input
+            <component
-                :description="item.description"
+                :is="item.element"
-                :label="item.label"
                 :name="key"
-                :placeholder="item.placeholder"
+                :label="item.label"
-                :type="item.type"
+                :description="item.description"
+                :props="item.props"
                 v-model="formData[key]"
                 @validate="validateData(key)"
                 :invalid="formErrors[key]"
                 :validatorMessage="formErrors[key] ? formErrors[key].message : ''"
             >
-            </my-input>
+            </component>
         </div>
         <div>
             <button class="button" v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
@@ -21,13 +21,9 @@
 </template>
 
 <script>
-import MyInput from './my-input.vue';
-
 export default {
     name: "MyForm",
-    components: {
+    components: {},
-        MyInput
-    },
     props: {
         elements: {
             type: Object,

src/components/my-input.vue

@@ -5,44 +5,54 @@
             <div class="input_description" v-if="description">{{ description }}</div>
         </div>
 
-        <input type="text" v-if="type == 'text'"
+        <!--  -->
+        <input type="text" v-if="props && props.type == 'text'"
             v-model="currentValue"
-            :name="name"
-            :placeholder="placeholder"
-            @blur="validate()"
-            @change="() => $emit('change', currentValue)"
             :class="{invalid}"
+            :id="name"
+            :name="name"
+            :placeholder="props.placeholder"
+            @blur="validate"
+            @change="handleChange"
         >
-        <input type="password" v-else-if="type == 'password'"
+        <input type="password" v-else-if="props && props.type == 'password'"
             v-model="currentValue"
-            :name="name"
-            :placeholder="placeholder"
-            @blur="validate()"
-            @change="() => $emit('change', currentValue)"
             :class="{invalid}"
+            :id="name"
+            :name="name"
+            :placeholder="props.placeholder"
+            @blur="validate"
+            @change="handleChange"
         >
+        <div class="checkbox_holder" v-else-if="props && props.type == 'checkbox'">
+            <label :for="name"></label>
+            <input type="checkbox"
+                v-model="currentValue"
+                :id="name"
+                :name="name"
+                @change="handleChange"
+            >
+            <div class="check_checkbox"></div>
+        </div>
 
         <div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
     </div>
 </template>
 
-
 <style scoped>
     .invalid {
         background-color: #fcc;
     }
 </style>
 
-
 <script>
 export default {
-    name: "MyInput",
+    name: "BasicInput",
     props: [
         'description',
         'label',
         'name',
-        'placeholder',
+        'props',
-        'type',
         'value',
         'invalid',
         'validatorMessage'
@@ -55,6 +65,9 @@ export default {
     methods: {
         validate() {
             this.$emit('validate', this.currentValue);
+        },
+        handleChange() {
+            this.$emit('change', this.currentValue);
         }
     },
     watch: {

src/components/scroll-table.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="Scroll-Table">
-        <my-input placeholder="Suche" type="text" @change="searchChanged" v-model="currentSearch"></my-input>
+        <my-input :props="{type: 'text', placeholder: 'Suche'}" @change="searchChanged" v-model="currentSearch"></my-input>
         <my-table :actions="actions" :columns="columns" :rows="rows"
           :currentOrderBy="currentOrderBy"
           :currentOrderDesc="currentOrderDesc"
@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import MyTable from './my-table.vue';
+import MyTable from 'components/my-table';
-import MyInput from './my-input.vue';
+import MyInput from 'components/my-input';
 
 import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
 

src/components/textarea-input.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="input_holder">
+        <div class="input_header" v-if="label || description">
+            <label :for="name" v-if="label">{{ label }}</label>
+            <div class="input_description" v-if="description">{{ description }}</div>
+        </div>
+
+        <textarea v-model="currentValue"
+            :id="name"
+            :name="name"
+            :class="{invalid}"
+            :placeholder="props ? props.placeholder : ''"
+            @blur="validate"
+            @change="handleChange"
+            >
+        </textarea>
+
+        <div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>
+    </div>
+</template>
+
+
+<style scoped>
+    .invalid {
+        background-color: #fcc;
+    }
+</style>
+
+
+<script>
+export default {
+    name: "TextareaInput",
+    props: [
+        'description',
+        'label',
+        'name',
+        'props',
+        'value',
+        'invalid',
+        'validatorMessage'
+    ],
+    data() {
+        return {
+            currentValue: this.value
+        }
+    },
+    methods: {
+        validate() {
+            this.$emit('validate', this.currentValue);
+        },
+        handleChange() {
+            this.$emit('change', this.currentValue);
+        }
+    },
+    watch: {
+        currentValue(val) {
+            this.$emit('input', val);
+        }
+    }
+}
+</script>

src/components/topbar.vue

@@ -162,6 +162,7 @@ export default {
             padding: 4px 10px;
             font-size: 0;
             color: white;
+            user-select: none;
 
             &:hover {
                 cursor: pointer;

src/variables.less

@@ -5,7 +5,7 @@
 
 @font_family: "Open Sans", sans-serif;
 @text_color: #333;
-@font_size: 14px;
+@font_size: 15px;
 
 @line_height_base: 1.4;
 @line_height_heading: 1.2;

src/views/dashboard.vue

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

src/views/forms/form-demo.vue

@@ -1,98 +0,0 @@
-<template>
-			<div class="cms_content_form">
-				<form action="">
-					<div class="row">
-						<div class="tab8">
-							<my-input type="text" value="" v-model="titel" placeholder="Titel hier eintragen" label="Titel" description="Text .."></my-input>
-							<div class="input_holder">
-								<header class="input_header">
-									<label for="">Permalink</label>
-									<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
-								</header>
-								<input type="text" value="" name="" placeholder="Permalink">
-							</div>
-
-							<div class="input_holder">
-								<header class="input_header">
-									<label for="">Inhalt</label>
-									<div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
-								</header>
-
-								<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
-							</div>
-
-							<!-- Fieldgroup -->
-							<div class="cms_fieldgroup fieldgroup_open">
-								<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
-								<div class="cms_fieldgroup_content">
-									<div class="input_holder">
-										<header class="input_header">
-											<label for="">Noch ein Feld</label>
-											<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
-										</header>
-
-										<input type="text" value="" name="" placeholder="Noch ein Feld">
-									</div>
-
-									<div class="input_holder">
-										<header class="input_header">
-											<label for="">Noch ein Feld</label>
-											<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
-										</header>
-										<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
-									</div>
-								</div>
-							</div>
-
-							<!-- Fieldgroup -->
-							<div class="cms_fieldgroup">
-								<header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
-								<div class="cms_fieldgroup_content">
-									<div class="input_holder">
-										<header class="input_header">
-											<label for="">Noch ein Feld</label>
-											<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
-										</header>
-										<input type="text" value="" name="" placeholder="Noch ein Feld">
-									</div>
-
-									<div class="input_holder">
-										<header class="input_header">
-											<label for="">Noch ein Feld</label>
-											<!-- <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div> -->
-										</header>
-										<textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
-									</div>
-								</div>
-							</div>
-
-
-						</div>
-						<div class="tab4">
-							<div class="cms_content_form_sidebar">
-								Sidebar
-							</div>
-						</div>
-					</div>
-				</form>
-			</div>
-
-</template>
-
-
-
-<script>
-import MyInput from "components/my-input.vue";
-
-export default {
-    name: "DemoForm",
-    components: {
-        MyInput
-    },
-    data() {
-        return {
-            titel: "plapla"
-        }
-    }
-}
-</script>

src/views/forms/login.vue

@@ -7,14 +7,10 @@
 
             <div class="content">
                 <p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>
-
                 <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>
     </div>
@@ -22,11 +18,13 @@
 
 <script>
 import MyForm from "components/my-form";
+import MyInput from "components/my-input";
 
 export default {
     name: "LoginForm",
     components: {
-        MyForm
+        MyForm,
+        MyInput
     },
     data() {
         return {
@@ -34,18 +32,24 @@ export default {
             password: "",
             elements: {
                 username: {
-                    placeholder: "Benutzername",
+                    element: MyInput,
                     icon: "icon-user",
-                    type: "text",
                     required: true,
-                    requiredMessage: "Der Benutzername wird benötigt!"
+                    requiredMessage: "Der Benutzername wird benötigt!",
+                    props: {
+                        type: "text",
+                        placeholder: "Benutzername"
+                    }
                 },
                 password: {
-                    placeholder: "Passwort",
+                    element: MyInput,
                     icon: "icon-key",
-                    type: "password",
                     required: true,
-                    requiredMessage: "Das Passwort wird benötigt!"
+                    requiredMessage: "Das Passwort wird benötigt!",
+                    props: {
+                        type: "password",
+                        placeholder: "Passwort"
+                    }
                 }
             },
             buttons: [{
@@ -119,12 +123,12 @@ export default {
     }
 
     .logo{
-        .clearfix();
         line-height:0; margin-bottom:15px; text-align:center;
         img {width:100%; max-width:72px;}
     }
 
     .content{
+        .clearfix();
         p {text-align:center; color: white; font-size:15px; line-height:1.2;}
     }
 

src/views/forms/settings.vue

@@ -0,0 +1,188 @@
+<template>
+
+    <div class="cms_content_form">
+        <div class="row">
+            <div class="tab8">
+                <my-form :elements="elements" :buttons="buttons" :submitHandler="submit"></my-form>
+            </div>
+            <div class="tab4">
+                <div class="cms_content_form_sidebar">
+                    Sidebar
+                </div>
+            </div>
+        </div>
+    </div>
+<!--        <form action="">
+            <div class="row">
+                <div class="tab8">
+                    <div class="input_holder">
+                        <header class="input_header">
+                            <label for="">Titel</label>
+                        </header>
+                        <input type="text" value="" name="" placeholder="Titel hier eintragen">
+                    </div>
+
+                    <div class="input_holder">
+                        <header class="input_header">
+                            <label for="">Permalink</label>
+                            <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
+                        </header>
+                        <input type="text" value="" name="" placeholder="Permalink">
+                    </div>
+
+                    <div class="input_holder">
+                        <header class="input_header">
+                            <label for="">Inhalt</label>
+                            <div class="input_description">Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.</div>
+                        </header>
+
+                        <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
+                    </div>
+
+                    <div class="cms_fieldgroup fieldgroup_open">
+                        <header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
+                        <div class="cms_fieldgroup_content">
+                            <div class="input_holder">
+                                <header class="input_header">
+                                    <label for="">Noch ein Feld</label>
+                                </header>
+
+                                <input type="text" value="" name="" placeholder="Noch ein Feld">
+                            </div>
+
+                            <div class="input_holder">
+                                <header class="input_header">
+                                    <label for="">Noch ein Feld</label>
+                                </header>
+
+                                <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="cms_fieldgroup">
+                        <header class="cms_fieldgroup_header">Feldergruppe <div class="cms_fieldgroup_trigger"><i class="ion-chevron-down"></i></div></header>
+                        <div class="cms_fieldgroup_content">
+                            <div class="input_holder">
+                                <header class="input_header">
+                                    <label for="">Noch ein Feld</label>
+                                </header>
+
+                                <input type="text" value="" name="" placeholder="Noch ein Feld">
+                            </div>
+
+                            <div class="input_holder">
+                                <header class="input_header">
+                                    <label for="">Noch ein Feld</label>
+                                </header>
+
+                                <textarea name="" id="" rows="10" placeholder="Dies ist ein normales Textfeld"></textarea>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+        </form>
+    </div> -->
+<!--     <div id="login_form">
+        <div class="holder">
+            <div class="logo">
+                <img src="assets/images/cms_logo_white.png" alt="">
+            </div>
+
+            <div class="content">
+                <p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>
+
+                <my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
+
+                <div style="clear:both;"></div>
+            </div>
+        </div>
+    </div> -->
+</template>
+
+<script>
+import MyForm from "components/my-form";
+import MyInput from "components/my-input";
+import TextareaInput from "components/textarea-input";
+
+export default {
+    name: "FormDemo",
+    components: {
+        MyForm,
+        MyInput,
+        TextareaInput
+    },
+    data() {
+        return {
+            username: "",
+            password: "",
+            elements: {
+                title: {
+                    label: "Titel",
+                    required: true,
+                    element: MyInput,
+                    props: {
+                        type: "text",
+                        placeholder: "Titel hier eintragen"
+                    }
+                },
+                permalink: {
+                    label: "Permalink",
+                    description: "Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.",
+                    required: true,
+                    element: MyInput,
+                    props: {
+                        type: "text",
+                        placeholder: "Permalink"
+                    }
+                },
+                content: {
+                    label: "Inhalt",
+                    description: "Hier steht ein Beschreibungstext für etwas begriffsstutzige Menschen, die eine Beschreibung zum Befüllen des Feldes brauchen.",
+                    required: true,
+                    element: TextareaInput,
+                    props: {
+                        placeholder: "Inhalt"
+                    }
+                },
+                public: {
+                    label: "Is Public",
+                    required: true,
+                    element: MyInput,
+                    props: {
+                        type: "checkbox"
+                    }
+                }
+            },
+            buttons: [{
+                label: "login",
+                type: "submit"
+            }]
+        }
+    },
+    methods: {
+        submit(formData) {
+            console.log("submit", JSON.stringify(formData));
+            // this.$store.dispatch("login", formData)
+            //     .then(user => {
+            //         console.log("---- user login --------");
+            //         console.log(user);
+            //         this.$router.go(-1);
+            //     })
+            //     .catch(error => {
+            //         console.log("---- login error -------");
+            //         console.log(error);
+            //     });
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import "~mixins";
+
+</style>

src/views/lists/domainlist.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="Domainlist">
-        <h2>Domainlist</h2>
+        <h1>Domainlist</h1>
         <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>
 
 <script>
-import ScrollTable from '../../components/scroll-table.vue';
+import ScrollTable from 'components/scroll-table.vue';
 
 export default {
     name: "Domainlist",

src/views/lists/userlist.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="Userlist">
-        <h2>Userlist</h2>
+        <h1>Userlist</h1>
         <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>
 
 <script>
-import ScrollTable from '../../components/scroll-table.vue';
+import ScrollTable from 'components/scroll-table.vue';
 
 export default {
     name: "Userlist",

src/views/views.js

@@ -3,7 +3,7 @@ import LoginForm from './forms/login.vue';
 import Logout from './forms/logout.vue';
 import Userlist from './lists/userlist.vue';
 import Domainlist from './lists/domainlist.vue';
-import FormDemo from './forms/form-demo.vue';
+import Settings from 'views/forms/settings.vue';
 
 export default {
     Dashboard,
@@ -11,5 +11,5 @@ export default {
     Logout,
     Userlist,
     Domainlist,
-    FormDemo
+    Settings
 }