From cf5a7e106183c606ff73e1dccfa524c29a3f33aa Mon Sep 17 00:00:00 2001 From: aravind289 Date: Fri, 24 Jul 2020 14:21:35 +0530 Subject: [PATCH 1/2] Google Oauth button redesigned and refactored the button component --- src/components/common/ui/googeButton.jsx | 13 +++++ src/components/common/ui/ui.module.css | 38 ++++++++++++ src/components/loginSignup/login.jsx | 36 +++++------- src/components/loginSignup/loginsignup.css | 39 ++++++++++++- src/components/loginSignup/signup.jsx | 65 +++++++++++++++------ src/images/g.png | Bin 0 -> 5994 bytes 6 files changed, 150 insertions(+), 41 deletions(-) create mode 100644 src/components/common/ui/googeButton.jsx create mode 100644 src/images/g.png diff --git a/src/components/common/ui/googeButton.jsx b/src/components/common/ui/googeButton.jsx new file mode 100644 index 00000000..c5aec8b1 --- /dev/null +++ b/src/components/common/ui/googeButton.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import styles from './ui.module.css' +import GoogleLogo from '../../../images/g.png' +export default function GoogleButton({ onClick, textLabel }) { + return ( +
+ + glogo + + {textLabel} +
+ ) +} diff --git a/src/components/common/ui/ui.module.css b/src/components/common/ui/ui.module.css index 96344572..59ac0add 100644 --- a/src/components/common/ui/ui.module.css +++ b/src/components/common/ui/ui.module.css @@ -71,3 +71,41 @@ transform: translate(24px, 0); } } + +/* googlebutton */ +.customBtn { + margin: 10px auto; + background: white; + color: #444; + width: 190px; + border-radius: 5px; + border: thin solid #888; + box-shadow: 1px 1px 1px grey; + white-space: nowrap; +} +.customBtn:hover { + cursor: pointer; +} +span.icon { + /* background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat; */ + display: inline-block; + vertical-align: middle; + width: 42px; + height: 42px; +} + +.googleLogo { + width: 80%; + position: relative; + top: 9%; +} + +span.buttonText { + display: inline-block; + vertical-align: middle; + padding-left: 7px; + padding-right: 42px; + font-size: 14px; + font-weight: bold; + /* Use the Roboto font that is loaded in the */ +} diff --git a/src/components/loginSignup/login.jsx b/src/components/loginSignup/login.jsx index 044adb6b..8bf20ba6 100644 --- a/src/components/loginSignup/login.jsx +++ b/src/components/loginSignup/login.jsx @@ -4,10 +4,10 @@ import { navigate } from '@reach/router' import { setAuthToken } from '../../helpers/storage' import Para from './bgpara' import Logo from '../../images/Keyboard.png' +import GoogleButton from '../common/ui/googeButton' import ButtonWithLoader from '../common/ui/button-with-loader' import './loginsignup.css' import { gapi } from 'gapi-script' -// import authenticate from './gapi' export default class Login extends Component { state = { @@ -21,10 +21,6 @@ export default class Login extends Component { userId: '', } - // componentDidMount() { - // this.onSignIn() - // } - handleInput = (stateName) => (e) => { e.preventDefault() this.setState({ @@ -119,8 +115,6 @@ export default class Login extends Component { // Sign the user in, and then retrieve their ID. auth2.signIn().then((googleUser) => { - console.log('chcek') - console.log(googleUser) this.displayGoogelUser(googleUser) }) }) @@ -128,15 +122,16 @@ export default class Login extends Component { displayGoogelUser = async (googleUser) => { if (googleUser) { - var profile = googleUser.getBasicProfile() - console.log('ID: ' + profile.getId()) // Don't send this directly to your server! - console.log('Full Name: ' + profile.getName()) - console.log('Given Name: ' + profile.getGivenName()) - console.log('Family Name: ' + profile.getFamilyName()) - console.log('Image URL: ' + profile.getImageUrl()) - console.log('Email: ' + profile.getEmail()) + // var profile = googleUser.getBasicProfile() + //do not remove this comment will use it for ref + // console.log('ID: ' + profile.getId()) // Don't send this directly to your server! + // console.log('Full Name: ' + profile.getName()) + // console.log('Given Name: ' + profile.getGivenName()) + // console.log('Family Name: ' + profile.getFamilyName()) + // console.log('Image URL: ' + profile.getImageUrl()) + // console.log('Email: ' + profile.getEmail()) var id_token = googleUser.getAuthResponse().id_token - console.log(id_token) + let obj = { token: id_token, } @@ -207,11 +202,11 @@ export default class Login extends Component { onClick={this.submitForm}> Login -
- -
+ +
Or
+
New Here?   @@ -219,7 +214,6 @@ export default class Login extends Component { Signup
- diff --git a/src/components/loginSignup/loginsignup.css b/src/components/loginSignup/loginsignup.css index 966222e7..1ea81f53 100644 --- a/src/components/loginSignup/loginsignup.css +++ b/src/components/loginSignup/loginsignup.css @@ -108,7 +108,7 @@ border-color: red; border-style: dashed; } -.txtboxRed { +.txtboxRed { border-color: red; border-style: dashed; } @@ -168,6 +168,43 @@ text-decoration-color: '#f0a500'; } +#customBtn { + margin: 10px auto; + background: white; + color: #444; + width: 190px; + border-radius: 5px; + border: thin solid #888; + box-shadow: 1px 1px 1px grey; + white-space: nowrap; +} +#customBtn:hover { + cursor: pointer; +} +span.icon { + /* background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat; */ + display: inline-block; + vertical-align: middle; + width: 42px; + height: 42px; +} + +.googleLogo { + width: 80%; + position: relative; + top: 9%; +} + +span.buttonText { + display: inline-block; + vertical-align: middle; + padding-left: 7px; + padding-right: 42px; + font-size: 14px; + font-weight: bold; + /* Use the Roboto font that is loaded in the */ +} + /* .signupBtn { font-family: 'DM Sans', sans-serif !important; font-style: normal; diff --git a/src/components/loginSignup/signup.jsx b/src/components/loginSignup/signup.jsx index 09171662..f4e4b484 100644 --- a/src/components/loginSignup/signup.jsx +++ b/src/components/loginSignup/signup.jsx @@ -6,9 +6,12 @@ import './loginsignup.css' import Logo from '../../images/Keyboard.png' import Para from './bgpara' import { gapi } from 'gapi-script' +import ButtonWithLoader from '../common/ui/button-with-loader' +import GoogleButton from '../common/ui/googeButton' export default class Login extends React.Component { state = { + isLoading: false, username: '', email: '', password: '', @@ -18,6 +21,8 @@ export default class Login extends React.Component { email: '', }, manualSignup: true, + errorResponse: '', + showGoogleButton: true, } user_id = null @@ -79,10 +84,16 @@ export default class Login extends React.Component { email: email, password: pwd, } + this.setState({ + isLoading: true, + }) try { const response = await signup(postData) setAuthToken(response.data.token) + this.setState({ + isLoading: false, + }) navigate('/') } catch (error) { console.log(error.response) @@ -127,8 +138,6 @@ export default class Login extends React.Component { // Sign the user in, and then retrieve their ID. auth2.signIn().then((googleUser) => { - console.log('chcek') - console.log(googleUser) this.displayGoogelUser(googleUser) }) }) @@ -137,12 +146,7 @@ export default class Login extends React.Component { displayGoogelUser = async (googleUser) => { if (googleUser) { var profile = googleUser.getBasicProfile() - console.log('ID: ' + profile.getId()) // Don't send this directly to your server! - console.log('Full Name: ' + profile.getName()) - console.log('Given Name: ' + profile.getGivenName()) - console.log('Family Name: ' + profile.getFamilyName()) - console.log('Image URL: ' + profile.getImageUrl()) - console.log('Email: ' + profile.getEmail()) + var id_token = googleUser.getAuthResponse().id_token if (id_token) { this.setState({ @@ -151,6 +155,7 @@ export default class Login extends React.Component { errors: { username: 'Please fill unique username', }, + showGoogleButton: false, }) this.user_id = id_token } @@ -171,12 +176,23 @@ export default class Login extends React.Component { username: name, token: this.user_id, } + this.setState({ + isLoading: true, + }) try { const response = await googleLoginSignup(obj) setAuthToken(response.data.token) + this.setState({ + isLoading: false, + }) navigate('/') } catch (e) { - console.log(e.response.data.error) + const errorMsg = e.response.data.error + this.setState({ + errorResponse: errorMsg, + isLoading: false, + showGoogleButton: true, + }) } } } @@ -194,7 +210,7 @@ export default class Login extends React.Component {
Sign Up
-
+


@@ -267,21 +283,32 @@ export default class Login extends React.Component { )}
- -
- -
+ + {this.state.showGoogleButton && ( + <> +
Or
+ + {/*
+ glogo + Sign Up With Google +
*/} + + )}
diff --git a/src/images/g.png b/src/images/g.png new file mode 100644 index 0000000000000000000000000000000000000000..69c20b97e21280645d8e770c8c29414eb6230c5b GIT binary patch literal 5994 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 Gk^ch@;Xu3q literal 0 HcmV?d00001 From 252f625abc20f180254640e72e9658ced8088b85 Mon Sep 17 00:00:00 2001 From: aravind289 Date: Fri, 24 Jul 2020 22:53:10 +0530 Subject: [PATCH 2/2] Created radio buttons for graph and few design changes --- .../arena/controllers/word-arena.jsx | 1 - .../dashboard/components/card.module.css | 12 ++-- .../dashboard/components/labels.jsx | 55 +++++++++++++------ .../dashboard/components/paragraphsCard.jsx | 20 +++++-- .../components/paragraphsCard.module.css | 21 +++++++ .../dashboard/components/progressCard.jsx | 25 ++++----- 6 files changed, 96 insertions(+), 38 deletions(-) diff --git a/src/components/arena/controllers/word-arena.jsx b/src/components/arena/controllers/word-arena.jsx index 40ae10a5..65b4e170 100644 --- a/src/components/arena/controllers/word-arena.jsx +++ b/src/components/arena/controllers/word-arena.jsx @@ -28,7 +28,6 @@ export default class TypingArena extends React.Component { letter, state: 'untyped', })) - // When userInput string is empty this is skipped resulting in default values userInput.split('').forEach((letter, idx) => { if (idx >= letters.length) { diff --git a/src/components/dashboard/components/card.module.css b/src/components/dashboard/components/card.module.css index 1c2889e1..bae75b3f 100644 --- a/src/components/dashboard/components/card.module.css +++ b/src/components/dashboard/components/card.module.css @@ -20,14 +20,18 @@ } .card h2 { - margin-left: 40px; - padding-top: 25px; + padding-top: 5px; + margin: 20px auto 10px 40px; font-weight: lighter; + /* color: #8c8c8c; */ + font-size: 1.4vw; + word-break: break-all; } .card p { - margin-left: 40px; + margin: 0 auto 0 30px; font-weight: lighter; color: #8c8c8c; - font-size: 24px; + font-size: 1.4vw; + word-break: break-all; } diff --git a/src/components/dashboard/components/labels.jsx b/src/components/dashboard/components/labels.jsx index 9c5bafcd..0510cbb2 100644 --- a/src/components/dashboard/components/labels.jsx +++ b/src/components/dashboard/components/labels.jsx @@ -1,21 +1,44 @@ import React from 'react' import styles from './labels.module.css' -export default function Labels({ data, orientation }) { - return ( -
- {data.map((label, i) => ( -
-
-

{label.title}

+export default class Labels extends React.Component { + state = { + selectedOption: 'Wpm', + } + + toggleRadioCheck = (e) => { + var option = e.target.value + this.setState({ + selectedOption: option, + }) + } + render() { + return ( +
+
+ +
- ))} -
- ) +
+ ) + } } diff --git a/src/components/dashboard/components/paragraphsCard.jsx b/src/components/dashboard/components/paragraphsCard.jsx index cc540329..cd5ca1b7 100644 --- a/src/components/dashboard/components/paragraphsCard.jsx +++ b/src/components/dashboard/components/paragraphsCard.jsx @@ -1,11 +1,9 @@ import React from 'react' import NestedDonutChart from '../../common/charts/nestedDonutChart' -import Labels from './labels' import Dropdown from './dropdown' import styles from './paragraphsCard.module.css' -const labelOrientation = 'vertical', - dropdownData = ['All Time', 'Weekly', 'Monthly'], +const dropdownData = ['All Time', 'Weekly', 'Monthly'], labelData = [ { title: 'Total', @@ -30,7 +28,21 @@ export default function ParagraphsCard() {
- +
+ {labelData.map((label, i) => ( +
+
+

{label.title}

+
+ ))} +
) diff --git a/src/components/dashboard/components/paragraphsCard.module.css b/src/components/dashboard/components/paragraphsCard.module.css index 81c7c2a9..ca95a50f 100644 --- a/src/components/dashboard/components/paragraphsCard.module.css +++ b/src/components/dashboard/components/paragraphsCard.module.css @@ -29,3 +29,24 @@ flex-direction: row; margin: 1.5rem 0; } +.labels { + display: flex; + flex-direction: row; +} + +.labelContainer { + display: flex; + align-items: center; + padding: 10px; +} + +.label { + width: 10px; + height: 10px; + background: #ffab00; + border-radius: 50%; +} + +.labelText { + margin-left: 10px; +} diff --git a/src/components/dashboard/components/progressCard.jsx b/src/components/dashboard/components/progressCard.jsx index 70bffe3c..09a361a1 100644 --- a/src/components/dashboard/components/progressCard.jsx +++ b/src/components/dashboard/components/progressCard.jsx @@ -5,18 +5,17 @@ import Button from './button' import Dropdown from './dropdown' import Labels from './labels' -const labelOrientation = 'horizontal', - dropdownOptions = ['All', 'Practise', 'Arena'], - labelData = [ - { - title: 'WPM', - color: '#F0A500', - }, - { - title: 'Accuracy', - color: '#EC486F', - }, - ] +const dropdownOptions = ['All', 'Practise', 'Arena'] +// labelData = [ +// { +// title: 'WPM', +// color: '#F0A500', +// }, +// { +// title: 'Accuracy', +// color: '#EC486F', +// }, +// ] export default class ProgressCard extends Component { state = { @@ -61,7 +60,7 @@ export default class ProgressCard extends Component {
- +