add tag line edit modal

frontend-new/src/components/UserHeader.vue

@@ -5,6 +5,11 @@ import UserAvatar from "~/components/UserAvatar.vue";
 import { avatarUrl, forumUserUrl } from "~/composables/useUrlHelper";
 import { useI18n } from "vue-i18n";
 import Card from "~/components/design/Card.vue";
+import TaglineModal from "~/components/modals/TaglineModal.vue";
+import { computed } from "vue";
+import { NamedPermission } from "~/types/enums";
+import { hasPerms } from "~/composables/usePerm";
+import { useAuthStore } from "~/store/auth";
 
 const props = defineProps<{
   user: User;
@@ -12,6 +17,15 @@ const props = defineProps<{
 }>();
 
 const i18n = useI18n();
+const authStore = useAuthStore();
+
+const isCurrentUser = computed(() => {
+  return authStore.user && authStore.user.name === props.user.name;
+});
+
+const canEditCurrentUser = computed(() => {
+  return hasPerms(NamedPermission.EDIT_ALL_USER_SETTINGS) || isCurrentUser || hasPerms(NamedPermission.EDIT_SUBJECT_SETTINGS);
+});
 </script>
 
 <template>
@@ -32,8 +46,8 @@ const i18n = useI18n();
 
         <div>
           <span v-if="user.tagline">{{ user.tagline }}</span>
-          <span v-else-if="canEditCurrentUser">{{ $t("author.addTagline") }}</span>
-          <!-- todo tag line change modal -->
+          <span v-else-if="canEditCurrentUser">{{ i18n.t("author.addTagline") }}</span>
+          <TaglineModal :tagline="user.tagline" :action="`${user.isOrganization ? 'organizations/org' : 'users'}/${user.name}/settings/tagline`" />
           <!-- todo user log modal -->
         </div>
       </div>

frontend-new/src/components/modals/TaglineModal.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import Button from "~/components/design/Button.vue";
+import Modal from "~/components/modals/Modal.vue";
+import { ref } from "vue";
+import { useNotificationStore } from "~/store/notification";
+import InputText from "~/components/ui/InputText.vue";
+import { useInternalApi } from "~/composables/useApi";
+import { handleRequestError } from "~/composables/useErrorHandling";
+import { useContext } from "vite-ssr/vue";
+import { useRouter } from "vue-router";
+
+const props = defineProps<{
+  tagline: string;
+  action: string;
+}>();
+
+const newTagline = ref(props.tagline);
+
+const ctx = useContext();
+const router = useRouter();
+const i18n = useI18n();
+const notification = useNotificationStore();
+
+async function save() {
+  try {
+    await useInternalApi(props.action, true, "post", {
+      content: newTagline.value,
+    });
+    router.go(0);
+  } catch (e) {
+    handleRequestError(e, ctx, i18n);
+  }
+}
+</script>
+
+<template>
+  <Modal :title="i18n.t('author.editTagline')">
+    <template #default="{ on }">
+      <!-- todo count exiting chars -->
+      <InputText v-model.trim="newTagline" :label="i18n.t('author.taglineLabel')" />
+
+      <Button size="medium" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button size="medium" class="mt-2 ml-2" @click="newTagline = tagline">{{ i18n.t("general.reset") }}</Button>
+      <Button size="medium" class="mt-2 ml-2" @click="save">{{ i18n.t("general.change") }}</Button>
+    </template>
+    <template #activator="{ on }">
+      <Button size="small" class="ml-2" v-on="on">
+        <IconMdiPencil />
+      </Button>
+    </template>
+  </Modal>
+</template>