From fb8a12772927082344f220366d4ae2588f06b9a3 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Wed, 17 Apr 2019 16:16:03 +0200 Subject: [PATCH] Members refine buttons (#10692) * Members: disabled signup button during signup * Members: disabled non-Stripe signup button during signup * Members: added check to Log in button logged in state --- .../static/auth/components/FormSubmit.js | 9 ++-- .../members/static/auth/components/Modal.js | 4 +- .../members/static/auth/components/icons.js | 8 +++ .../members/static/auth/pages/SigninPage.js | 6 +-- .../members/static/auth/pages/SignupPage.js | 6 +-- .../static/auth/pages/StripeSubscribePage.js | 8 +-- .../members/static/auth/styles/components.css | 51 ++++++++++++++++--- 7 files changed, 67 insertions(+), 25 deletions(-) diff --git a/core/server/lib/members/static/auth/components/FormSubmit.js b/core/server/lib/members/static/auth/components/FormSubmit.js index 3a6ce75328..e5a3522f8a 100644 --- a/core/server/lib/members/static/auth/components/FormSubmit.js +++ b/core/server/lib/members/static/auth/components/FormSubmit.js @@ -1,7 +1,10 @@ -export default ({onClick, label}) => ( +export default ({onClick, buttonClass, showSpinner, disabled, label}) => (
-
); diff --git a/core/server/lib/members/static/auth/components/Modal.js b/core/server/lib/members/static/auth/components/Modal.js index a9e4661431..fc31f849a6 100644 --- a/core/server/lib/members/static/auth/components/Modal.js +++ b/core/server/lib/members/static/auth/components/Modal.js @@ -99,14 +99,14 @@ export default class Modal extends Component { }) }; - // const signin = (data) => this.handleAction(members.signin(data)); const signin = (data) => members.signin(data).then((success) => { + this.setState({ error: null }); const clearShowLoggedIn = () => { this.setState({showLoggedIn: false}); this.close(); } this.setState({showLoggedIn: true}, () => { - window.setTimeout(clearShowLoggedIn, 5000) + window.setTimeout(clearShowLoggedIn, 1500) }); }, (error) => { this.setState({ error }); diff --git a/core/server/lib/members/static/auth/components/icons.js b/core/server/lib/members/static/auth/components/icons.js index 43c1495647..4f4339a525 100644 --- a/core/server/lib/members/static/auth/components/icons.js +++ b/core/server/lib/members/static/auth/components/icons.js @@ -29,4 +29,12 @@ export const GhostLogo = ( export const IconSignupComplete = ( SignupComplete +); + +export const IconAnimatedCheck = ( + + + + + ); \ No newline at end of file diff --git a/core/server/lib/members/static/auth/pages/SigninPage.js b/core/server/lib/members/static/auth/pages/SigninPage.js index a065425494..84dc4da76d 100644 --- a/core/server/lib/members/static/auth/pages/SigninPage.js +++ b/core/server/lib/members/static/auth/pages/SigninPage.js @@ -2,14 +2,14 @@ import Form from '../components/Form'; import FormHeader from '../components/FormHeader'; import FormHeaderCTA from '../components/FormHeaderCTA'; import FormSubmit from '../components/FormSubmit'; -import { IconRightArrow } from '../components/icons'; +import { IconRightArrow, IconAnimatedCheck } from '../components/icons'; import EmailInput from '../components/EmailInput'; import PasswordInput from '../components/PasswordInput'; export default ({ error, handleSubmit, showLoggedIn }) => { let label = showLoggedIn ? ( - Logged In + { IconAnimatedCheck } Logged in ) : "Log in"; return (
@@ -27,7 +27,7 @@ export default ({ error, handleSubmit, showLoggedIn }) => { Forgot - +
diff --git a/core/server/lib/members/static/auth/pages/SignupPage.js b/core/server/lib/members/static/auth/pages/SignupPage.js index 1938c7d104..959301a4e1 100644 --- a/core/server/lib/members/static/auth/pages/SignupPage.js +++ b/core/server/lib/members/static/auth/pages/SignupPage.js @@ -9,9 +9,7 @@ import PasswordInput from '../components/PasswordInput'; import { IconClose } from '../components/icons'; export default ({ error, handleClose, handleSubmit, showSpinner }) => { - let label = showSpinner ? ( - Signing up... - ) : "Sign up"; + let label = showSpinner ? "Signing up..." : "Confirm payment"; return (
@@ -24,7 +22,7 @@ export default ({ error, handleClose, handleSubmit, showSpinner }) => { - +
) diff --git a/core/server/lib/members/static/auth/pages/StripeSubscribePage.js b/core/server/lib/members/static/auth/pages/StripeSubscribePage.js index 877c99c4c4..62b0183956 100644 --- a/core/server/lib/members/static/auth/pages/StripeSubscribePage.js +++ b/core/server/lib/members/static/auth/pages/StripeSubscribePage.js @@ -37,11 +37,7 @@ class PaymentForm extends Component { }; render({frameLocation}) { - let label = this.props.showSpinner ? ( - ( - Signing up... - ) - ) : "Confirm payment"; + let label = this.props.showSpinner ? "Signing up..." : "Confirm payment"; const { coupon } = getCouponData(frameLocation); return (
this.handleSubmit(data)}> @@ -50,7 +46,7 @@ class PaymentForm extends Component { { coupon ? : '' } - + ); } diff --git a/core/server/lib/members/static/auth/styles/components.css b/core/server/lib/members/static/auth/styles/components.css index 9a2cb86a66..417f3262e7 100644 --- a/core/server/lib/members/static/auth/styles/components.css +++ b/core/server/lib/members/static/auth/styles/components.css @@ -169,23 +169,37 @@ button:hover { color: var(--blue-l1); } +button:disabled, +button[disabled] { + color: rgba(255, 255, 255, 0.85); + cursor: auto; +} + .gm-btn-blue { - background: var(--blue); - background: linear-gradient(to bottom, rgba(62,176,239,1) 0%,rgba(0,139,214,1) 100%); + background: linear-gradient(to bottom, #3eb0ef 0%,#008bd6 100%); color: var(--white); border: none; } .gm-btn-blue:active { - background: var(--blue-d1); - background: linear-gradient(to bottom, rgb(22, 147, 214) 0%,rgb(0, 118, 182) 100%); + background: linear-gradient(to bottom, #1693d6 0%,#0076b6 100%); } -.gm-btn-blue:hover { +.gm-btn-green { + background: linear-gradient(to bottom, #3BD95D 0%, #1FA33C 100%); + color: var(--white); + border: none; +} + +.gm-btn-green:active { + background: linear-gradient(to bottom, #21BF43 0%,#0C8A28 100%); +} + +.gm-btn-blue:hover:enabled { color: var(--white); } -.gm-btn-blue:hover:before { +.gm-btn-blue:hover:enabled:before { opacity: 0.8; } @@ -201,6 +215,11 @@ button:hover { opacity: 0; } +.gm-btn-blue:disabled:before { + background: #fff; + opacity: 0.15; +} + @keyframes spinner { to {transform: rotate(360deg);} } @@ -212,11 +231,29 @@ button:hover { height: 20px; margin: -3px 8px -3px 0; border-radius: 50%; - border-top: 2px solid #fff; + border-top: 2px solid rgba(255, 255, 255, 0.85); border-right: 2px solid transparent; animation: spinner .6s linear infinite; } +.gm-check { + margin: -4px 8px -6px 0; +} + +.gm-check svg { + width: 20px; + height: 20px; +} + +.gm-check-animation { + stroke-dasharray: 87 89; + stroke-dashoffset: 88; + animation: check_draw 666ms linear 100ms forwards; +} + +@keyframes check_draw { + 100% { stroke-dashoffset: 0; } +} /* Forms inputs */ /* ------------------------------------------------------------ */