feat: enable license support for images

refs #185

src/components/images/ImageEditor.vue

@@ -16,8 +16,37 @@
       />
     </FormGroup>
 
-    <FormGroup v-slot="controlAttributes" :label="t('image.credits')">
-      <input v-model="image.credits" class="form-control" v-bind="controlAttributes" />
+    <FormGroup v-slot="controlAttributes" :label="t('image.license')">
+      <select v-model="image.licenseId" class="form-control" required v-bind="controlAttributes">
+        <option v-for="license in licenses" :key="license.id" :value="license.id">
+          {{ license.name }}
+        </option>
+      </select>
+    </FormGroup>
+
+    <FormGroup v-slot="controlAttributes" :label="t('image.credits')" :errors="[needsAuthorError]">
+      <input
+        v-model="image.credits"
+        class="form-control"
+        :required="selectedLicense?.needsAuthor"
+        v-bind="controlAttributes"
+      />
+    </FormGroup>
+
+    <FormGroup
+      v-slot="controlAttributes"
+      :errors="[isUseExplicitlyGrantedByAuthorError]"
+      custom-control
+    >
+      <label class="tw-flex tw-gap-2 tw-items-center tw-mb-0">
+        <input
+          v-model="image.isUseExplicitlyGrantedByAuthor"
+          type="checkbox"
+          :required="selectedLicense?.requiresExpressPermissionForPublication"
+          v-bind="controlAttributes"
+        />
+        {{ t('image.isUseExplicitlyGrantedByAuthor') }}
+      </label>
     </FormGroup>
   </fieldset>
 </template>
@@ -29,6 +58,7 @@ import { useI18n } from '@/i18n'
 import { Image, NewImage } from '@/stores/images'
 import { useUpdatableState } from '@/util'
 import ImagePreview from './ImagePreview.vue'
+import { useLicenseStore, useLicenseValidator, useSelectedLicense } from '@/stores/licenses'
 import FormGroup from '@/components/generic/FormGroup.vue'
 
 defineOptions({
@@ -38,11 +68,17 @@ defineOptions({
 const modelValue = defineModel<Image | NewImage>({ required: true })
 const attrs = useAttrs()
 const { t } = useI18n()
+const { items: licenses } = useLicenseStore()
 const image = useUpdatableState<Image | NewImage>(
   modelValue,
   (image) => (modelValue.value = image),
   (image) => ({ ...image }),
 )
+const selectedLicense = useSelectedLicense(() => image.value.licenseId)
+const { needsAuthorError, isUseExplicitlyGrantedByAuthorError } = useLicenseValidator(
+  selectedLicense,
+  image,
+)
 
 const { textarea: descriptionEl } = useTextareaAutosize({ watch: () => image.value.altText })
 </script>

src/i18n/de.js

@@ -370,7 +370,9 @@ export default {
 
   image: {
     altText: 'Alternativtext (für Screenreader)',
-    credits: 'Bildnachweis',
+    license: 'Lizenz',
+    credits: 'Bildnachweis / Urheber:in',
+    isUseExplicitlyGrantedByAuthor: 'Autor:in erlaubt Veröffentlichung',
   },
 
   license: {

src/i18n/en.js

@@ -362,7 +362,9 @@ export default {
 
   image: {
     altText: 'Alternative Text (for screen readers)',
-    credits: 'Credits',
+    license: 'License',
+    credits: 'Credits / Author',
+    isUseExplicitlyGrantedByAuthor: 'Use was explicitly granted by author',
   },
 
   license: {

src/stores/images.ts

@@ -17,6 +17,8 @@ export type Image = {
   id: number
   altText: string
   credits: string
+  licenseId: number | null
+  isUseExplicitlyGrantedByAuthor: boolean
   image: string
   file?: File
   ppoi: string