Add social media links to create events

backend/samfundet/migrations/0006_event_general_link_event_lastfm_link_and_more.py

@@ -0,0 +1,48 @@
+# Generated by Django 5.2.11 on 2026-03-05 17:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('samfundet', '0005_medlemsinfo'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='event',
+            name='general_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='lastfm_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='soundcloud_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='spotify_uri',
+            field=models.CharField(blank=True, max_length=200, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='vimeo_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='youtube_embed',
+            field=models.URLField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='event',
+            name='youtube_link',
+            field=models.URLField(blank=True, null=True),
+        ),
+    ]

backend/samfundet/models/event.py

@@ -169,9 +169,17 @@ def __init__(self, *args: Any, **kwargs: Any) -> None:
     email_contact = models.EmailField(max_length=200, blank=True, null=True)
 
     host_link = models.URLField(max_length=200, blank=True, null=True)
-    instagram_link = models.URLField(max_length=200, blank=True, null=True)
+
+    spotify_uri = models.CharField(max_length=200, blank=True, null=True)
+    youtube_link = models.URLField(max_length=200, blank=True, null=True)
+    youtube_embed = models.URLField(max_length=200, blank=True, null=True)
     facebook_link = models.URLField(max_length=200, blank=True, null=True)
+    soundcloud_link = models.URLField(max_length=200, blank=True, null=True)
+    instagram_link = models.URLField(max_length=200, blank=True, null=True)
     x_link = models.URLField(max_length=200, blank=True, null=True)
+    lastfm_link = models.URLField(max_length=200, blank=True, null=True)
+    vimeo_link = models.URLField(max_length=200, blank=True, null=True)
+    general_link = models.URLField(max_length=200, blank=True, null=True)
 
     # ======================== #
     #       Venue/Entrance     #

frontend/src/Pages/ComponentPage/ComponentPage.tsx

@@ -82,6 +82,16 @@ export function ComponentPage() {
             ...billig,
           }
         : undefined,
+      spotify_uri: '',
+      youtube_link: '',
+      youtube_embed: '',
+      facebook_link: '',
+      soundcloud_link: '',
+      instagram_link: '',
+      x_link: '',
+      lastfm_link: '',
+      vimeo_link: '',
+      general_link: '',
       ...override,
     };
   }

frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.module.scss

@@ -62,6 +62,7 @@
   }
 }
 
+
 .half {
   flex-basis: 50%;
   display: flex;
@@ -87,3 +88,33 @@
   padding-bottom: 3.75em;
   gap: 0.5em;
 }
+
+.socialMediaGrid {
+  display: grid;
+  gap: 2em;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  align-items: start;
+}
+
+.socialMediaItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+
+
+.socialMediaLabel {
+  font-weight: 600;
+}
+
+.socialMediaInput {
+  height: 2.25em;
+}
+
+.gridItemFull {
+  grid-column: 1 / -1;
+}
+
+.gridItemFull .socialGrid {
+  max-width:max-content ;
+}

frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx

@@ -28,6 +28,7 @@ import { EventPreviewCard } from './components/EventPreviewCard';
 import { GraphicsStep } from './steps/GraphicsStep';
 import { InfoStep } from './steps/InfoStep';
 import { PaymentStep } from './steps/PaymentStep';
+import { SocialMediaStep } from './steps/SocialMediaStep';
 import { SummaryStep } from './steps/SummaryStep';
 import { TextStep } from './steps/TextStep';
 
@@ -57,6 +58,19 @@ export function EventCreatorAdminPage() {
     label: t(getAgeRestrictionKey(age)),
   }));
 
+  const SOCIAL_FIELDS = [
+    'spotify_uri',
+    'youtube_link',
+    'youtube_embed',
+    'facebook_link',
+    'soundcloud_link',
+    'instagram_link',
+    'x_link',
+    'lastfm_link',
+    'vimeo_link',
+    'general_link',
+  ] as const;
+
   const { form, watchedValues, buildPayload } = useEventCreatorForm({
     event,
     defaultCategory: eventCategoryOptions[0]?.value ?? EventCategory.ART,
@@ -67,10 +81,13 @@ export function EventCreatorAdminPage() {
     text: <TextStep form={form} />,
     info: <InfoStep form={form} eventCategoryOptions={eventCategoryOptions} locationOptions={locationOptions} />,
     payment: <PaymentStep form={form} ageLimitOptions={ageLimitOptions} />,
+    socialmedia: <SocialMediaStep form={form} />,
     graphics: <GraphicsStep form={form} />,
     summary: <SummaryStep form={form} />,
   };
 
+  const hasSocialMediaErrors = SOCIAL_FIELDS.some((name) => !!form.formState.errors[name]);
+
   // Fetch event data using the event ID
   useEffect(() => {
     if (id) {
@@ -96,7 +113,7 @@ export function EventCreatorAdminPage() {
 
   const formTabs: Tab[] = steps.map((step: EventCreatorStep) => {
     const custom = step.customIcon !== undefined;
-    const valid = step.validate(watchedValues) && !custom;
+    const valid = !custom && (step.key === 'socialmedia' ? !hasSocialMediaErrors : step.validate(watchedValues));
 
     const visited = visitedTabs[step.key] === true && !custom;
     const error = !valid && visited && !custom;
@@ -158,7 +175,9 @@ export function EventCreatorAdminPage() {
   }
 
   // Ready to save?
-  const allStepsComplete = steps.every((step) => step.validate(watchedValues));
+  const allStepsComplete = steps.every((step) =>
+    step.key === 'socialmedia' ? !hasSocialMediaErrors : step.validate(watchedValues),
+  );
 
   // ================================== //
   //          Navigation Logic          //
@@ -185,7 +204,7 @@ export function EventCreatorAdminPage() {
   ) : null;
 
   const onInvalid = (errors: FieldErrors<FormType>) => {
-    toast.error(KEY.event_invalid_form_error);
+    toast.error(t(KEY.event_invalid_form_error));
     const allVisited: Record<string, boolean> = {};
     for (const s of steps) allVisited[s.key] = true;
     setVisitedTabs(allVisited);

frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorSchema.ts

@@ -8,14 +8,24 @@ import {
   EVENT_DESCRIPTION_SHORT,
   EVENT_DURATION,
   EVENT_END_DT,
+  EVENT_FACEBOOK_LINK,
+  EVENT_GENERAL_LINK,
   EVENT_HOST,
+  EVENT_INSTAGRAM_LINK,
+  EVENT_LASTFM_LINK,
   EVENT_LOCATION,
   EVENT_REGISTRATION_URL,
+  EVENT_SOUNDCLOUD_LINK,
+  EVENT_SPOTIFY_URI,
   EVENT_START_DT,
   EVENT_TICKET_TYPE,
   EVENT_TITLE,
+  EVENT_VIMEO_LINK,
   EVENT_VISIBILITY_FROM_DT,
   EVENT_VISIBILITY_TO_DT,
+  EVENT_X_LINK,
+  EVENT_YOUTUBE_EMBED,
+  EVENT_YOUTUBE_LINK,
 } from '~/schema/event';
 import { OPTIONAL_IMAGE } from '~/schema/samfImage';
 
@@ -48,6 +58,17 @@ export const eventSchema = z.object({
   custom_tickets: z.array(event_custom_ticket).optional(),
   registration_url: EVENT_REGISTRATION_URL,
   billig_id: EVENT_BILLIG_ID,
+  // Social media links
+  spotify_uri: EVENT_SPOTIFY_URI.optional(),
+  youtube_link: EVENT_YOUTUBE_LINK.optional(),
+  youtube_embed: EVENT_YOUTUBE_EMBED.optional(),
+  facebook_link: EVENT_FACEBOOK_LINK.optional(),
+  soundcloud_link: EVENT_SOUNDCLOUD_LINK.optional(),
+  instagram_link: EVENT_INSTAGRAM_LINK.optional(),
+  x_link: EVENT_X_LINK.optional(),
+  lastfm_link: EVENT_LASTFM_LINK.optional(),
+  vimeo_link: EVENT_VIMEO_LINK.optional(),
+  general_link: EVENT_GENERAL_LINK.optional(),
   // Graphics
   image: OPTIONAL_IMAGE,
   // Summary/Publication date

frontend/src/PagesAdmin/EventCreatorAdminPage/hooks/useEventCreatorForm.ts

@@ -45,6 +45,16 @@ export function useEventCreatorForm(params: {
       ticket_type: 'free',
       custom_tickets: [],
       billig_id: undefined,
+      spotify_uri: '',
+      youtube_link: '',
+      youtube_embed: '',
+      soundcloud_link: '',
+      instagram_link: '',
+      facebook_link: '',
+      x_link: '',
+      lastfm_link: '',
+      vimeo_link: '',
+      general_link: '',
       image: undefined,
       visibility_from_dt: '',
       visibility_to_dt: '',
@@ -74,6 +84,16 @@ export function useEventCreatorForm(params: {
       ticket_type: event.ticket_type || 'free',
       custom_tickets: event.custom_tickets || [],
       billig_id: event.billig?.id,
+      spotify_uri: event.spotify_uri || '',
+      youtube_link: event.youtube_link || '',
+      youtube_embed: event.youtube_embed || '',
+      facebook_link: event.facebook_link || '',
+      soundcloud_link: event.soundcloud_link || '',
+      instagram_link: event.instagram_link || '',
+      x_link: event.x_link || '',
+      lastfm_link: event.lastfm_link || '',
+      vimeo_link: event.vimeo_link || '',
+      general_link: event.general_link || '',
       image: event.image ?? undefined,
       visibility_from_dt: event.visibility_from_dt ? utcTimestampToLocal(event.visibility_from_dt, false) : '',
       visibility_to_dt: event.visibility_to_dt ? utcTimestampToLocal(event.visibility_to_dt, false) : '',

frontend/src/PagesAdmin/EventCreatorAdminPage/steps/SocialMediaStep.tsx

@@ -0,0 +1,91 @@
+import type { UseFormReturn } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from '~/Components';
+import { FormDescription } from '~/Components/Forms/Form';
+import { KEY } from '~/i18n/constants';
+import styles from '../EventCreatorAdminPage.module.scss';
+import type { EventFormType } from '../EventCreatorSchema';
+import type { FormType } from '../hooks/useEventCreatorForm';
+
+type SocialLinkKey = Extract<
+  keyof EventFormType,
+  | 'spotify_uri'
+  | 'youtube_link'
+  | 'youtube_embed'
+  | 'facebook_link'
+  | 'soundcloud_link'
+  | 'instagram_link'
+  | 'x_link'
+  | 'lastfm_link'
+  | 'vimeo_link'
+  | 'general_link'
+>;
+
+type Props = {
+  form: UseFormReturn<FormType>;
+};
+
+const SOCIAL_KEYS: readonly SocialLinkKey[] = [
+  'spotify_uri',
+  'youtube_link',
+  'youtube_embed',
+  'facebook_link',
+  'soundcloud_link',
+  'instagram_link',
+  'x_link',
+  'lastfm_link',
+  'vimeo_link',
+  'general_link',
+] as const;
+
+export function SocialMediaStep({ form }: Props) {
+  const { t } = useTranslation();
+
+  const SOCIAL_LABELS: Record<SocialLinkKey, string> = {
+    spotify_uri: 'Spotify URI',
+    youtube_link: 'YouTube link',
+    youtube_embed: 'YouTube embed',
+    facebook_link: 'Facebook link',
+    soundcloud_link: 'SoundCloud link',
+    instagram_link: 'Instagram link',
+    x_link: 'X link',
+    lastfm_link: 'Last.fm link',
+    vimeo_link: 'Vimeo link',
+    general_link: t(KEY.event_general_link),
+  };
+
+  const SOCIAL_MEDIA_HELP: Partial<Record<SocialLinkKey, string>> = {
+    spotify_uri: t(KEY.event_spotify_uri_help),
+    youtube_link: t(KEY.event_youtube_link_help),
+    youtube_embed: t(KEY.event_youtube_embed_help),
+  };
+
+  return (
+    <>
+      <div className={styles.socialMediaGrid}>
+        {SOCIAL_KEYS.map((name) => (
+          <FormField
+            key={name}
+            name={name}
+            control={form.control}
+            render={({ field }) => (
+              <FormItem className={styles.socialMediaItem}>
+                <FormLabel className={styles.socialMediaLabel}>{SOCIAL_LABELS[name]}</FormLabel>
+                <FormControl>
+                  <Input
+                    className={styles.socialMediaInput}
+                    type="text"
+                    {...field}
+                    placeholder={name === 'spotify_uri' ? 'spotify:...' : 'https://...'}
+                  />
+                </FormControl>
+                {SOCIAL_MEDIA_HELP[name] ? <FormDescription>{SOCIAL_MEDIA_HELP[name]}</FormDescription> : null}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        ))}
+      </div>
+    </>
+  );
+}

frontend/src/PagesAdmin/EventCreatorAdminPage/steps/stepConfig.ts

@@ -1,6 +1,6 @@
 import type { FormType } from '../hooks/useEventCreatorForm';
 
-export type StepKey = 'text' | 'info' | 'payment' | 'graphics' | 'summary';
+export type StepKey = 'text' | 'info' | 'payment' | 'socialmedia' | 'graphics' | 'summary';
 
 export type EventCreatorStep = {
   key: StepKey;
@@ -48,6 +48,13 @@ export const steps: EventCreatorStep[] = [
     title_en: 'Payment/registration',
     validate: (d) => !!d.age_restriction && !!d.ticket_type,
   },
+  // Social media links
+  {
+    key: 'socialmedia',
+    title_nb: 'Sosiale medier',
+    title_en: 'Social media',
+    validate: () => true,
+  },
   {
     key: 'graphics',
     title_nb: 'Grafikk',