From 34b92d6589b4d4823572035cad63c4a223ca9f46 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 7 Jun 2023 16:36:13 +0200
Subject: [PATCH] new style for settings page, remove unused components

---
 frontend/src/App.vue                          |   7 +-
 .../assets/scss/gradido-template-dark.scss    |   2 +-
 .../components/UserSettings/UserPassword.vue  |   2 +-
 frontend/src/locales/de.json                  |   1 +
 frontend/src/locales/en.json                  |   1 +
 frontend/src/pages/Settings.vue               | 179 ++++++++++++++++--
 frontend/src/store/store.js                   |   7 +-
 7 files changed, 175 insertions(+), 24 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a35017836..46f7dacb8 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" ref="app" :class="darkMode ? 'dark-mode' : ''">
     <div :class="$route.meta.requiresAuth ? 'appContent' : ''">
       <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayout'" />
       <div class="goldrand position-fixed fixed-bottom zindex1000"></div>
@@ -13,6 +13,11 @@ import AuthLayout from '@/layouts/AuthLayout'
 
 export default {
   name: 'App',
+  computed: {
+    darkMode() {
+      return this.$store.state.darkMode
+    },
+  },
   components: {
     DashboardLayout,
     AuthLayout,
diff --git a/frontend/src/assets/scss/gradido-template-dark.scss b/frontend/src/assets/scss/gradido-template-dark.scss
index 0c6f6656d..7f06203c1 100644
--- a/frontend/src/assets/scss/gradido-template-dark.scss
+++ b/frontend/src/assets/scss/gradido-template-dark.scss
@@ -3,7 +3,7 @@ $mode-toggle-bg: #262626;
 
 #app {
   &.dark-mode {
-    background-color: black;
+    background-color: $dark;
     color: #fff;
   }
 }
diff --git a/frontend/src/components/UserSettings/UserPassword.vue b/frontend/src/components/UserSettings/UserPassword.vue
index 2f571d400..ed37cca1c 100644
--- a/frontend/src/components/UserSettings/UserPassword.vue
+++ b/frontend/src/components/UserSettings/UserPassword.vue
@@ -103,7 +103,7 @@ export default {
     disabled() {
       return !(
         this.form.newPassword.password !== '' &&
-        this.form.newPassword.password === this.form.newPassword.passwordRepeat
+        this.form.newPassword.password !== this.form.newPassword.passwordRepeat
       )
     },
   },
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index bc125bc7e..291c95d3e 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -181,6 +181,7 @@
     },
     "your_amount": "Dein Betrag"
   },
+  "PersonalDetails":"Persönliche Angaben",
   "GDD": "GDD",
   "gddKonto": "GDD Konto",
   "gdd_per_link": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 6b779613d..e9ca8630f 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -181,6 +181,7 @@
     },
     "your_amount": "Your amount"
   },
+  "PersonalDetails":"Personal details",
   "GDD": "GDD",
   "gddKonto": "GDD Konto",
   "gdd_per_link": {
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index c5ca00f08..35e9c062e 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -1,40 +1,179 @@
 <template>
-  <div class="container bg-white appBoxShadow p-3 mt--3">
-    <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
-    <user-data />
-    <hr />
-    <user-name />
-    <hr />
-    <user-password />
-    <hr />
-    <user-language />
-    <hr />
-    <user-newsletter />
+  <div class="card bg-white gradido-border-radius appBoxShadow p-4 mt--3">
+    <b-form @submit="onSubmit('personalDetails')" @change="disabled = !disabled">
+      <div class="h2">{{ $t('PersonalDetails') }}</div>
+      <b-row>
+        <b-col cols="12" md="6" lg="6">
+          <div role="group">
+            <label for="input-live0">{{ $t('form.username') }}</label>
+            <b-form-input
+              id="input-live0"
+              v-model="username"
+              placeholder="Enter your username"
+              trim
+              readonly
+            ></b-form-input>
+          </div>
+        </b-col>
+        <b-col cols="12" md="6" lg="6">
+          <div role="group">
+            <label for="input-live0">{{ $t('form.email') }}</label>
+            <b-form-input id="input-live0" v-model="email" trim readonly></b-form-input>
+          </div>
+        </b-col>
+      </b-row>
+      <div class="text-small mt-3">
+        Dein Nutzername und E-Mail können momentan nicht geändert werden.
+      </div>
+      <hr />
+      <b-row class="mt-3">
+        <b-col cols="12" md="6" lg="6">
+          <div role="group">
+            <label for="input-live1">{{ $t('form.firstname') }}</label>
+            <b-form-input
+              id="input-live1"
+              v-model="firstName"
+              placeholder="Enter your firstname"
+              trim
+            ></b-form-input>
+          </div>
+        </b-col>
+        <b-col cols="12" md="6" lg="6">
+          <div role="group">
+            <label for="input-live2">{{ $t('form.lastname') }}</label>
+            <b-form-input
+              id="input-live2"
+              v-model="lastName"
+              placeholder="Enter your lastname"
+              trim
+            ></b-form-input>
+          </div>
+        </b-col>
+      </b-row>
+
+      <div v-if="!disabled" class="mt-4 pt-4 text-center">
+        <b-button type="submit" variant="primary" :disabled="disabled">
+          {{ $t('form.save') }}
+        </b-button>
+      </div>
+      <hr />
+      <b-row>
+        <b-col cols="12" md="6" lg="6">{{ $t('language') }}</b-col>
+        <b-col cols="12" md="6" lg="6" class="text-right">
+          <user-language />
+        </b-col>
+      </b-row>
+
+      <hr />
+      <div class="h3 mt-5">{{ $t('form.password') }}</div>
+      <user-password />
+      <hr />
+      <b-row class="mb-5">
+        <b-col cols="12" md="6" lg="6">{{ $t('settings.newsletter.newsletter') }}</b-col>
+        <b-col cols="12" md="6" lg="6" class="text-right">
+          <b-form-checkbox
+            v-model="newsletterState"
+            name="check-button"
+            switch
+            @change="onSubmit('newsletters')"
+          ></b-form-checkbox>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col cols="12" md="6" lg="6">Dark - light mode</b-col>
+        <b-col cols="12" md="6" lg="6" class="text-right">
+          <b-form-checkbox v-model="darkMode" name="dark-mode" switch></b-form-checkbox>
+        </b-col>
+      </b-row>
+    </b-form>
   </div>
 </template>
 <script>
-import UserCard from '@/components/UserSettings/UserCard'
-import UserData from '@/components/UserSettings/UserData'
-import UserName from '@/components/UserSettings/UserName'
 import UserPassword from '@/components/UserSettings/UserPassword'
-import UserLanguage from '@/components/UserSettings/UserLanguage'
-import UserNewsletter from '@/components/UserSettings/UserNewsletter'
+import UserLanguage from '@/components/LanguageSwitch2.vue'
+import { updateUserInfos, subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'
 
 export default {
   name: 'Profile',
   components: {
-    UserCard,
-    UserData,
-    UserName,
     UserPassword,
     UserLanguage,
-    UserNewsletter,
   },
   props: {
     balance: { type: Number, default: 0 },
     transactionCount: { type: Number, default: 0 },
   },
+  data() {
+    return {
+      darkMode: this.$store.state.darkMode,
+      username: '',
+      firstName: this.$store.state.firstName,
+      lastName: this.$store.state.lastName,
+      email: this.$store.state.email,
+      selected: this.$store.state.language,
+      newsletterState: this.$store.state.newsletterState,
+      mutation: '',
+      variables: {},
+      disabled: true,
+    }
+  },
+  watch: {
+    darkMode(val) {
+      this.$store.commit('setDarkMode', this.darkMode)
+    },
+  },
   methods: {
+    async onSubmit(key) {
+      switch (key) {
+        case 'personalDetails':
+          this.mutation = updateUserInfos
+          this.variables = {
+            firstName: this.firstName,
+            lastName: this.lastName,
+          }
+          break
+        case 'newsletters':
+          this.mutation = this.newsletterState ? subscribeNewsletter : unsubscribeNewsletter
+          break
+        default:
+          break
+      }
+      this.$apollo
+        .mutate({
+          mutation: this.mutation,
+          variables: this.variables,
+        })
+        .then(() => {
+          switch (key) {
+            case 'personalDetails':
+              this.$store.commit('firstName', this.firstName)
+              this.$store.commit('lastName', this.form.lastName)
+              this.showUserData = true
+              this.toastSuccess(this.$t('settings.name.change-success'))
+              break
+            case 'newsletters':
+              this.$store.commit('newsletterState', this.newsletterState)
+              this.toastSuccess(
+                this.newsletterState
+                  ? this.$t('settings.newsletter.newsletterTrue')
+                  : this.$t('settings.newsletter.newsletterFalse'),
+              )
+              break
+            default:
+              break
+          }
+        })
+        .catch((error) => {
+          switch (key) {
+            case 'newsletters':
+              this.newsletterState = this.$store.state.newsletterState
+              this.toastError(error.message)
+              break
+            default:
+              break
+          }
+        })
+    },
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)
     },
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index 4036626d8..6241d1744 100644
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@@ -4,7 +4,6 @@ import createPersistedState from 'vuex-persistedstate'
 import { localeChanged } from 'vee-validate'
 import i18n from '@/i18n.js'
 import jwtDecode from 'jwt-decode'
-
 Vue.use(Vuex)
 
 export const mutations = {
@@ -56,6 +55,9 @@ export const mutations = {
   email: (state, email) => {
     state.email = email || ''
   },
+  setDarkMode: (state, darkMode) => {
+    state.darkMode = !!darkMode
+  },
 }
 
 export const actions = {
@@ -71,6 +73,7 @@ export const actions = {
     commit('isAdmin', data.isAdmin)
     commit('hideAmountGDD', data.hideAmountGDD)
     commit('hideAmountGDT', data.hideAmountGDT)
+    commit('setDarkMode', data.darkMode)
   },
   logout: ({ commit, state }) => {
     commit('token', null)
@@ -85,6 +88,7 @@ export const actions = {
     commit('hideAmountGDD', false)
     commit('hideAmountGDT', true)
     commit('email', '')
+    commit('setDarkMode', false)
     localStorage.clear()
   },
 }
@@ -114,6 +118,7 @@ try {
       hideAmountGDD: null,
       hideAmountGDT: null,
       email: '',
+      darkMode: false,
     },
     getters: {},
     // Syncronous mutation of the state