Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Using accent color on login button

Browse source
This commit is contained in:
Peter Zimon 2021-03-03 12:29:36 +01:00
parent 2cf6dc4e4b
commit 477b58e076
5 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/admin/app/controllers/signin.js
View file

@ -2,6 +2,7 @@ import $ from 'jquery';
import Controller, {inject as controller} from '@ember/controller'; import Controller, {inject as controller} from '@ember/controller';
import ValidationEngine from 'ghost-admin/mixins/validation-engine'; import ValidationEngine from 'ghost-admin/mixins/validation-engine';
import {alias} from '@ember/object/computed'; import {alias} from '@ember/object/computed';
import {computed} from '@ember/object';
import {isArray as isEmberArray} from '@ember/array'; import {isArray as isEmberArray} from '@ember/array';
import {isVersionMismatchError} from 'ghost-admin/services/ajax'; import {isVersionMismatchError} from 'ghost-admin/services/ajax';
import {inject as service} from '@ember/service'; import {inject as service} from '@ember/service';
@ -33,6 +34,11 @@ export default Controller.extend(ValidationEngine, {
signin: alias('model'), signin: alias('model'),
accentColor: computed('config.accent_color', function () {
let color = this.get('config.accent_color') || '#15171A';
return color;
}),
actions: { actions: {
authenticate() { authenticate() {
return this.validateAndAuthenticate.perform(); return this.validateAndAuthenticate.perform();

15
ghost/admin/app/styles/layouts/auth.css
View file

@ -17,17 +17,28 @@
margin: 0; margin: 0;
} }
.gh-signin .gh-btn.login { .gh-signin .gh-btn-login {
height: 54px; height: 54px;
border-radius: 8px; border-radius: 8px;
line-height: 54px; line-height: 54px;
margin-top: 40px; margin-top: 40px;
max-width: unset; max-width: unset;
font-weight: 300; font-weight: 300;
transition: all 0.4s ease;
-webkit-font-smoothing: subpixel-antialiased;
} }
.gh-signin .gh-btn.login span { .gh-signin .gh-btn-login svg.gh-icon-spinner rect {
fill: #fff !important;
}
.gh-signin .gh-btn-login:hover {
opacity: 0.9;
}
.gh-signin .gh-btn-login span {
font-size: 1.8rem; font-size: 1.8rem;
color: #fff;
} }
.gh-signin label { .gh-signin label {

5
ghost/admin/app/templates/signin.hbs
View file

@ -72,9 +72,10 @@
<GhTaskButton @buttonText="Sign in →" <GhTaskButton @buttonText="Sign in →"
@task={{this.validateAndAuthenticate}} @task={{this.validateAndAuthenticate}}
@showSuccess={{false}} @showSuccess={{false}}
@class="login gh-btn gh-btn-primary gh-btn-block gh-btn-icon" @class="login gh-btn gh-btn-login gh-btn-block gh-btn-icon js-login-button"
@type="submit" @type="submit"
@tabindex="3" /> @tabindex="3"
style="background: {{this.accentColor}};" />
</form> </form>
<p class="main-error">{{if this.flowErrors this.flowErrors}}&nbsp;</p> <p class="main-error">{{if this.flowErrors this.flowErrors}}&nbsp;</p>

2
ghost/admin/tests/acceptance/error-handling-test.js
View file

@ -73,7 +73,7 @@ describe('Acceptance: Error Handling', function () {
await visit('/signin'); await visit('/signin');
await fillIn('[name="identification"]', 'test@example.com'); await fillIn('[name="identification"]', 'test@example.com');
await fillIn('[name="password"]', 'password'); await fillIn('[name="password"]', 'password');
await click('.gh-btn-primary'); await click('.js-login-button');
// has the refresh to update alert // has the refresh to update alert
expect(findAll('.gh-alert').length).to.equal(1); expect(findAll('.gh-alert').length).to.equal(1);

6
ghost/admin/tests/acceptance/signin-test.js
View file

@ -62,7 +62,7 @@ describe('Acceptance: Signin', function () {
expect(findAll('input[name="password"]').length, 'password input field') expect(findAll('input[name="password"]').length, 'password input field')
.to.equal(1); .to.equal(1);
await click('.gh-btn-primary'); await click('.js-login-button');
expect(findAll('.form-group.error').length, 'number of invalid fields') expect(findAll('.form-group.error').length, 'number of invalid fields')
.to.equal(2); .to.equal(2);
@ -72,7 +72,7 @@ describe('Acceptance: Signin', function () {
await fillIn('[name="identification"]', 'test@example.com'); await fillIn('[name="identification"]', 'test@example.com');
await fillIn('[name="password"]', 'invalid'); await fillIn('[name="password"]', 'invalid');
await click('.gh-btn-primary'); await click('.js-login-button');
expect(currentURL(), 'current url').to.equal('/signin'); expect(currentURL(), 'current url').to.equal('/signin');
@ -91,7 +91,7 @@ describe('Acceptance: Signin', function () {
await fillIn('[name="identification"]', 'test@example.com'); await fillIn('[name="identification"]', 'test@example.com');
await fillIn('[name="password"]', 'thisissupersafe'); await fillIn('[name="password"]', 'thisissupersafe');
await click('.gh-btn-primary'); await click('.js-login-button');
expect(currentURL(), 'currentURL').to.equal('/dashboard'); expect(currentURL(), 'currentURL').to.equal('/dashboard');
}); });
}); });