Add team roles and content management updates

2026-06-25 19:52:46 +02:00
parent 54293f4c45
commit 693769e5a8
126 changed files with 6966 additions and 738 deletions
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { Eye, EyeOff } from '@lucide/vue'
+import { computed, ref, useAttrs } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  inputClass?: string
+  rootClass?: string
+  variant?: 'default' | 'login'
+}>(), {
+  inputClass: '',
+  rootClass: '',
+  variant: 'default',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const attrs = useAttrs()
+const visible = ref(false)
+
+const inputType = computed(() => visible.value ? 'text' : 'password')
+const toggleLabel = computed(() => visible.value ? 'Passwort ausblenden' : 'Passwort anzeigen')
+const ToggleIcon = computed(() => visible.value ? EyeOff : Eye)
+
+const disabled = computed(() =>
+  attrs.disabled === true || attrs.disabled === '' || attrs.disabled === 'true',
+)
+
+function updateValue(event: Event) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+
+function toggleVisibility() {
+  visible.value = !visible.value
+}
+</script>
+
+<template>
+  <div class="password-field" :class="[`password-field--${variant}`, rootClass]">
+    <input
+      v-bind="attrs"
+      :value="modelValue"
+      :type="inputType"
+      :class="['password-field__input', inputClass]"
+      @input="updateValue"
+    >
+    <button
+      type="button"
+      class="password-field__toggle"
+      :aria-label="toggleLabel"
+      :aria-pressed="visible"
+      :disabled="disabled"
+      @click="toggleVisibility"
+      @mousedown.prevent
+    >
+      <component :is="ToggleIcon" class="password-field__icon" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.password-field {
+  position: relative;
+  width: 100%;
+}
+
+.password-field__input {
+  width: 100%;
+  padding-right: 3rem !important;
+}
+
+.password-field__toggle {
+  position: absolute;
+  top: 50%;
+  right: 0.62rem;
+  display: inline-grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #7c3aed;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  transform: translateY(-50%);
+}
+
+.password-field__toggle:hover:not(:disabled),
+.password-field__toggle:focus-visible {
+  background: rgba(124, 58, 237, 0.1);
+  color: #5b21b6;
+  outline: none;
+}
+
+.password-field__toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.password-field__icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.password-field--login .password-field__input {
+  box-sizing: border-box;
+  border: 1.5px solid #ded4ff;
+  border-radius: 22px;
+  padding: 17px 54px 17px 18px !important;
+  background: rgba(255, 255, 255, 0.82);
+  color: #3f3556;
+  font: 700 17px 'Outfit', sans-serif;
+  outline: none;
+  box-shadow: 0 12px 32px rgba(139, 108, 219, 0.06);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.password-field--login .password-field__input:focus {
+  border-color: #8b6cdb;
+  box-shadow: 0 0 0 5px rgba(139, 108, 219, 0.14);
+  transform: translateY(-1px);
+}
+
+.password-field--login .password-field__toggle {
+  right: 0.8rem;
+  color: #7355c8;
+}
+</style>