repared profil

frontend/src/components/Inputs/FirstName.vue

@@ -0,0 +1,40 @@
+<template>
+  <div role="group" class="first-name">
+    <label for="input-firstName">Vorname:</label>
+    <b-form-input
+      id="input-firstName"
+      v-model="firstName"
+      :state="firstNameState"
+      aria-describedby="input-live-help input-live-feedback"
+      placeholder="Enter your firstName"
+      trim
+    ></b-form-input>
+
+    <!-- This will only be shown if the preceding input has an invalid state -->
+    <b-form-invalid-feedback id="input-live-feedback">
+      Enter at least 3 letters
+    </b-form-invalid-feedback>
+
+    <!-- This is a form text block (formerly known as help block) -->
+    <b-form-text id="input-live-help">Dein Vorname</b-form-text>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FirstName',
+  props: {
+    value: { type: String, default: '' },
+  },
+  data() {
+    return {
+      firstName: this.value,
+    }
+  },
+  computed: {
+    firstNameState() {
+      return this.firstName.length > 2
+    },
+  },
+}
+</script>

frontend/src/components/Inputs/Job.vue

@@ -0,0 +1,40 @@
+<template>
+  <div role="group" class="input-job">
+    <label for="input-lastName">Job:</label>
+    <b-form-input
+      id="input-job"
+      v-model="job"
+      :state="jobState"
+      aria-describedby="input-live-help input-live-feedback"
+      placeholder="Enter your Job"
+      trim
+    ></b-form-input>
+
+    <!-- This will only be shown if the preceding input has an invalid state -->
+    <b-form-invalid-feedback id="input-live-feedback">
+      Enter at least 3 letters
+    </b-form-invalid-feedback>
+
+    <!-- This is a form text block (formerly known as help block) -->
+    <b-form-text id="input-live-help">Was ist dein Beruf</b-form-text>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Job',
+  props: {
+    value: { type: String, default: '' },
+  },
+  data() {
+    return {
+      job: this.value,
+    }
+  },
+  computed: {
+    jobState() {
+      return this.job.length > 2
+    },
+  },
+}
+</script>

frontend/src/components/Inputs/LastName.vue

@@ -0,0 +1,40 @@
+<template>
+  <div role="group" class="last-name">
+    <label for="input-lastName">Nachname:</label>
+    <b-form-input
+      id="input-lastName"
+      v-model="lastName"
+      :state="lastNameState"
+      aria-describedby="input-live-help input-live-feedback"
+      placeholder="Enter your lastName"
+      trim
+    ></b-form-input>
+
+    <!-- This will only be shown if the preceding input has an invalid state -->
+    <b-form-invalid-feedback id="input-live-feedback">
+      Enter at least 3 letters
+    </b-form-invalid-feedback>
+
+    <!-- This is a form text block (formerly known as help block) -->
+    <b-form-text id="input-live-help">Dein Nachname</b-form-text>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'lastName',
+  props: {
+    value: { type: String, default: '' },
+  },
+  data() {
+    return {
+      lastName: this.value,
+    }
+  },
+  computed: {
+    lastNameState() {
+      return this.lastName.length > 2
+    },
+  },
+}
+</script>

frontend/src/pages/Profile.vue

@@ -1,36 +1,80 @@
 <template>
-  <div fluid="sm" class="mr-2">
+  <div class="profile break">
-    <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
+    <b-card class="justify-content-center">
-    <user-data />
+      <b-form @submit.prevent="submit">
-    <hr />
+        <b-row>
-    <user-password />
+          <b-col>
-    <hr />
+            <first-name v-model="firstName" />
-    <user-language />
+          </b-col>
-    <hr />
+          <b-col>
-    <user-newsletter />
+            <last-name v-model="lastName" />
+          </b-col>
+        </b-row>
+        <div></div>
+        <div></div>
+
+        <b-row class="mt-5">
+          <b-col><language-switch /></b-col>
+          <b-col><job v-model="job" /></b-col>
+        </b-row>
+        <div class="h3 mt-5">Email und Passwort</div>
+        <b-row>
+          <b-col><input-email v-model="email" /></b-col>
+          <b-col><input-password /></b-col>
+        </b-row>
+        <div class="h3 mt-5">Style & News</div>
+        <b-row>
+          <b-col>Newsletter abonnieren</b-col>
+          <b-col>on / of</b-col>
+          <b-col><b-form-checkbox switch size="lg"></b-form-checkbox></b-col>
+        </b-row>
+        <b-row class="mt-3">
+          <b-col>Lightning Mode</b-col>
+          <b-col>on / of</b-col>
+          <b-col><b-form-checkbox switch size="lg"></b-form-checkbox></b-col>
+        </b-row>
+        <b-button type="submit" class="mt-5">speichern</b-button>
+      </b-form>
+    </b-card>
   </div>
 </template>
 <script>
-import UserCard from '@/components/UserCard.vue'
+import FirstName from '@/components/Inputs/FirstName.vue'
-import UserData from '@/components/UserSettings/UserData.vue'
+import LastName from '@/components/Inputs/LastName.vue'
-import UserPassword from '@/components/UserSettings/UserPassword.vue'
+import LanguageSwitch from '@/components/LanguageSwitch.vue'
-import UserLanguage from '@/components/UserSettings/UserLanguage.vue'
+import Job from '@/components/Inputs/Job.vue'
-import UserNewsletter from '@/components/UserSettings/UserNewsletter.vue'
+import InputEmail from '@/components/Inputs/InputEmail.vue'
+import InputPassword from '@/components/Inputs/InputPassword.vue'
 
 export default {
   name: 'Profile',
   components: {
-    UserCard,
+    FirstName,
-    UserData,
+    LastName,
-    UserPassword,
+    LanguageSwitch,
-    UserLanguage,
+    Job,
-    UserNewsletter,
+    InputEmail,
+    InputPassword,
   },
   props: {
     balance: { type: Number, default: 0 },
     transactionCount: { type: Number, default: 0 },
   },
+  data() {
+    return {
+      firstName: this.$store.state.firstName,
+      lastName: this.$store.state.lastName,
+      job: '',
+      email: this.$store.state.email,
+    }
+  },
   methods: {
+    submit() {
+      console.log('submit')
+      console.log(this.firstName)
+      console.log(this.lastName)
+      console.log(this.job)
+    },
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)
     },
@@ -40,16 +84,3 @@ export default {
   },
 }
 </script>
-<style>
-.card-border-radius {
-  border-radius: 0px 5px 5px 0px !important;
-}
-@media screen and (max-width: 1235px) {
-  .card-border-radius {
-    border-radius: 0px !important;
-  }
-}
-.card-background-gray {
-  background-color: #ebebeba3 !important;
-}
-</style>

frontend/src/pages/Settings.vue

@@ -1,28 +1,55 @@
 <template>
-  <div>
+  <div fluid="sm" class="mr-2">
-    <b-card v-if="skeleton">
+    <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
-      {{ $t('navigation.settings') }}
+    <user-data />
-      <b-skeleton animation="wave" width="85%"></b-skeleton>
+    <hr />
-      <b-skeleton animation="wave" width="55%"></b-skeleton>
+    <user-password />
-      <b-skeleton animation="wave" width="70%"></b-skeleton>
+    <hr />
-    </b-card>
+    <user-language />
-    <b-card v-else>
+    <hr />
-      {{ $t('navigation.settings') }}
+    <user-newsletter />
-    </b-card>
   </div>
 </template>
 <script>
+import UserCard from '@/components/UserSettings/UserCard.vue'
+import UserData from '@/components/UserSettings/UserData.vue'
+import UserPassword from '@/components/UserSettings/UserPassword.vue'
+import UserLanguage from '@/components/UserSettings/UserLanguage.vue'
+import UserNewsletter from '@/components/UserSettings/UserNewsletter.vue'
+
 export default {
-  name: 'Settings',
+  name: 'Profile',
-  data() {
+  components: {
-    return {
+    UserCard,
-      skeleton: true,
+    UserData,
-    }
+    UserPassword,
+    UserLanguage,
+    UserNewsletter,
+  },
+  props: {
+    balance: { type: Number, default: 0 },
+    transactionCount: { type: Number, default: 0 },
+  },
+  methods: {
+    updateTransactions(pagination) {
+      this.$emit('update-transactions', pagination)
+    },
   },
   created() {
-    setTimeout(() => {
+    this.updateTransactions(0)
-      this.skeleton = false
-    }, 1500)
   },
 }
 </script>
+<style>
+.card-border-radius {
+  border-radius: 0px 5px 5px 0px !important;
+}
+@media screen and (max-width: 1235px) {
+  .card-border-radius {
+    border-radius: 0px !important;
+  }
+}
+.card-background-gray {
+  background-color: #ebebeba3 !important;
+}
+</style>