From 6a720ddd3fbc559c25f77523577a069a2887bc2d Mon Sep 17 00:00:00 2001 From: Baker Sekitoleko Date: Mon, 20 Jul 2020 21:22:11 +0300 Subject: [PATCH] add animations on accounts app --- accounts/package-lock.json | 8 + accounts/package.json | 1 + accounts/src/components/auth/CardForm.js | 663 +++++++++--------- accounts/src/components/auth/RegisterForm.js | 33 +- .../src/components/auth/ResetPasswordForm.js | 145 ++-- accounts/src/pages/Login.js | 136 ++-- 6 files changed, 510 insertions(+), 476 deletions(-) diff --git a/accounts/package-lock.json b/accounts/package-lock.json index b8ad6ff3b5..07ed37ec87 100644 --- a/accounts/package-lock.json +++ b/accounts/package-lock.json @@ -12011,6 +12011,14 @@ "react-lifecycles-compat": "^3.0.0" } }, + "react-reveal": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz", + "integrity": "sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-router": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", diff --git a/accounts/package.json b/accounts/package.json index 9fbc3c7e14..60767463ca 100755 --- a/accounts/package.json +++ b/accounts/package.json @@ -26,6 +26,7 @@ "react-frontload": "^1.0.3", "react-ga": "^2.5.3", "react-redux": "^5.0.7", + "react-reveal": "^1.2.2", "react-router-dom": "^4.2.2", "react-router-redux": "^4.0.8", "react-scripts": "^3.4.1", diff --git a/accounts/src/components/auth/CardForm.js b/accounts/src/components/auth/CardForm.js index 79e53c6b5c..b1f441bea6 100755 --- a/accounts/src/components/auth/CardForm.js +++ b/accounts/src/components/auth/CardForm.js @@ -4,6 +4,7 @@ import { Field, reduxForm } from 'redux-form'; import RenderCountrySelector from '../basic/CountrySelector'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; +import Fade from 'react-reveal/Fade'; import { RenderField } from '../basic/RenderField'; import { PricingPlan, Validate, env } from '../../config'; import { ButtonSpinner } from '../basic/Loader.js'; @@ -170,341 +171,347 @@ class CardForm extends Component { header = Enter your card details; } return ( -
-
-
-
-

{header}

-

- Your card will be charged $1.00 to check its - billability. You will be charged $ - {this.plan.amount}/ - {this.plan.type === 'month' ? 'mo' : 'yr'} after - your 14 day free trial. -

+ +
+
+
+
+

{header}

+

+ Your card will be charged $1.00 to check its + billability. You will be charged $ + {this.plan.amount}/ + {this.plan.type === 'month' ? 'mo' : 'yr'}{' '} + after your 14 day free trial. +

+
-
-
-
-

- - - - -

-

- - -

- -
- - {this.state.cardNumber} - - -

-
-
-

- - -

- -
- - {this.state.cardCvc} - - -

-

- - -

- -
- - {this.state.cardExpiry} - - -

-
-
-

- - - - -

-

- - - - -

-
-
-

- - - - -

-

- - - - -

-
-
-

- - - - -

-

- - - - -

-
-
-

- - - - -

-
-
-

- -

-
-
+ + + + +

+

+ + +

+ +
+ + {this.state.cardNumber} + + +

+
+
+

+ + +

+ +
+ + {this.state.cardCvc} + + +

+

+ + +

+ +
+ + {this.state.cardExpiry} + + +

+
+
+

+ + + + +

+

+ + + + +

+
+
+

+ + + + +

+

+ + + + +

+
+
+

+ + + + +

+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ +

+
+ +
-
+ ); } } diff --git a/accounts/src/components/auth/RegisterForm.js b/accounts/src/components/auth/RegisterForm.js index b2e1c0f097..45a10f9a53 100755 --- a/accounts/src/components/auth/RegisterForm.js +++ b/accounts/src/components/auth/RegisterForm.js @@ -3,6 +3,7 @@ import { reduxForm } from 'redux-form'; import UserForm from './UserForm'; import CardForm from './CardForm'; import { connect } from 'react-redux'; +import Fade from 'react-reveal/Fade'; import { signupUser, incrementStep, @@ -96,21 +97,23 @@ export class RegisterForm extends Component { render() { const { step } = this.props.register; return ( -
- {step === 1 && ( - - )} - {step === 2 && ( - - )} -
+ +
+ {step === 1 && ( + + )} + {step === 2 && ( + + )} +
+ ); } } diff --git a/accounts/src/components/auth/ResetPasswordForm.js b/accounts/src/components/auth/ResetPasswordForm.js index 1b883174d5..3f408cb56d 100755 --- a/accounts/src/components/auth/ResetPasswordForm.js +++ b/accounts/src/components/auth/ResetPasswordForm.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Field, reduxForm } from 'redux-form'; import { connect } from 'react-redux'; +import Fade from 'react-reveal/Fade'; import { Validate } from '../../config'; import { ButtonSpinner } from '../basic/Loader.js'; import { @@ -36,78 +37,82 @@ export class ResetPasswordForm extends Component { } return ( -
-
-
-
-
-

{header}

-
- {this.props.resetPasswordState.success && ( -

- {' '} - An email is on its way to you. Follow the - instructions to reset your password. Please - don't forget to check spam.{' '} -

- )} - {!this.props.resetPasswordState.success && ( -

- {' '} - Enter your email address below and we will - send you a link to reset your password.{' '} -

- )} - - {!this.props.resetPasswordState.success && ( -
- {' '} -

- - - - -

-

- -

{' '} + +
+
+ +
+
+

{header}

- )} -
- + {this.props.resetPasswordState.success && ( +

+ {' '} + An email is on its way to you. Follow + the instructions to reset your password. + Please don't forget to check spam.{' '} +

+ )} + {!this.props.resetPasswordState.success && ( +

+ {' '} + Enter your email address below and we + will send you a link to reset your + password.{' '} +

+ )} + + {!this.props.resetPasswordState.success && ( +
+ {' '} +

+ + + + +

+

+ +

{' '} +
+ )} +
+ +
-
+ ); } } diff --git a/accounts/src/pages/Login.js b/accounts/src/pages/Login.js index ef3608050f..951b4152f1 100755 --- a/accounts/src/pages/Login.js +++ b/accounts/src/pages/Login.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import Fade from 'react-reveal/Fade'; import LoginForm from '../components/auth/LoginForm'; import { loginUser, loginUserSso, loginError } from '../actions/login'; import MessageBox from '../components/MessageBox'; @@ -48,75 +49,84 @@ class LoginPage extends React.Component { } return ( -
- - - {/* LOGIN BOX */} - {!this.props.login.success && - this.props.login.error && - this.props.login.error === 'Verify your email first.' ? ( -
- -
-

- Click{' '} - - here - {' '} - to resend verification link to your email. -

-
- + +
+ - ) : ( - - )} - {/* FOOTER */} - {!masterAdminExists && - !requestingMasterAdmin && - !DISABLE_SIGNUP && ( -