yourpart3/frontend/src/views/settings/AccountView.vue

<template>
    <div>
        <h2>{{ $t("settings.account.title") }}</h2>
        <div>
            <label><span>{{ $t("settings.account.username") }} </span><input type="text" v-model="username"
                    :placeholder="$t('settings.account.username')" /></label>
        </div>
        <div>
            <label><span>{{ $t("settings.account.email") }} </span><input type="text" v-model="email"
                    :placeholder="$t('settings.account.email')" /></label>
        </div>
        <div>
            <label><span>{{ $t("settings.account.newpassword") }} </span><input type="password" v-model="newpassword"
                    :placeholder="$t('settings.account.newpassword')" autocomplete="new-password" /></label>
        </div>
        <div>
            <label><span>{{ $t("settings.account.newpasswordretype") }} </span><input type="password"
                    v-model="newpasswordretype" :placeholder="$t('settings.account.newpasswordretype')" autocomplete="new-password" /></label>
        </div>
        <div>
            <label><span>{{ $t("settings.account.oldpassword") }} </span><input type="password"
                    v-model="oldpassword" :placeholder="$t('settings.account.oldpassword')" autocomplete="current-password" /></label>
        </div>
        <div>
            <button @click="changeAccount">{{ $t("settings.account.changeaction") }}</button>
        </div>
        <div>
            <label><input type="checkbox" v-model="showInSearch" /> {{ $t("settings.account.showinsearch") }}</label>
        </div>
    </div>
</template>

<script>
import apiClient from '@/utils/axios.js';
import { mapGetters } from 'vuex';

export default {
    name: "AccountSettingsView",
    components: {},
    computed: {
        ...mapGetters(['user']),
    },
    data() {
        return {
            username: "",
            email: "",
            newpassword: "",
            newpasswordretype: "",
            showInSearch: false,
            oldpassword: "",
        };
    },
    methods: {
        async changeAccount() {
            try {
                // Prüfe ob ein neues Passwort eingegeben wurde
                const hasNewPassword = this.newpassword && this.newpassword.trim() !== '';
                
                if (hasNewPassword) {
                    // Validiere Passwort-Wiederholung nur wenn ein neues Passwort eingegeben wurde
                    if (this.newpassword !== this.newpasswordretype) {
                        alert('Die Passwörter stimmen nicht überein.');
                        return;
                    }
                    
                    // Prüfe ob das alte Passwort eingegeben wurde
                    if (!this.oldpassword || this.oldpassword.trim() === '') {
                        alert('Bitte geben Sie Ihr aktuelles Passwort ein, um das Passwort zu ändern.');
                        return;
                    }
                }

                // Bereite die Daten für den API-Aufruf vor
                const accountData = {
                    userId: this.user.id,
                    settings: {
                        username: this.username,
                        email: this.email,
                        showinsearch: this.showInSearch
                    }
                };

                // Füge Passwort-Daten nur hinzu, wenn ein neues Passwort eingegeben wurde
                if (hasNewPassword) {
                    accountData.settings.newpassword = this.newpassword;
                    accountData.settings.oldpassword = this.oldpassword;
                }

                // API-Aufruf zum Speichern der Account-Einstellungen
                await apiClient.post('/api/settings/set-account', accountData);
                
                alert('Account-Einstellungen erfolgreich gespeichert!');
                
                // Leere die Passwort-Felder nach erfolgreichem Speichern
                this.newpassword = '';
                this.newpasswordretype = '';
                this.oldpassword = '';
                
            } catch (error) {
                console.error('Fehler beim Speichern der Account-Einstellungen:', error);
                if (error.response && error.response.data && error.response.data.error) {
                    alert('Fehler: ' + error.response.data.error);
                } else {
                    alert('Ein Fehler ist aufgetreten beim Speichern der Account-Einstellungen.');
                }
            }
        }
    },
    async mounted() {
        const response = await apiClient.post('/api/settings/account', { userId: this.user.id });
        console.log(response.data);
        this.username = response.data.username;
        this.showInSearch = response.data.showinsearch;
        this.email = response.data.email;
        
        // Stelle sicher, dass Passwort-Felder leer sind
        this.newpassword = '';
        this.newpasswordretype = '';
        this.oldpassword = '';
        
        console.log(this.showInSearch);
    },
};
</script>

<style lang="scss" scoped>
label {
    white-space: nowrap;
}
label > span {
    width: 15em;
    display: inline-block;
}
</style>