discourse/app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs
Bianca Nenciu e029a9b36c
FEATURE: Allow private themes to be partially installed (#17644)
A public key must be added to GitHub when installing private themes.
When the process happens asynchronously (for example if the admin does
not have admin permissions to the GitHub repository), installing
private themes becomes very difficult.

In this case, the Discourse admin can partially install the theme by
letting Discourse save the private key, create a placeholder theme and
give the admin a public key to be used as a deploy key. After the key
is installed, the admin can finish theme installation by pressing a
button on the theme page.
2022-08-10 13:30:18 +03:00

327 lines
14 KiB
Handlebars

<div class="show-current-style">
<PluginOutlet @name="admin-customize-themes-show-top" @tagName="span" @connectorTagName="div" @args={{hash theme=this.model}} />
<div class="title">
{{#if this.editingName}}
<TextField @value={{this.model.name}} @autofocus="true" />
<DButton @action={{action "finishedEditingName"}} @class="btn-primary btn-small submit-edit" @icon="check" />
<DButton @action={{action "cancelEditingName"}} @class="btn-small cancel-edit" @icon="times" />
{{else}}
<span>{{this.model.name}}</span>
<DButton @action={{action "startEditingName"}} @icon="pencil-alt" @class="btn-small" />
{{/if}}
</div>
{{#each this.model.errors as |error|}}
<div class="alert alert-error">{{error}}</div>
{{/each}}
{{#if this.finishInstall}}
<div class="control-unit">
{{#if this.sourceIsHttp}}
<a class="remote-url" href={{this.remoteThemeLink}}>{{i18n "admin.customize.theme.source_url"}}{{d-icon "link"}}</a>
{{else}}
<div class="remote-url">
<code>{{this.model.remote_theme.remote_url}}</code>
{{#if this.model.remote_theme.branch}}
(<code>{{this.model.remote_theme.branch}}</code>)
{{/if}}
</div>
{{/if}}
{{#if this.showRemoteError}}
<div class="error-message">
{{d-icon "exclamation-triangle"}} {{i18n "admin.customize.theme.repo_unreachable"}}
</div>
<div class="raw-error">
<code>{{this.model.remoteError}}</code>
</div>
{{/if}}
<DButton @action={{action "updateToLatest"}} @icon="download" @class="btn-primary finish-install" @label="admin.customize.theme.finish_install" />
<DButton @action={{action "destroy"}} @label="admin.customize.delete" @icon="trash-alt" @class="btn-danger" />
<span class="status-message">
{{i18n "admin.customize.theme.last_attempt"}} {{format-date this.model.remote_theme.updated_at leaveAgo="true"}}
</span>
</div>
{{else}}
{{#unless this.model.supported}}
<div class="alert alert-error">
{{i18n "admin.customize.theme.required_version.error"}}
{{#if this.model.remote_theme.minimum_discourse_version}}
{{i18n "admin.customize.theme.required_version.minimum" version=this.model.remote_theme.minimum_discourse_version}}
{{/if}}
{{#if this.model.remote_theme.maximum_discourse_version}}
{{i18n "admin.customize.theme.required_version.maximum" version=this.model.remote_theme.maximum_discourse_version}}
{{/if}}
</div>
{{/unless}}
{{#unless this.model.enabled}}
<div class="alert alert-error">
{{#if this.model.disabled_by}}
{{i18n "admin.customize.theme.disabled_by"}}
<UserLink @user={{this.model.disabled_by}}>
{{avatar this.model.disabled_by imageSize="tiny"}}
{{this.model.disabled_by.username}}
</UserLink>
{{format-date this.model.disabled_at leaveAgo="true"}}
{{else}}
{{i18n "admin.customize.theme.disabled"}}
{{/if}}
<DButton @class="btn-default" @action={{action "enableComponent"}} @icon="check" @label="admin.customize.theme.enable" />
</div>
{{/unless}}
<div class="metadata control-unit">
{{#if this.model.remote_theme}}
{{#if this.model.remote_theme.remote_url}}
{{#if this.sourceIsHttp}}
<a class="remote-url" href={{this.remoteThemeLink}}>{{i18n "admin.customize.theme.source_url"}}{{d-icon "link"}}</a>
{{else}}
<div class="remote-url">
<code>{{this.model.remote_theme.remote_url}}</code>
{{#if this.model.remote_theme.branch}}
(<code>{{this.model.remote_theme.branch}}</code>)
{{/if}}
</div>
{{/if}}
{{/if}}
{{#if this.model.remote_theme.about_url}}
<a class="url about-url" href={{this.model.remote_theme.about_url}}>{{i18n "admin.customize.theme.about_theme"}}{{d-icon "link"}}</a>
{{/if}}
{{#if this.model.remote_theme.license_url}}
<a class="url license-url" href={{this.model.remote_theme.license_url}}>{{i18n "admin.customize.theme.license"}}{{d-icon "link"}}</a>
{{/if}}
{{#if this.model.description}}
<span class="theme-description">{{this.model.description}}</span>
{{/if}}
{{#if this.model.remote_theme.authors}}<span class="authors"><span class="heading">{{i18n "admin.customize.theme.authors"}}</span> {{this.model.remote_theme.authors}}</span>{{/if}}
{{#if this.model.remote_theme.theme_version}}<span class="version"><span class="heading">{{i18n "admin.customize.theme.version"}}</span> {{this.model.remote_theme.theme_version}}</span>{{/if}}
<div class="control-unit">
{{#if this.model.remote_theme.is_git}}
<div class="alert alert-info">
{{html-safe (i18n "admin.customize.theme.remote_theme_edits" repoURL=this.remoteThemeLink)}}
</div>
{{#if this.showRemoteError}}
<div class="error-message">
{{d-icon "exclamation-triangle"}} {{i18n "admin.customize.theme.repo_unreachable"}}
</div>
<div class="raw-error">
<code>{{this.model.remoteError}}</code>
</div>
{{/if}}
{{#if this.model.remote_theme.commits_behind}}
<DButton @action={{action "updateToLatest"}} @icon="download" @class="btn-primary" @label="admin.customize.theme.update_to_latest" />
{{else}}
<DButton @action={{action "checkForThemeUpdates"}} @icon="sync" @class="btn-default" @label="admin.customize.theme.check_for_updates" />
{{/if}}
<span class="status-message">
{{#if this.updatingRemote}}
{{i18n "admin.customize.theme.updating"}}
{{else}}
{{#if this.model.remote_theme.commits_behind}}
{{#if this.hasOverwrittenHistory}}
{{i18n "admin.customize.theme.has_overwritten_history"}}
{{else}}
{{i18n "admin.customize.theme.commits_behind" count=this.model.remote_theme.commits_behind}}
{{/if}}
{{#if this.model.remote_theme.github_diff_link}}
<a href={{this.model.remote_theme.github_diff_link}}>
{{i18n "admin.customize.theme.compare_commits"}}
</a>
{{/if}}
{{else}}
{{#unless this.showRemoteError}}
{{i18n "admin.customize.theme.up_to_date"}} {{format-date this.model.remote_theme.updated_at leaveAgo="true"}}
{{/unless}}
{{/if}}
{{/if}}
</span>
{{else}}
<span class="status-message">
{{d-icon "info-circle"}} {{i18n "admin.customize.theme.imported_from_archive"}}
</span>
{{/if}}
</div>
{{else}}
<span class="heading">{{i18n "admin.customize.theme.creator"}}</span>
<span>
<UserLink @user={{this.model.user}}>
{{format-username this.model.user.username}}
</UserLink>
</span>
{{/if}}
</div>
{{#if this.showCheckboxes}}
<div class="control-unit">
{{#unless this.model.component}}
<InlineEditCheckbox @action={{action "applyDefault"}} @labelKey="admin.customize.theme.is_default" @checked={{this.model.default}} @modelId={{this.model.id}} />
<InlineEditCheckbox @action={{action "applyUserSelectable"}} @labelKey="admin.customize.theme.user_selectable" @checked={{this.model.user_selectable}} @modelId={{this.model.id}} />
{{/unless}}
{{#if this.model.remote_theme}}
<InlineEditCheckbox @action={{action "applyAutoUpdateable"}} @labelKey="admin.customize.theme.auto_update" @checked={{this.model.auto_update}} @modelId={{this.model.id}} />
{{/if}}
</div>
{{/if}}
{{#unless this.model.component}}
<DSection @class="form-horizontal theme settings control-unit">
<div class="row setting">
<div class="setting-label">
{{i18n "admin.customize.theme.color_scheme"}}
</div>
<div class="setting-value">
<ColorPalettes @content={{this.colorSchemes}} @value={{this.colorSchemeId}} @icon="paint-brush" @options={{hash
filterable=true
}} />
<div class="desc">{{i18n "admin.customize.theme.color_scheme_select"}}</div>
</div>
<div class="setting-controls">
{{#if this.colorSchemeChanged}}
<DButton @action={{action "changeScheme"}} @class="ok submit-edit" @icon="check" />
<DButton @action={{action "cancelChangeScheme"}} @class="cancel cancel-edit" @icon="times" />
{{/if}}
</div>
</div>
</DSection>
{{/unless}}
{{#if this.parentThemes}}
<div class="control-unit">
<div class="mini-title">{{i18n "admin.customize.theme.component_of"}}</div>
<ul>
{{#each this.parentThemes as |theme|}}
<li><LinkTo @route="adminCustomizeThemes.show" @model={{theme}} @replace={{true}}>{{theme.name}}</LinkTo></li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if this.model.component}}
<DSection @class="form-horizontal theme settings control-unit">
<div class="row setting">
<ThemeSettingRelativesSelector @setting={{this.relativesSelectorSettingsForComponent}} @model={{this.model}} @class="theme-setting" />
</div>
</DSection>
{{else}}
<DSection @class="form-horizontal theme settings control-unit">
<div class="row setting">
<ThemeSettingRelativesSelector @setting={{this.relativesSelectorSettingsForTheme}} @model={{this.model}} @class="theme-setting" />
</div>
</DSection>
{{/if}}
{{#unless this.model.remote_theme.is_git}}
<div class="control-unit">
<div class="mini-title">{{i18n "admin.customize.theme.css_html"}}</div>
{{#if this.model.hasEditedFields}}
<div class="description">{{i18n "admin.customize.theme.custom_sections"}}</div>
<ul>
{{#each this.editedFieldsFormatted as |field|}}
<li>{{field}}</li>
{{/each}}
</ul>
{{else}}
<div class="description">
{{i18n "admin.customize.theme.edit_css_html_help"}}
</div>
{{/if}}
<DButton @class="btn-default edit" @action={{action "editTheme"}} @label="admin.customize.theme.edit_css_html" />
</div>
<div class="control-unit">
<div class="mini-title">{{i18n "admin.customize.theme.uploads"}}</div>
{{#if this.model.uploads}}
<ul class="removable-list">
{{#each this.model.uploads as |upload|}}
<li>
<span class="col">${{upload.name}}: <a href={{upload.url}} rel="noopener noreferrer" target="_blank">{{upload.filename}}</a></span>
<span class="col">
<DButton @action={{action "removeUpload"}} @actionParam={{upload}} @class="second btn-default btn-default cancel-edit" @icon="times" />
</span>
</li>
{{/each}}
</ul>
{{else}}
<div class="description">{{i18n "admin.customize.theme.no_uploads"}}</div>
{{/if}}
<DButton @action={{action "addUploadModal"}} @class="btn-default" @icon="plus" @label="admin.customize.theme.add" />
</div>
{{/unless}}
{{#if this.extraFiles.length}}
<div class="control-unit">
<div class="mini-title">{{i18n "admin.customize.theme.extra_files"}}</div>
<details>
<summary>
{{#if this.model.remote_theme}}
{{i18n "admin.customize.theme.extra_files_remote"}}
{{else}}
{{i18n "admin.customize.theme.extra_files_upload"}}
{{/if}}
</summary>
<ul>
{{#each this.extraFiles as |extraFile|}}
<li>{{extraFile.name}}</li>
{{/each}}
</ul>
</details>
</div>
{{/if}}
{{#if this.hasSettings}}
<div class="control-unit">
<div class="mini-title">{{i18n "admin.customize.theme.theme_settings"}}</div>
<DSection @class="form-horizontal theme settings control-unit">
{{#each this.settings as |setting|}}
<ThemeSettingEditor @setting={{setting}} @model={{this.model}} @class="theme-setting control-unit" />
{{/each}}
</DSection>
</div>
{{/if}}
{{#if this.hasTranslations}}
<div class="control-unit">
<div class="mini-title">{{i18n "admin.customize.theme.theme_translations"}}</div>
<DSection @class="form-horizontal theme settings translations control-unit">
{{#each this.translations as |translation|}}
<ThemeTranslation @translation={{translation}} @model={{this.model}} @class="theme-translation" />
{{/each}}
</DSection>
</div>
{{/if}}
<div class="theme-controls">
<a href={{this.previewUrl}} title={{i18n "admin.customize.explain_preview"}} rel="noopener noreferrer" target="_blank" class="btn btn-default">{{d-icon "desktop"}}{{i18n "admin.customize.theme.preview"}}</a>
<a class="btn btn-default export" rel="noopener noreferrer" target="_blank" href={{this.downloadUrl}}>{{d-icon "download"}} {{i18n "admin.export_json.button_text"}}</a>
{{#if this.showConvert}}
<DButton @action={{action "switchType"}} @label="admin.customize.theme.convert" @icon={{this.convertIcon}} @class="btn-default btn-normal" @title={{this.convertTooltip}} />
{{/if}}
{{#if this.model.component}}
{{#if this.model.enabled}}
<DButton @class="btn-default" @action={{action "disableComponent"}} @icon="ban" @label="admin.customize.theme.disable" />
{{else}}
<DButton @class="btn-default" @action={{action "enableComponent"}} @icon="check" @label="admin.customize.theme.enable" />
{{/if}}
{{/if}}
<DButton @action={{action "destroy"}} @label="admin.customize.delete" @icon="trash-alt" @class="btn-danger" />
</div>
{{/if}}
</div>