mirror of
https://github.com/IT4Change/gradido.git
synced 2026-02-06 09:56:05 +00:00
new style for settings page, remove unused components
This commit is contained in:
ogerly
parent
351d15ccb9
commit
34b92d6589
@ -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,
|
||||
|
||||
@ -3,7 +3,7 @@ $mode-toggle-bg: #262626;
|
||||
|
||||
#app {
|
||||
&.dark-mode {
|
||||
background-color: black;
|
||||
background-color: $dark;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
)
|
||||
},
|
||||
},
|
||||
|
||||
@ -181,6 +181,7 @@
|
||||
},
|
||||
"your_amount": "Dein Betrag"
|
||||
},
|
||||
"PersonalDetails":"Persönliche Angaben",
|
||||
"GDD": "GDD",
|
||||
"gddKonto": "GDD Konto",
|
||||
"gdd_per_link": {
|
||||
|
||||
@ -181,6 +181,7 @@
|
||||
},
|
||||
"your_amount": "Your amount"
|
||||
},
|
||||
"PersonalDetails":"Personal details",
|
||||
"GDD": "GDD",
|
||||
"gddKonto": "GDD Konto",
|
||||
"gdd_per_link": {
|
||||
|
||||
@ -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)
|
||||
},
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user