Added UI for setting OAuth settings
issue https://github.com/TryGhost/Team/issues/614
This commit is contained in:
Thibaut Patel
parent
bea9940a74
commit
135afd8b96
|
|
@ -8,6 +8,7 @@ import {
|
|||
isRequestEntityTooLargeError,
|
||||
isUnsupportedMediaTypeError
|
||||
} from 'ghost-admin/services/ajax';
|
||||
import {computed, set} from '@ember/object';
|
||||
import {isBlank} from '@ember/utils';
|
||||
import {isArray as isEmberArray} from '@ember/array';
|
||||
import {run} from '@ember/runloop';
|
||||
|
|
@ -56,6 +57,8 @@ export default Controller.extend({
|
|||
|
||||
yamlAccept: null,
|
||||
|
||||
isOAuthConfigurationOpen: false,
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
this.importMimeType = IMPORT_MIME_TYPES;
|
||||
|
|
@ -69,6 +72,10 @@ export default Controller.extend({
|
|||
this.yamlAccept = [...this.yamlMimeType, ...Array.from(this.yamlExtension, extension => '.' + extension)];
|
||||
},
|
||||
|
||||
isOAuthEnabled: computed('settings.{oauthClientId,oauthClientSecret}', 'isOAuthConfigurationOpen', function () {
|
||||
return (this.settings.get('oauthClientId') && this.settings.get('oauthClientSecret')) || this.isOAuthConfigurationOpen;
|
||||
}),
|
||||
|
||||
actions: {
|
||||
onUpload(file) {
|
||||
let formData = new FormData();
|
||||
|
|
@ -145,10 +152,25 @@ export default Controller.extend({
|
|||
iframe.attr('src', downloadURL);
|
||||
},
|
||||
|
||||
async saveOAuthSettings() {
|
||||
await this.settings.save();
|
||||
},
|
||||
|
||||
toggleDeleteAllModal() {
|
||||
this.toggleProperty('showDeleteAllModal');
|
||||
},
|
||||
|
||||
async toggleIsOAuthEnabled() {
|
||||
if (this.isOAuthEnabled) {
|
||||
this.settings.set('oauthClientId', '');
|
||||
this.settings.set('oauthClientSecret', '');
|
||||
set(this, 'isOAuthConfigurationOpen', false);
|
||||
await this.settings.save();
|
||||
} else {
|
||||
set(this, 'isOAuthConfigurationOpen', true);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Opens a file selection dialog - Triggered by "Upload x" buttons,
|
||||
* searches for the hidden file input within the .gh-setting element
|
||||
|
|
|
|||
|
|
@ -74,5 +74,10 @@ export default Model.extend(ValidationEngine, {
|
|||
newsletterShowHeader: attr('boolean'),
|
||||
newsletterBodyFontCategory: attr('string'),
|
||||
newsletterShowBadge: attr('boolean'),
|
||||
newsletterFooterContent: attr('string')
|
||||
newsletterFooterContent: attr('string'),
|
||||
/**
|
||||
* OAuth settings
|
||||
*/
|
||||
oauthClientId: attr('string'),
|
||||
oauthClientSecret: attr('string')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export default Service.extend(_ProxyMixin, ValidationEngine, {
|
|||
_loadSettings() {
|
||||
if (!this._loadingPromise) {
|
||||
this._loadingPromise = this.store
|
||||
.queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter'})
|
||||
.queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,oauth'})
|
||||
.then((settings) => {
|
||||
this._loadingPromise = null;
|
||||
return settings;
|
||||
|
|
|
|||
|
|
@ -179,6 +179,64 @@
|
|||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
|
||||
{{#if (enable-developer-experiments)}}
|
||||
<section class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable Google OAuth authentication</h4>
|
||||
<p class="gh-expandable-description">
|
||||
Allow your staff users to sign in to Ghost with Google Single Sign-On
|
||||
</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="settings-oauth">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={{this.isOAuthEnabled}}
|
||||
id="settings-oauth"
|
||||
onclick={{action "toggleIsOAuthEnabled" value="target.checked"}}
|
||||
data-test-private-checkbox
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#if this.isOAuthEnabled}}
|
||||
<div class="gh-setting-content-extended pt4 pb4">
|
||||
<span>
|
||||
To get started, you first have to set up Ghost to allow login and registration with Google OAuth2. Read our
|
||||
{{!-- TODO: create an help desk article and update the url here --}}
|
||||
<a href="#" target="_blank" rel="noopener">setup guide here</a>
|
||||
</span>
|
||||
<div><a href="https://console.developers.google.com/" target="_blank">Configure Ghost in Google</a></div>
|
||||
<GhFormGroup @class="no-margin pt2" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="password">
|
||||
<label for="aouth-client-id">Google OAuth client id</label>
|
||||
<GhTextInput
|
||||
id="oauth-client-id"
|
||||
@value={{readonly this.settings.oauthClientId}}
|
||||
@name="oauth-client-id"
|
||||
@focus-out={{action "saveOAuthSettings"}}
|
||||
@input={{action (mut this.settings.oauthClientId) value="target.value"}}
|
||||
/>
|
||||
|
||||
<label for="oauth-client-secret">Google OAuth client secret</label>
|
||||
<GhTextInput
|
||||
id="oauth-client-secret"
|
||||
@value={{readonly this.settings.oauthClientSecret}}
|
||||
@name="oauth-client-secret"
|
||||
@focus-out={{action "saveOAuthSettings"}}
|
||||
@input={{action (mut this.settings.oauthClientSecret) value="target.value"}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue