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
2024-11-23 22:11:09 +03:00 · 2019-04-17 16:16:03 +02:00 · 2019-04-17 16:16:03 +02:00 · 25e5a31d91
commit 25e5a31d91
parent e163f527a0
7 changed files with 67 additions and 25 deletions
--- a/ghost/members-auth-pages/components/FormSubmit.js
+++ b/ghost/members-auth-pages/components/FormSubmit.js
@ -1,7 +1,10 @@
-export default ({onClick, label}) => (
+export default ({onClick, buttonClass, showSpinner, disabled, label}) => (
    <div className="mt7">
-        <button type="submit" className="gm-btn-blue" onClick={onClick}>
-            { label }
+        <button type="submit" className={ (buttonClass ? buttonClass : "gm-btn-blue") } onClick={onClick} disabled={ ((disabled || showSpinner) ? "disabled" : "") }>
+            <span>
+                { (showSpinner ? <span className="gm-spinner"></span> : "")}
+                { label }
+            </span>
        </button>
    </div>
 );
--- a/ghost/members-auth-pages/components/Modal.js
+++ b/ghost/members-auth-pages/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 });
--- a/ghost/members-auth-pages/components/icons.js
+++ b/ghost/members-auth-pages/components/icons.js
@ -29,4 +29,12 @@ export const GhostLogo = (

 export const IconSignupComplete = (
    <svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><title>SignupComplete</title><g stroke="#FFF" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M58.75 43.75c0 4.142-1.464 7.678-4.393 10.607-2.93 2.929-6.465 4.393-10.607 4.393-4.142 0-7.678-1.464-10.607-4.393-2.929-2.93-4.393-6.465-4.393-10.607 0-4.142 1.464-7.678 4.393-10.607 2.93-2.929 6.465-4.393 10.607-4.393 4.142 0 7.678 1.464 10.607 4.393 2.929 2.93 4.393 6.465 4.393 10.607z" /><path d="M50.435 39.39l-7.263 9.682c-.342.456-.798.704-1.367.745-.569.04-1.056-.14-1.46-.542l-3.75-3.75M29.375 11.875c0 2.934-1.037 5.438-3.112 7.513S21.684 22.5 18.75 22.5s-5.438-1.037-7.513-3.112-3.112-4.579-3.112-7.513 1.037-5.438 3.112-7.513S15.816 1.25 18.75 1.25s5.438 1.037 7.513 3.112 3.112 4.579 3.112 7.513zM21.25 43.75h-20c0-6.921 3.037-12.04 9.11-15.359 6.075-3.318 12.024-3.106 17.848.634" /></g></svg>
+);
+
+export const IconAnimatedCheck = (
+    <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5.99999964,13 L9.19423196,16.194232 C9.58475627,16.5847563 10.2179212,16.5847563 10.6084455,16.194232 C10.6391553,16.1635222 10.6678318,16.1308445 10.694293,16.0964064 L19.9549468,4.04404806 C22.1516467,6.24074753 23.2499966,8.89239827 23.2499986,11.9989998 C23.2499966,15.1056004 22.1516467,17.7572509 19.9549468,19.9539498 C17.7582499,22.1506487 15.1066008,23.2489976 11.9999993,23.2489996 C8.89339777,23.2489976 6.24174753,22.1506487 4.04504846,19.9539498 C1.84834949,17.7572509 0.749999895,15.1056004 0.749999955,11.9989998 C0.749999895,8.89239827 1.84834949,6.24074753 4.04504846,4.04404806 C6.24174753,1.84734909 8.89339777,0.748999555 11.9999993,0.748999555 C13.0229859,0.748999555 13.9966398,0.868098903 14.9209611,1.1062976" id="Path-Copy" stroke="#FFFFFF" stroke-width="1.5" class="gm-check-animation"></path>
+        </g>
+    </svg>
 );
--- a/ghost/members-auth-pages/pages/SigninPage.js
+++ b/ghost/members-auth-pages/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 ? (
-        <span><span class="gm-spinner"></span> Logged In </span>
+        <span class="flex items-center"><span class="gm-check">{ IconAnimatedCheck }</span> Logged in </span>
    ) : "Log in";
    return (
        <div className="flex flex-column items-center">
@ -27,7 +27,7 @@ export default ({ error, handleSubmit, showLoggedIn }) => {
                            Forgot
                        </a>
                    </PasswordInput>
-                    <FormSubmit label={label} />
+                    <FormSubmit label={label} disabled={showLoggedIn} />
                </Form>
            </div>
        </div>
--- a/ghost/members-auth-pages/pages/SignupPage.js
+++ b/ghost/members-auth-pages/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 ? (
-        <span><span class="gm-spinner"></span> Signing up... </span>
-    ) : "Sign up";
+    let label = showSpinner ? "Signing up..." : "Confirm payment";
    return (
        <div className="gm-modal-form gm-signup-page">
            <FormHeader title="" error={error} errorText="Email already registered">
@ -24,7 +22,7 @@ export default ({ error, handleClose, handleSubmit, showSpinner }) => {
                <NameInput bindTo="name" className="first" />
                <EmailInput bindTo="email" />
                <PasswordInput bindTo="password" className="last" />
-                <FormSubmit label={label} />
+                <FormSubmit label={label} showSpinner={showSpinner} />
            </Form>
        </div>
    )
--- a/ghost/members-auth-pages/pages/StripeSubscribePage.js
+++ b/ghost/members-auth-pages/pages/StripeSubscribePage.js
@ -37,11 +37,7 @@ class PaymentForm extends Component {
    };

    render({frameLocation}) {
-        let label = this.props.showSpinner ? (
-            (
-                <span><span class="gm-spinner"></span> Signing up... </span>
-            )
-        ) : "Confirm payment";
+        let label = this.props.showSpinner ? "Signing up..." : "Confirm payment";
        const { coupon } = getCouponData(frameLocation);
        return (
            <Form includeData={getCouponData(frameLocation)} bindTo="request-password-reset" onSubmit={(data) => this.handleSubmit(data)}>
@ -50,7 +46,7 @@ class PaymentForm extends Component {
                <PasswordInput bindTo="password" />
                { coupon ? <CouponInput disabled={true} bindTo="coupon" /> : '' }
                <CheckoutForm />
-                <FormSubmit label={label} />
+                <FormSubmit label={label} showSpinner={this.props.showSpinner} />
            </Form>
        );
    }
--- a/ghost/members-auth-pages/styles/components.css
+++ b/ghost/members-auth-pages/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 */
 /* ------------------------------------------------------------ */