Add team roles and content management updates

frontend/src/components/AppShell.vue

@@ -3,6 +3,7 @@ import { computed, reactive, ref } from 'vue'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 
 import AppShellAccountModals from './AppShellAccountModals.vue'
+import { privacyContentToHtml } from '../lib/privacyContent'
 import { useAuthStore } from '../stores/auth'
 import { useAwardsStore } from '../stores/awards'
 import type { AuthRole } from '../types/awards'
@@ -22,6 +23,7 @@ const accountOpen = ref(false)
 const deleteConfirm = ref(false)
 const privacyOpen = ref(false)
 const accountActionError = ref('')
+const accountActionSuccess = ref('')
 
 defineExpose({ privacyOpen })
 
@@ -36,12 +38,7 @@ const privacyContent = computed(
 const privacyEmail = computed(
   () => awardsStore.overview.siteContent.privacyEmail || awardsStore.adminSiteSettings.privacyEmail,
 )
-const privacyContentBlocks = computed(() =>
-  privacyContent.value
-    .split(/\n{2,}/)
-    .map((block) => block.trim())
-    .filter(Boolean),
-)
+const privacyContentHtml = computed(() => privacyContentToHtml(privacyContent.value))
 
 async function doLogin() {
   try {
@@ -56,6 +53,21 @@ async function doLogout() {
   await router.replace({ name: 'login' })
 }
 
+async function bindTeamTwitch() {
+  accountActionError.value = ''
+  accountActionSuccess.value = ''
+  try {
+    await authStore.startTwitchAuthorization({
+      purpose: 'team-binding',
+      returnUrl: route.fullPath,
+    })
+  } catch (error) {
+    accountActionError.value = error instanceof Error
+      ? error.message
+      : 'Twitch-Login konnte nicht gestartet werden.'
+  }
+}
+
 async function deleteMyData() {
   accountActionError.value = ''
   try {
@@ -74,6 +86,8 @@ async function deleteMyData() {
 function closeAccountModal() {
   accountOpen.value = false
   deleteConfirm.value = false
+  accountActionError.value = ''
+  accountActionSuccess.value = ''
 }
 
 function openPrivacyModal() {
@@ -101,6 +115,7 @@ function isActive(to: string) {
 const linkBase = 'padding:9px 14px;border-radius:9px;font-family:\'Outfit\',sans-serif;font-size:14px;text-decoration:none;display:inline-block;transition:all .15s;'
 const linkActive = linkBase + 'background:rgba(139,108,219,.1);color:#5f44ad;font-weight:600;'
 const linkInactive = linkBase + 'background:transparent;color:#6f6685;font-weight:500;'
+
 </script>
 
 <template>
@@ -175,9 +190,10 @@ const linkInactive = linkBase + 'background:transparent;color:#6f6685;font-weigh
       :privacy-open="privacyOpen"
       :delete-confirm="deleteConfirm"
       :session="authStore.session"
-      :privacy-content-blocks="privacyContentBlocks"
+      :privacy-content-html="privacyContentHtml"
       :privacy-email="privacyEmail"
       :account-action-error="accountActionError"
+      :account-action-success="accountActionSuccess"
       :auth-loading="authStore.loading"
       @close-account="closeAccountModal"
       @close-privacy="closePrivacyModal"
@@ -185,6 +201,7 @@ const linkInactive = linkBase + 'background:transparent;color:#6f6685;font-weigh
       @request-delete="requestAccountDeletion"
       @cancel-delete="cancelAccountDeletion"
       @logout="doLogout"
+      @bind-team-twitch="bindTeamTwitch"
       @confirm-delete="deleteMyData"
     />
     </template>