101 lines
3.1 KiB
Vue
101 lines
3.1 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
|
|
import ShadowedBox from '../../../Views/Components/ShadowedBox.vue'
|
|
import { request } from '../../../../resources/js/components/HttpClient.js'
|
|
import {toast} from "vue3-toastify";
|
|
|
|
const props = defineProps({
|
|
username: String,
|
|
})
|
|
|
|
const password = ref('')
|
|
const passwordConfirmation = ref('')
|
|
const saving = ref(false)
|
|
const successMessage = ref('')
|
|
const errorMessage = ref('')
|
|
|
|
const submit = async () => {
|
|
if (!password.value) {
|
|
toast.error('Bitte gib ein neues Passwort ein')
|
|
return;
|
|
}
|
|
|
|
if (password.value !== passwordConfirmation.value) {
|
|
toast.error('Die Wiederholung des Passworts stimmt nicht mit dem Passwort überein')
|
|
return;
|
|
}
|
|
|
|
|
|
saving.value = true
|
|
successMessage.value = ''
|
|
errorMessage.value = ''
|
|
|
|
const result = await request('/api/v1/profile', {
|
|
method: 'POST',
|
|
body: {
|
|
password: password.value,
|
|
password_confirmation: passwordConfirmation.value,
|
|
},
|
|
})
|
|
|
|
saving.value = false
|
|
|
|
if (result?.success) {
|
|
toast.success(result.message)
|
|
password.value = ''
|
|
passwordConfirmation.value = ''
|
|
} else {
|
|
toast.error(result?.message ?? 'Beim Speichern ist ein Fehler aufgetreten.')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout title="Profil">
|
|
<shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
|
|
<h2>Mein Profil</h2>
|
|
<form @submit.prevent="submit">
|
|
<table class="form-table" style="width: 90%; margin: auto;">
|
|
<tr>
|
|
<td style="width: 250px;">Anmeldename:</td>
|
|
<td>
|
|
<span>{{ username }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Neues Passwort:</td>
|
|
<td>
|
|
<input type="password" v-model="password" autocomplete="new-password" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Passwort wiederholen:</td>
|
|
<td>
|
|
<input type="password" v-model="passwordConfirmation" autocomplete="new-password" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="btn-row">
|
|
<button type="submit" class="button" :disabled="saving">
|
|
{{ saving ? 'Wird gespeichert…' : 'Passwort ändern' }}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</shadowed-box>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.feedback {
|
|
padding: 10px 14px;
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
font-weight: 500;
|
|
}
|
|
.feedback.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
|
|
.feedback.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
|
|
</style>
|