From aaef8f7d4445ec2d36f6fae2e47336de692e7c6f Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Thu, 26 May 2022 10:42:10 +0100 Subject: [PATCH] Deleted unused component no issue - the component became unused when the staff user page design was updated but was never cleaned up --- ghost/admin/.lint-todo | 3 - .../admin/app/components/gh-profile-image.hbs | 25 --- .../admin/app/components/gh-profile-image.js | 167 ----------------- ghost/admin/app/styles/layouts/flow.css | 87 --------- ghost/admin/package.json | 1 - .../components/gh-profile-image-test.js | 174 ------------------ ghost/admin/yarn.lock | 5 - 7 files changed, 462 deletions(-) delete mode 100644 ghost/admin/app/components/gh-profile-image.hbs delete mode 100644 ghost/admin/app/components/gh-profile-image.js delete mode 100644 ghost/admin/tests/integration/components/gh-profile-image-test.js diff --git a/ghost/admin/.lint-todo b/ghost/admin/.lint-todo index dd4601fd89..b31117e4e7 100644 --- a/ghost/admin/.lint-todo +++ b/ghost/admin/.lint-todo @@ -178,9 +178,6 @@ add|ember-template-lint|no-passed-in-event-handlers|441|40|441|40|055c4b70aa8dab add|ember-template-lint|simple-unless|64|30|64|30|ca177565b6e1c5a6175982047708732f5dde7e59|1652054400000|1662422400000|1665014400000|app/components/gh-post-settings-menu.hbs add|ember-template-lint|simple-unless|195|62|195|62|5d9203e10703908836b537481cf012f167ded239|1652054400000|1662422400000|1665014400000|app/components/gh-post-settings-menu.hbs add|ember-template-lint|no-action|12|16|12|16|40e7337ccf8501ef3b2fea94812d4de8435286da|1652054400000|1662422400000|1665014400000|app/components/gh-products-price-billingperiod.hbs -add|ember-template-lint|no-action|14|45|14|45|818de8cb87f2b92338a54aa71f8b0fc95404b264|1652054400000|1662422400000|1665014400000|app/components/gh-profile-image.hbs -add|ember-template-lint|no-action|23|16|23|16|01077e862788636fab21f0dbe27fe73a7c227e9b|1652054400000|1662422400000|1665014400000|app/components/gh-profile-image.hbs -add|ember-template-lint|require-valid-alt-text|11|8|11|8|473922dad04893d18a81bd598d91e64e5e034544|1652054400000|1662422400000|1665014400000|app/components/gh-profile-image.hbs add|ember-template-lint|no-action|4|14|4|14|c8f6146f9286ec1b289e28983ab446386f390f01|1652054400000|1662422400000|1665014400000|app/components/gh-psm-authors-input.hbs add|ember-template-lint|no-action|5|14|5|14|a90edd9a99596008f60bfcdbc6befe7fe8d26321|1652054400000|1662422400000|1665014400000|app/components/gh-psm-tags-input.hbs add|ember-template-lint|no-action|6|14|6|14|3924d7cfb394cbcfd6b1bf9cf13a5040ac8f94b5|1652054400000|1662422400000|1665014400000|app/components/gh-psm-tags-input.hbs diff --git a/ghost/admin/app/components/gh-profile-image.hbs b/ghost/admin/app/components/gh-profile-image.hbs deleted file mode 100644 index 5964fc2085..0000000000 --- a/ghost/admin/app/components/gh-profile-image.hbs +++ /dev/null @@ -1,25 +0,0 @@ - diff --git a/ghost/admin/app/components/gh-profile-image.js b/ghost/admin/app/components/gh-profile-image.js deleted file mode 100644 index 54f3f6b978..0000000000 --- a/ghost/admin/app/components/gh-profile-image.js +++ /dev/null @@ -1,167 +0,0 @@ -import $ from 'jquery'; -import Component from '@ember/component'; -import md5 from 'blueimp-md5'; -import request from 'ember-ajax/request'; -import validator from 'validator'; -import {htmlSafe} from '@ember/template'; -import {inject as service} from '@ember/service'; -import {task, timeout} from 'ember-concurrency'; - -const ANIMATION_TIMEOUT = 1000; - -/** - * A component to manage a user profile image. By default it just handles picture uploads, - * but if passed a bound 'email' property it will render the user's gravatar image - * - * Example: {{gh-profile-image email=controllerEmailProperty setImage="controllerActionName" debounce=500}} - * - * @param {int} size The size of the image to render - * @param {String} email Reference to a bound email object if gravatar image behavior is desired. - * @param {String|action} setImage The string name of the action on the controller to be called when an image is added. - * @param {int} debounce Period to wait after changes to email before attempting to load gravatar - * @property {Boolean} hasUploadedImage Whether or not the user has uploaded an image (whether or not to show the default image/gravatar image) - * @property {String} defaultImage String containing the background-image css property of the default user profile image - * @property {String} imageBackground String containing the background-image css property with the gravatar url - */ -export default Component.extend({ - config: service(), - ghostPaths: service(), - - email: '', - size: 180, - debounce: 300, - - imageFile: null, - hasUploadedImage: false, - - _defaultImageUrl: '', - - // closure actions - setImage() {}, - - placeholderStyle: htmlSafe('background-image: url()'), - avatarStyle: htmlSafe('display: none'), - - init() { - this._super(...arguments); - - let defaultImage = '/img/user-image.png'; - this._defaultImageUrl = this.get('ghostPaths.assetRoot').replace(/\/$/, '') + defaultImage; - this._setPlaceholderImage(this._defaultImageUrl); - }, - - didReceiveAttrs() { - this._super(...arguments); - - if (this.get('config.useGravatar')) { - this.setGravatar.perform(); - } - }, - - actions: { - imageSelected(fileList, resetInput) { - // eslint-disable-next-line - let imageFile = fileList[0]; - - if (imageFile) { - let reader = new FileReader(); - - this.set('imageFile', imageFile); - this.setImage(imageFile); - - reader.addEventListener('load', () => { - let dataURL = reader.result; - this.set('previewDataURL', dataURL); - }, false); - - reader.readAsDataURL(imageFile); - } - - resetInput(); - }, - - openFileDialog(event) { - // simulate click to open file dialog - // using jQuery because IE11 doesn't support MouseEvent - $(event.target) - .closest('figure') - .find('input[type="file"]') - .click(); - } - }, - - dragOver(event) { - if (!event.dataTransfer) { - return; - } - - // this is needed to work around inconsistencies with dropping files - // from Chrome's downloads bar - if (navigator.userAgent.indexOf('Chrome') > -1) { - let eA = event.dataTransfer.effectAllowed; - event.dataTransfer.dropEffect = (eA === 'move' || eA === 'linkMove') ? 'move' : 'copy'; - } - - event.stopPropagation(); - event.preventDefault(); - }, - - dragLeave(event) { - event.preventDefault(); - }, - - drop(event) { - event.preventDefault(); - - if (event.dataTransfer.files) { - this.send('imageSelected', event.dataTransfer.files); - } - }, - - setGravatar: task(function* () { - yield timeout(this.debounce); - - let email = this.email; - - if (validator.isEmail(email || '')) { - let size = this.size; - let gravatarUrl = `//www.gravatar.com/avatar/${md5(email)}?s=${size}&d=404`; - - try { - // HEAD request is needed otherwise jquery attempts to process - // binary data as JSON and throws an error - yield request(gravatarUrl, {type: 'HEAD'}); - // gravatar exists so switch style and let browser load it - this._setAvatarImage(gravatarUrl); - // wait for fade-in animation to finish before removing placeholder - yield timeout(ANIMATION_TIMEOUT); - this._setPlaceholderImage(''); - } catch (e) { - // gravatar doesn't exist so make sure we're still showing the placeholder - this._setPlaceholderImage(this._defaultImageUrl); - // then make sure the avatar isn't visible - this._setAvatarImage(''); - } - } - }).restartable(), - - _setPlaceholderImage(url) { - this.set('placeholderStyle', htmlSafe(`background-image: url(${url});`)); - }, - - _setAvatarImage(url) { - let display = url ? 'block' : 'none'; - this.set('avatarStyle', htmlSafe(`background-image: url(${url}); display: ${display}`)); - }, - - queueFile(e, data) { - let fileName = data.files[0].name; - - if ((/\.(gif|jpe?g|png|svg?z)$/i).test(fileName)) { - let action = this.setImage; - if (action) { - action(data); - } - } - } -}); diff --git a/ghost/admin/app/styles/layouts/flow.css b/ghost/admin/app/styles/layouts/flow.css index 9f35599a64..e4e43d4fbd 100644 --- a/ghost/admin/app/styles/layouts/flow.css +++ b/ghost/admin/app/styles/layouts/flow.css @@ -171,93 +171,6 @@ box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.1); } -.gh-flow-content .account-image { - position: absolute; - top: -50px; - left: 50%; - overflow: hidden; - margin: 0; - margin-left: -50px; - padding: 4px; - width: 100px; - height: 100px; - border: #d1d9db 1px solid; - background: #fff; - border-radius: 100%; - text-align: center; -} - -.gh-flow-content .account-image:hover .edit-account-image { - opacity: 1; -} - -.gh-flow-content .edit-account-image { - position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - left: 4px; - width: calc(100% - 8px); - background: rgba(87, 163, 232, 0.7); - border-radius: 100%; - text-decoration: none; - text-transform: uppercase; - font-size: 3rem; - line-height: 90px; - opacity: 0; - transition: opacity 0.3s ease; - display: flex; - align-items: center; -} - -.gh-flow-content .edit-account-image svg { - fill: #fff; - height: 3rem; - width: auto; - flex: 1 1 3rem; -} - -.gh-flow-content .placeholder-img { - display: block; - width: 90px; - height: 90px; - background-color: #f8fbfd; - background-position: center center; - background-size: cover; - border-radius: 100%; - animation: fade-in 1s; -} - -.gh-flow-content .gravatar-img { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - box-sizing: content-box; - width: calc(100% - 8px); - width: 90px; - height: 90px; - border: #fff 4px solid; - background-position: center center; - background-size: cover; - border-radius: 100%; - animation: fade-in 1s; -} - -.gh-flow-content .file-uploader { - position: absolute; - right: 0; - margin: 0; - font-size: 23px; - opacity: 0; - cursor: pointer; - transform: scale(14); - transform-origin: right; - direction: ltr; -} - .gh-flow-content .form-group { margin-bottom: 20px !important; } diff --git a/ghost/admin/package.json b/ghost/admin/package.json index c363a1990e..6163fa4b30 100644 --- a/ghost/admin/package.json +++ b/ghost/admin/package.json @@ -51,7 +51,6 @@ "@tryghost/string": "0.1.26", "@tryghost/timezone-data": "0.2.68", "autoprefixer": "9.8.6", - "blueimp-md5": "2.19.0", "broccoli-asset-rev": "3.0.0", "broccoli-concat": "4.2.5", "broccoli-funnel": "3.0.8", diff --git a/ghost/admin/tests/integration/components/gh-profile-image-test.js b/ghost/admin/tests/integration/components/gh-profile-image-test.js deleted file mode 100644 index e85c38fd71..0000000000 --- a/ghost/admin/tests/integration/components/gh-profile-image-test.js +++ /dev/null @@ -1,174 +0,0 @@ -import Pretender from 'pretender'; -import Service from '@ember/service'; -import hbs from 'htmlbars-inline-precompile'; -import md5 from 'blueimp-md5'; -import {describe, it} from 'mocha'; -import {expect} from 'chai'; -import {find, render} from '@ember/test-helpers'; -import {setupRenderingTest} from 'ember-mocha'; -import {timeout} from 'ember-concurrency'; - -let pathsStub = Service.extend({ - assetRoot: '/ghost/assets/', - - init() { - this._super(...arguments); - - this.url = { - api() { - return ''; - }, - asset(src) { - return src; - } - }; - } -}); - -const stubKnownGravatar = function (server) { - server.get('http://www.gravatar.com/avatar/:md5', function () { - return [200, {'Content-Type': 'image/png'}, '']; - }); - - server.head('http://www.gravatar.com/avatar/:md5', function () { - return [200, {'Content-Type': 'image/png'}, '']; - }); -}; - -const stubUnknownGravatar = function (server) { - server.get('http://www.gravatar.com/avatar/:md5', function () { - return [404, {}, '']; - }); - - server.head('http://www.gravatar.com/avatar/:md5', function () { - return [404, {}, '']; - }); -}; - -let configStubuseGravatar = Service.extend({ - useGravatar: true -}); - -describe('Integration: Component: gh-profile-image', function () { - setupRenderingTest(); - - let server; - - beforeEach(function () { - this.owner.register('service:ghost-paths', pathsStub); - this.owner.register('service:config', configStubuseGravatar); - - server = new Pretender(); - stubKnownGravatar(server); - }); - - afterEach(function () { - server.shutdown(); - }); - - it('renders', async function () { - this.set('email', ''); - - await render(hbs` - {{gh-profile-image email=email}} - `); - - expect(find('.account-image')).to.exist; - expect(find('.placeholder-img')).to.exist; - expect(find('input[type="file"]')).to.exist; - }); - - it('renders default image if no email supplied', async function () { - this.set('email', null); - - await render(hbs` - {{gh-profile-image email=email size=100 debounce=50}} - `); - - expect( - find('.gravatar-img'), - 'gravatar image style' - ).to.have.attribute('style', 'display: none'); - }); - - it('renders the gravatar if valid email supplied and privacy.useGravatar allows it', async function () { - let email = 'test@example.com'; - let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=404`; - - this.set('email', email); - - await render(hbs` - {{gh-profile-image email=email size=100 debounce=50}} - `); - - expect( - find('.gravatar-img'), - 'gravatar image style' - ).to.have.attribute('style', `background-image: url(${expectedUrl}); display: block`); - }); - - it('doesn\'t render the gravatar if valid email supplied but privacy.useGravatar forbids it', async function () { - let config = this.owner.lookup('service:config'); - let email = 'test@example.com'; - - this.set('email', email); - config.set('useGravatar', false); - - await render(hbs` - {{gh-profile-image email=email size=100 debounce=50}} - `); - - expect( - find('.gravatar-img'), - 'gravatar image style' - ).to.have.attribute('style', 'display: none'); - }); - - it('doesn\'t add background url if gravatar image doesn\'t exist', async function () { - stubUnknownGravatar(server); - - await render(hbs` - {{gh-profile-image email="test@example.com" size=100 debounce=50}} - `); - - expect( - find('.gravatar-img'), - 'gravatar image style' - ).to.have.attribute('style', 'background-image: url(); display: none'); - }); - - // skipped due to random failures on Travis - https://github.com/TryGhost/Ghost/issues/10308 - it.skip('throttles gravatar loading as email is changed', async function () { - let email = 'test@example.com'; - let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=404`; - - this.set('email', 'test'); - - await render(hbs` - {{gh-profile-image email=email size=100 debounce=300}} - `); - - this.set('email', email); - - await timeout(50); - - expect( - find('.gravatar-img'), - '.gravatar-img background not immediately changed on email change' - ).to.have.attribute('style', 'display: none'); - - await timeout(250); - - expect( - find('.gravatar-img'), - '.gravatar-img background still not changed before debounce timeout' - ).to.have.attribute('style', 'display: none'); - - await timeout(100); - - expect( - find('.gravatar-img'), - '.gravatar-img background changed after debounce timeout' - ).to.have.attribute('style', `background-image: url(${expectedUrl}); display: block`); - }); -}); diff --git a/ghost/admin/yarn.lock b/ghost/admin/yarn.lock index e5afeffcd0..9a0ecff12f 100644 --- a/ghost/admin/yarn.lock +++ b/ghost/admin/yarn.lock @@ -3760,11 +3760,6 @@ bluebird@^3.3.5, bluebird@^3.4.6, bluebird@^3.5.5, bluebird@^3.7.2: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== -blueimp-md5@2.19.0: - version "2.19.0" - resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz#b53feea5498dcb53dc6ec4b823adb84b729c4af0" - integrity sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w== - bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9: version "4.12.0" resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"