From 96ecb3e4a02551f95b720bfd7dd0cc93c1a3f29c Mon Sep 17 00:00:00 2001 From: Andrew Nicolaou Date: Sun, 19 Apr 2020 22:45:09 +0200 Subject: [PATCH] Replace User form buttons with shared Button component --- .../modules/User/components/GithubButton.jsx | 23 -------- .../modules/User/components/GoogleButton.jsx | 23 -------- .../User/components/NewPasswordForm.jsx | 4 +- .../User/components/ResetPasswordForm.jsx | 10 ++-- client/modules/User/components/SignupForm.jsx | 9 ++- .../User/components/SocialAuthButton.jsx | 55 +++++++++++++++++++ .../components/SocialAuthButton.stories.jsx | 16 ++++++ client/modules/User/pages/AccountView.jsx | 7 +-- client/modules/User/pages/DashboardView.jsx | 11 ++-- client/modules/User/pages/LoginView.jsx | 9 +-- .../styles/components/_dashboard-header.scss | 5 -- client/styles/components/_form-container.scss | 4 ++ client/styles/components/_forms.scss | 35 +++++++----- client/styles/components/_github-button.scss | 35 ------------ client/styles/main.scss | 1 - 15 files changed, 129 insertions(+), 118 deletions(-) delete mode 100644 client/modules/User/components/GithubButton.jsx delete mode 100644 client/modules/User/components/GoogleButton.jsx create mode 100644 client/modules/User/components/SocialAuthButton.jsx create mode 100644 client/modules/User/components/SocialAuthButton.stories.jsx delete mode 100644 client/styles/components/_github-button.scss diff --git a/client/modules/User/components/GithubButton.jsx b/client/modules/User/components/GithubButton.jsx deleted file mode 100644 index b612a2bb..00000000 --- a/client/modules/User/components/GithubButton.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import InlineSVG from 'react-inlinesvg'; -import PropTypes from 'prop-types'; -import React from 'react'; - -const githubUrl = require('../../../images/github.svg'); - -function GithubButton(props) { - return ( - - - {props.buttonText} - - ); -} - -GithubButton.propTypes = { - buttonText: PropTypes.string.isRequired -}; - -export default GithubButton; diff --git a/client/modules/User/components/GoogleButton.jsx b/client/modules/User/components/GoogleButton.jsx deleted file mode 100644 index f431379c..00000000 --- a/client/modules/User/components/GoogleButton.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import InlineSVG from 'react-inlinesvg'; -import PropTypes from 'prop-types'; -import React from 'react'; - -import googleUrl from '../../../images/google.svg'; - -function GoogleButton(props) { - return ( - - - {props.buttonText} - - ); -} - -GoogleButton.propTypes = { - buttonText: PropTypes.string.isRequired -}; - -export default GoogleButton; diff --git a/client/modules/User/components/NewPasswordForm.jsx b/client/modules/User/components/NewPasswordForm.jsx index f60e3f41..2f766011 100644 --- a/client/modules/User/components/NewPasswordForm.jsx +++ b/client/modules/User/components/NewPasswordForm.jsx @@ -1,6 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; + import { domOnlyProps } from '../../../utils/reduxFormUtils'; +import Button from '../../../common/Button'; function NewPasswordForm(props) { const { @@ -34,7 +36,7 @@ function NewPasswordForm(props) { {confirmPassword.error} }

- + ); } diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.jsx index 6ed00455..f9abd2d5 100644 --- a/client/modules/User/components/ResetPasswordForm.jsx +++ b/client/modules/User/components/ResetPasswordForm.jsx @@ -1,6 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; + import { domOnlyProps } from '../../../utils/reduxFormUtils'; +import Button from '../../../common/Button'; function ResetPasswordForm(props) { const { @@ -19,12 +21,12 @@ function ResetPasswordForm(props) { /> {email.touched && email.error && {email.error}}

- + label="Send email to reset password" + >Send Password Reset Email + ); } diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx index 3b600e0a..b62f2881 100644 --- a/client/modules/User/components/SignupForm.jsx +++ b/client/modules/User/components/SignupForm.jsx @@ -1,6 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; + import { domOnlyProps } from '../../../utils/reduxFormUtils'; +import Button from '../../../common/Button'; function SignupForm(props) { const { @@ -58,7 +60,12 @@ function SignupForm(props) { {confirmPassword.error} }

- + ); } diff --git a/client/modules/User/components/SocialAuthButton.jsx b/client/modules/User/components/SocialAuthButton.jsx new file mode 100644 index 00000000..c3c5dd74 --- /dev/null +++ b/client/modules/User/components/SocialAuthButton.jsx @@ -0,0 +1,55 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import styled from 'styled-components'; + +import { remSize, prop } from '../../../theme'; + +import Button from '../../../common/Button'; +import Icon from '../../../common/Icon'; + +const authUrls = { + github: '/auth-github', + google: '/auth/google/' +}; + +const labels = { + github: 'Login with GitHub', + google: 'Login with Google' +}; + +const services = { + github: 'github', + google: 'google' +}; + +const StyledButton = styled(Button)` + width: ${remSize(300)}; + + > * + * { + margin-left: ${remSize(10)}; + } +`; + +const StyledIcon = styled(Icon)` + width: ${remSize(32)}; + height: ${remSize(32)}; +`; + +function SocialAuthButton({ service }) { + return ( + + + {labels[service]} + + ); +} + +SocialAuthButton.services = services; + +SocialAuthButton.propTypes = { + service: PropTypes.oneOf(['github', 'google']).isRequired +}; + +export default SocialAuthButton; diff --git a/client/modules/User/components/SocialAuthButton.stories.jsx b/client/modules/User/components/SocialAuthButton.stories.jsx new file mode 100644 index 00000000..7433bd27 --- /dev/null +++ b/client/modules/User/components/SocialAuthButton.stories.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import SocialAuthButton from './SocialAuthButton'; + +export default { + title: 'User/components/SocialAuthButton', + component: SocialAuthButton +}; + +export const Github = () => ( + Log in with Github +); + +export const Google = () => ( + Sign up with Google +); diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx index 54157061..ed1c3a30 100644 --- a/client/modules/User/pages/AccountView.jsx +++ b/client/modules/User/pages/AccountView.jsx @@ -8,8 +8,7 @@ import { Helmet } from 'react-helmet'; import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions'; import AccountForm from '../components/AccountForm'; import { validateSettings } from '../../../utils/reduxFormUtils'; -import GithubButton from '../components/GithubButton'; -import GoogleButton from '../components/GoogleButton'; +import SocialAuthButton from '../components/SocialAuthButton'; import APIKeyForm from '../components/APIKeyForm'; import Nav from '../../../components/Nav'; @@ -24,8 +23,8 @@ function SocialLoginPanel(props) {

Use your GitHub or Google account to log into the p5.js Web Editor.

- - + + ); } diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx index e51490de..0690f93e 100644 --- a/client/modules/User/pages/DashboardView.jsx +++ b/client/modules/User/pages/DashboardView.jsx @@ -2,8 +2,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import { browserHistory, Link } from 'react-router'; +import { browserHistory } from 'react-router'; import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions'; + +import Button from '../../../common/Button'; + import Nav from '../../../components/Nav'; import Overlay from '../../App/components/Overlay'; @@ -79,16 +82,16 @@ class DashboardView extends React.Component { case TabKey.collections: return this.isOwner() && ( - + ); case TabKey.sketches: default: return ( - {this.isOwner() && New sketch} + {this.isOwner() && } ); diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx index d2e37f01..ca3ca0c4 100644 --- a/client/modules/User/pages/LoginView.jsx +++ b/client/modules/User/pages/LoginView.jsx @@ -6,8 +6,7 @@ import { Helmet } from 'react-helmet'; import { validateAndLoginUser } from '../actions'; import LoginForm from '../components/LoginForm'; import { validateLogin } from '../../../utils/reduxFormUtils'; -import GithubButton from '../components/GithubButton'; -import GoogleButton from '../components/GoogleButton'; +import SocialAuthButton from '../components/SocialAuthButton'; import Nav from '../../../components/Nav'; class LoginView extends React.Component { @@ -41,8 +40,10 @@ class LoginView extends React.Component {

Log In

Or

- - +
+ + +

Don't have an account?  Sign Up diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss index a42a510c..60749507 100644 --- a/client/styles/components/_dashboard-header.scss +++ b/client/styles/components/_dashboard-header.scss @@ -83,8 +83,3 @@ .dashboard-header__actions > *:not(:first-child) { margin-left: #{15 / $base-font-size}rem; } - -.dashboard__action-button { - flex-grow: 0; - @extend %button; -} diff --git a/client/styles/components/_form-container.scss b/client/styles/components/_form-container.scss index a2e6726d..6ec7dcdf 100644 --- a/client/styles/components/_form-container.scss +++ b/client/styles/components/_form-container.scss @@ -57,3 +57,7 @@ .form-container__exit-button { @include icon(); } + +.form-container__stack > * + * { + margin-top: #{10 / $base-font-size}rem; +} diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss index 8f3ade0e..0f9bb56f 100644 --- a/client/styles/components/_forms.scss +++ b/client/styles/components/_forms.scss @@ -9,6 +9,10 @@ } } +.form > * + * { + margin-top: #{12 / $base-font-size}rem; +} + .form--inline { display: flex; align-items: center; @@ -78,20 +82,25 @@ } .form [type="submit"] { - @extend %button; - padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem; - margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0; + margin-left: auto; + margin-right: auto; } -.form [type="submit"][disabled] { - cursor: not-allowed; -} +// .form [type="submit"] { +// @extend %button; +// padding: #{8 / $base-font-size}rem #{25 / $base-font-size}rem; +// margin: #{39 / $base-font-size}rem 0 #{24 / $base-font-size}rem 0; +// } -.form--inline [type="submit"] { - margin: 0 0 0 #{24 / $base-font-size}rem; -} +// .form [type="submit"][disabled] { +// cursor: not-allowed; +// } -.form [type="submit"][disabled], -.form--inline [type="submit"][disabled] { - cursor: not-allowed; -} +// .form--inline [type="submit"] { +// margin: 0 0 0 #{24 / $base-font-size}rem; +// } + +// .form [type="submit"][disabled], +// .form--inline [type="submit"][disabled] { +// cursor: not-allowed; +// } diff --git a/client/styles/components/_github-button.scss b/client/styles/components/_github-button.scss deleted file mode 100644 index 23fe0571..00000000 --- a/client/styles/components/_github-button.scss +++ /dev/null @@ -1,35 +0,0 @@ -.github-button, -.google-button { - @include themify() { - @extend %button; - & path { - color: getThemifyVariable('primary-text-color'); - } - &:hover path, &:active path { - fill: $white; - } - &:hover, &:active { - color: getThemifyVariable('button-hover-color'); - background-color: getThemifyVariable('button-background-hover-color'); - border-color: getThemifyVariable('button-background-hover-color'); - } - } - width: #{300 / $base-font-size}rem; - display: flex; - justify-content: center; - align-items: center; - - & + & { - margin-top: #{10 / $base-font-size}rem; - } -} - -.github-icon { - margin-right: #{10 / $base-font-size}rem; -} - -.google-icon { - width: #{32 / $base-font-size}rem; - height: #{32 / $base-font-size}rem; - margin-right: #{10 / $base-font-size}rem; -} \ No newline at end of file diff --git a/client/styles/main.scss b/client/styles/main.scss index 00289b1a..8ba66af7 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -31,7 +31,6 @@ @import 'components/resizer'; @import 'components/overlay'; @import 'components/about'; -@import 'components/github-button'; @import 'components/forms'; @import 'components/toast'; @import 'components/timer';