fix: Replace link-input with link-field and social-link-field

app/components/widgets/forms/link-field.hbs

@@ -1,4 +1,4 @@
-<div class="six wide field">
+<div class="field">
   <div class="ui labeled action input">
     <div class="ui labeled input">
       <div class="ui label">

app/components/widgets/forms/social-link-field.hbs

@@ -1,6 +1,7 @@
-<div class="fields">
-  <div class="three wide field">
-    <div class="ui labeled input">
+<div class="{{unless @fixed 'fields'}}">
+  {{#unless @fixed}}
+    <div class="three wide field">
+      <div class="ui labeled input">
         {{#if @custom}}
           <Input @type="text" value={{@site}} {{on 'input' (action @onSiteChange value="target.value")}} />
         {{else}}
@@ -14,12 +15,14 @@
             </div>
           </UiDropdown>
         {{/if}}
+      </div>
     </div>
-  </div>
+  {{/unless}}
   <Widgets::Forms::LinkField
     @prefix={{this.prefix}}
     @value={{@value}}
-    @onChange={{@onChange}}>
+    @onChange={{@onChange}}
+    @inputId={{@inputId}}>
       {{yield}}
-    </Widgets::Forms::LinkField>
+  </Widgets::Forms::LinkField>
 </div>

app/controllers/events/list.js

@@ -6,7 +6,7 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
   sort_by = 'starts-at';
 
   sort_dir = 'DSC';
-  
+
   get columns() {
     return [
       {

app/models/custom-form.js

@@ -118,10 +118,6 @@ export default ModelBase.extend({
     && (['website', 'twitter', 'github', 'facebook', 'linkedin', 'slidesUrl', 'instagram', 'videoUrl', 'audioUrl'].includes(this.fieldIdentifier));
   }),
 
-  segmentedLinkName: computed('fieldIdentifier', function() {
-    return `segmentedLink${this.fieldIdentifier.charAt(0).toUpperCase()  + this.fieldIdentifier.slice(1)}`;
-  }),
-
   isRequiredObserver: observer('isRequired', function() {
     if (!this.isIncluded && this.isRequired) {
       this.set('isIncluded', true);

app/models/event.js

@@ -4,10 +4,7 @@ import moment from 'moment';
 import attr from 'ember-data/attr';
 import ModelBase from 'open-event-frontend/models/base';
 import { hasMany, belongsTo } from 'ember-data/relationships';
-import {
-  computedDateTimeSplit,
-  computedSegmentedLink
-} from 'open-event-frontend/utils/computed-helpers';
+import { computedDateTimeSplit } from 'open-event-frontend/utils/computed-helpers';
 import CustomPrimaryKeyMixin from 'open-event-frontend/mixins/custom-primary-key';
 import { groupBy } from 'lodash-es';
 
@@ -158,10 +155,6 @@ export default class Event extends ModelBase.extend(CustomPrimaryKeyMixin, {
   endsAtDate   : computedDateTimeSplit.bind(this)('endsAt', 'date'),
   endsAtTime   : computedDateTimeSplit.bind(this)('endsAt', 'time'),
 
-  segmentedExternalEventUrl : computedSegmentedLink.bind(this)('externalEventUrl'),
-  segmentedLiveStreamUrl    : computedSegmentedLink.bind(this)('liveStreamUrl'),
-  segmentedWebinarUrl       : computedSegmentedLink.bind(this)('webinarUrl'),
-
   shortLocationName: computed('locationName', function() {
     if (!this.locationName) {
       return '';

app/models/session.js

@@ -2,7 +2,7 @@ import attr from 'ember-data/attr';
 import moment from 'moment';
 import ModelBase from 'open-event-frontend/models/base';
 import { belongsTo, hasMany } from 'ember-data/relationships';
-import { computedDateTimeSplit, computedSegmentedLink } from 'open-event-frontend/utils/computed-helpers';
+import { computedDateTimeSplit } from 'open-event-frontend/utils/computed-helpers';
 import { computed } from '@ember/object';
 import { stateColorMap } from 'open-event-frontend/utils/dictionary/sessions';
 
@@ -59,11 +59,6 @@ export default class Session extends ModelBase.extend({
   endsAtDate  : computedDateTimeSplit.bind(this)('endsAt', 'date'),
   endsAtTime  : computedDateTimeSplit.bind(this)('endsAt', 'time'),
 
-  segmentedLinkSlidesUrl : computedSegmentedLink.bind(this)('slidesUrl'),
-  segmentedLinkAudioUrl  : computedSegmentedLink.bind(this)('audioUrl'),
-  segmentedLinkVideoUrl  : computedSegmentedLink.bind(this)('videoUrl'),
-  segmentedLinkSignUpUrl : computedSegmentedLink.bind(this)('signUpUrl'),
-
   ready() {
     if (!this.complexFieldValues) {
       this.complexFieldValues = {};

app/models/setting.js

@@ -1,6 +1,5 @@
 import attr from 'ember-data/attr';
 import ModelBase from 'open-event-frontend/models/base';
-import { computedSegmentedLink } from 'open-event-frontend/utils/computed-helpers';
 
 export default ModelBase.extend({
 
@@ -101,22 +100,6 @@ export default ModelBase.extend({
   adminBillingPaypalEmail    : attr('string'),
   isGoogleRecaptchaEnabled   : attr('boolean', { defaultValue: false }),
   googleRecaptchaSite        : attr('string'),
-  googleRecaptchaSecret      : attr('string'),
+  googleRecaptchaSecret      : attr('string')
 
-  /**
-   * Computed properties
-   */
-
-  segmentedSupportUrl    : computedSegmentedLink.bind(this)('supportUrl'),
-  segmentedFacebookUrl   : computedSegmentedLink.bind(this)('facebookUrl'),
-  segmentedInstagramUrl  : computedSegmentedLink.bind(this)('instagramUrl'),
-  segmentedPatreonUrl    : computedSegmentedLink.bind(this)('patreonUrl'),
-  segmentedTwitterUrl    : computedSegmentedLink.bind(this)('twitterUrl'),
-  segmentedGoogleUrl     : computedSegmentedLink.bind(this)('googleUrl'),
-  segmentedYoutubeUrl    : computedSegmentedLink.bind(this)('youtubeUrl'),
-  segmentedGithubUrl     : computedSegmentedLink.bind(this)('githubUrl'),
-  segmentedAndroidAppUrl : computedSegmentedLink.bind(this)('androidAppUrl'),
-  segmentedWebAppUrl     : computedSegmentedLink.bind(this)('webAppUrl'),
-  segmentedFrontendUrl   : computedSegmentedLink.bind(this)('frontendUrl'),
-  segmentedStaticDomain  : computedSegmentedLink.bind(this)('staticDomain')
 });

app/models/social-link.js

@@ -3,7 +3,6 @@ import { computed } from '@ember/object';
 import attr from 'ember-data/attr';
 import ModelBase from 'open-event-frontend/models/base';
 import { belongsTo } from 'ember-data/relationships';
-import { computedSegmentedLink } from 'open-event-frontend/utils/computed-helpers';
 import { socialMediaIdentifiers, socialMediaMap } from 'open-event-frontend/utils/dictionary/social-media';
 
 export default ModelBase.extend({
@@ -42,7 +41,6 @@ export default ModelBase.extend({
 
   displayName: computed('normalizedName', function() {
     return socialMediaMap[this.normalizedName]?.name ?? this.name;
-  }),
+  })
 
-  segmentedLink: computedSegmentedLink.bind(this)('link')
 });

app/models/speaker.js

@@ -1,7 +1,6 @@
 import attr from 'ember-data/attr';
 import ModelBase from 'open-event-frontend/models/base';
 import { belongsTo, hasMany } from 'ember-data/relationships';
-import { computedSegmentedLink } from 'open-event-frontend/utils/computed-helpers';
 
 export default class Speaker extends ModelBase.extend({
 
@@ -36,13 +35,6 @@ export default class Speaker extends ModelBase.extend({
   heardFrom          : attr('string'),
   complexFieldValues : attr(),
 
-  segmentedLinkWebsite   : computedSegmentedLink.bind(this)('website'),
-  segmentedLinkTwitter   : computedSegmentedLink.bind(this)('twitter'),
-  segmentedLinkGithub    : computedSegmentedLink.bind(this)('github'),
-  segmentedLinkFacebook  : computedSegmentedLink.bind(this)('facebook'),
-  segmentedLinkLinkedin  : computedSegmentedLink.bind(this)('linkedin'),
-  segmentedLinkInstagram : computedSegmentedLink.bind(this)('instagram'),
-
   /**
    * Relationships
    */

app/models/sponsor.js

@@ -1,7 +1,6 @@
 import attr from 'ember-data/attr';
 import ModelBase from 'open-event-frontend/models/base';
 import { belongsTo } from 'ember-data/relationships';
-import { computedSegmentedLink } from 'open-event-frontend/utils/computed-helpers';
 
 export default ModelBase.extend({
   name        : attr('string'),
@@ -11,7 +10,6 @@ export default ModelBase.extend({
   description : attr('string'),
   logoUrl     : attr('string'),
 
-  event: belongsTo('event'),
+  event: belongsTo('event')
 
-  segmentedLink: computedSegmentedLink.bind(this)('url')
 });

app/templates/components/forms/admin/content/social-links-form.hbs

@@ -1,65 +1,73 @@
 <form class="ui form {{if this.isLoading 'loading'}}" {{action 'submit' on='submit'}} novalidate>
   <div class="field">
     <label>{{t 'Blog'}}</label>
-    <Widgets::Forms::LinkInput
-      @segmentedLink={{this.socials.segmentedSupportUrl}}
-      @inputId="support" />
+    <Widgets::Forms::LinkField
+      @inputId='support'
+      @value={{this.socials.supportUrl}}
+      @onChange={{action (mut this.socials.supportUrl)}} />
   </div>
   <div class="field">
     <label>{{t 'Twitter'}}</label>
-    <Widgets::Forms::LinkInput
-      @segmentedLink={{this.socials.segmentedTwitterUrl}}
-      @linkName="twitter"
-      @isSocialLink={{true}}
-      @inputId="twitter" />
+    <Widgets::Forms::SocialLinkField
+      @fixed={{true}}
+      @inputId='twitter'
+      @site='twitter'
+      @value={{this.socials.twitterUrl}}
+      @onChange={{action (mut this.socials.twitterUrl)}} />
   </div>
   <div class="field">
     <label>{{t 'Facebook'}}</label>
-    <Widgets::Forms::LinkInput
-      @segmentedLink={{this.socials.segmentedFacebookUrl}}
-      @linkName="facebook"
-      @isSocialLink={{true}}
-      @inputId="facebook" />
+    <Widgets::Forms::SocialLinkField
+      @fixed={{true}}
+      @inputId='facebook'
+      @site='facebook'
+      @value={{this.socials.facebookUrl}}
+      @onChange={{action (mut this.socials.facebookUrl)}} />
   </div>
   <div class="field">
     <label>{{t 'Instagram'}}</label>
-    <Widgets::Forms::LinkInput
-      @segmentedLink={{this.socials.segmentedInstagramUrl}}
-      @linkName="instagram"
-      @isSocialLink={{true}}
-      @inputId="instagram" />
+    <Widgets::Forms::SocialLinkField
+      @fixed={{true}}
+      @inputId='instagram'
+      @site='instagram'
+      @value={{this.socials.instagramUrl}}
+      @onChange={{action (mut this.socials.instagramUrl)}} />
   </div>
   <div class="field">
     <label>{{t 'Google Group'}}</label>
-    <Widgets::Forms::LinkInput
-      @segmentedLink={{this.socials.segmentedGoogleUrl}}
-      @linkName="groups.google"
-      @isSocialLink={{true}}
-      @inputId="google_group" />
+    <Widgets::Forms::SocialLinkField
+      @fixed={{true}}
+      @inputId='google_group'
+      @site='groups.google'
+      @value={{this.socials.googleUrl}}
+      @onChange={{action (mut this.socials.googleUrl)}} />
   </div>
   <div class="field">
     <label>{{t 'YouTube'}}</label>
-    <Widgets::Forms::LinkInput
-      @segmentedLink={{this.socials.segmentedYoutubeUrl}}
-      @linkName="youtube"
-      @isSocialLink={{true}}
-      @inputId="youtube" />
+    <Widgets::Forms::SocialLinkField
+      @fixed={{true}}
+      @inputId='youtube'
+      @site='youtube'
+      @value={{this.socials.youtubeUrl}}
+      @onChange={{action (mut this.socials.youtubeUrl)}} />
   </div>
   <div class="field">
     <label>{{t 'GitHub'}}</label>
-    <Widgets::Forms::LinkInput
-      @segmentedLink={{this.socials.segmentedGithubUrl}}
-      @linkName="github"
-      @isSocialLink={{true}}
-      @inputId="github" />
+    <Widgets::Forms::SocialLinkField
+      @fixed={{true}}
+      @inputId='github'
+      @site='github'
+      @value={{this.socials.githubUrl}}
+      @onChange={{action (mut this.socials.githubUrl)}} />
   </div>
   <div class="field">
     <label>{{t 'Patreon'}}</label>
-    <Widgets::Forms::LinkInput
-      @segmentedLink={{this.socials.segmentedPatreonUrl}}
-      @linkName="patreon"
-      @isSocialLink={{true}}
-      @inputId="patreon" />
+    <Widgets::Forms::SocialLinkField
+      @fixed={{true}}
+      @inputId='patreon'
+      @site='patreon'
+      @value={{this.socials.patreonUrl}}
+      @onChange={{action (mut this.socials.patreonUrl)}} />
   </div>
   <div class="field">
     <label>{{t 'Gitter'}}</label>