77 lines
2.1 KiB
Vue
77 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { useAuthStore } from '~/stores/auth';
|
|
import { ref } from 'vue';
|
|
|
|
definePageMeta({ title: 'Member Profile' });
|
|
|
|
const authStore = useAuthStore();
|
|
const newName = ref<string | undefined>();
|
|
|
|
const editName = async () => {
|
|
if (newName.value) {
|
|
try {
|
|
await authStore.updateName(newName.value);
|
|
newName.value = undefined;
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
} else {
|
|
newName.value = authStore.currentUser?.name || '';
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<q-page padding class="row">
|
|
<q-list class="col-sm-4 col-12">
|
|
<q-separator />
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-avatar icon="person" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label caption>Name</q-item-label>
|
|
<q-input
|
|
filled
|
|
v-model="newName"
|
|
@keydown.enter.prevent="editName"
|
|
v-if="newName !== undefined" />
|
|
<div v-else>{{ authStore.currentUser?.name }}</div>
|
|
</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-btn
|
|
square
|
|
@click="editName"
|
|
:icon="newName !== undefined ? 'check' : 'edit'" />
|
|
<q-btn
|
|
v-if="newName !== undefined"
|
|
square
|
|
color="negative"
|
|
@click="newName = undefined"
|
|
icon="cancel" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-avatar icon="email" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label caption>E-mail</q-item-label>
|
|
{{ authStore.currentUser?.email }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label overline>Certifications</q-item-label>
|
|
<div>
|
|
<q-chip square icon="verified" color="green" text-color="white">J/27</q-chip>
|
|
<q-chip square icon="verified" color="blue" text-color="white">Capri25</q-chip>
|
|
<q-chip square icon="verified" color="grey-9" text-color="white">Night</q-chip>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-page>
|
|
</template>
|