Ghost/ghost/admin/app/components/gh-facebook-url-input.js
Kevin Ansfield c77c150745 Refactored facebook/twitter URL inputs
refs https://github.com/TryGhost/Ghost/issues/14101

Twitter/facebook URL validation doesn't follow our typical validation and was duplicated across multiple screens making the controllers unnecessarily complex.

- extracted url input fields and their validation into separate components
- uses tracked scratch values so that the input field values can reset to the saved value on save
  - twitter/facebook URL inputs are different to our other inputs because invalid values won't prevent saving, instead they are reset to their previous value on save
- added `this.validate()` call after a successful save in `settings` service so the service and underlying model validations are both in sync (fixes validation error sticking around after saving with invalid twitter/facebook values that have been reset)
2022-10-04 17:55:24 +01:00

69 lines
2.1 KiB
JavaScript

import Component from '@glimmer/component';
import validator from 'validator';
import {action} from '@ember/object';
import {get, set} from '@ember/object';
export default class GhFacebookUrlInput extends Component {
// NOTE: `get` and `set` are required when reading/writing model properties
// because we can be dealing with proxy objects such as the settings service
get value() {
const {model, modelProperty, scratchValue} = this.args;
return scratchValue || get(model, modelProperty);
}
@action
setScratchValue(event) {
this.args.setScratchValue?.(event.target.value);
}
@action
setFacebookUrl(event) {
const {model, modelProperty} = this.args;
let newUrl = event.target.value;
// reset errors and validation
model.errors.remove('facebook');
model.hasValidated.removeObject('facebook');
if (!newUrl) {
// Clear out the Facebook url
set(model, modelProperty, null);
this.args.setScratchValue?.(null);
return;
}
try {
// strip any facebook URLs out
newUrl = newUrl.replace(/(https?:\/\/)?(www\.)?facebook\.com/i, '');
// don't allow any non-facebook urls
if (newUrl.match(/^(http|\/\/)/i)) {
throw 'invalid url';
}
// strip leading / if we have one then concat to full facebook URL
newUrl = newUrl.replace(/^\//, '');
newUrl = `https://www.facebook.com/${newUrl}`;
// don't allow URL if it's not valid
if (!validator.isURL(newUrl)) {
throw 'invalid url';
}
set(model, modelProperty, newUrl);
this.args.setScratchValue?.(null);
} catch (e) {
if (e === 'invalid url') {
const message = 'The URL must be in a format like https://www.facebook.com/yourPage';
model.errors.add('facebook', message);
return;
}
throw e;
} finally {
model.hasValidated.pushObject('facebook');
}
}
}