mirror of
https://github.com/OneUptime/oneuptime
synced 2024-11-22 15:24:55 +00:00
add animations on accounts app
This commit is contained in:
Baker Sekitoleko
parent
028b73d045
commit
6a720ddd3f
8
accounts/package-lock.json
generated
8
accounts/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 = <span>Enter your card details</span>;
|
||||
}
|
||||
return (
|
||||
<div id="main-body" className="box css" style={{ width: 500 }}>
|
||||
<div className="inner">
|
||||
<div className="title extra">
|
||||
<div>
|
||||
<h2>{header}</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<Fade>
|
||||
<div id="main-body" className="box css" style={{ width: 500 }}>
|
||||
<div className="inner">
|
||||
<div className="title extra">
|
||||
<div>
|
||||
<h2>{header}</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
id="card-form"
|
||||
onSubmit={handleSubmit(this.handleSubmit)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
<form
|
||||
id="card-form"
|
||||
onSubmit={handleSubmit(this.handleSubmit)}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
<div
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="cardName">
|
||||
Card Holder Name
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
name="cardName"
|
||||
id="cardName"
|
||||
placeholder="Card Holder Name"
|
||||
component={RenderField}
|
||||
required="required"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
marginTop: 0,
|
||||
width: 222,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="cardNumber">
|
||||
Card Number
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #bbb',
|
||||
height: 44,
|
||||
padding: '10px 12px',
|
||||
}}
|
||||
>
|
||||
<CardNumberElement
|
||||
{...createOptions()}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<span style={errorStyle}>
|
||||
{this.state.cardNumber}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
width: 222,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="cvv">CVC</label>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #bbb',
|
||||
height: 44,
|
||||
padding: '10px 12px',
|
||||
}}
|
||||
>
|
||||
<CardCVCElement
|
||||
{...createOptions()}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<span style={errorStyle}>
|
||||
{this.state.cardCvc}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
width: 222,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="expiry">Expiry Date</label>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #bbb',
|
||||
height: 44,
|
||||
padding: '10px 12px',
|
||||
}}
|
||||
>
|
||||
<CardExpiryElement
|
||||
{...createOptions()}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<span style={errorStyle}>
|
||||
{this.state.cardExpiry}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="address1">
|
||||
Street Address 1
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="address1"
|
||||
id="address1"
|
||||
placeholder="Street Address 1"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="address2">
|
||||
Street Address 2
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="address2"
|
||||
id="address2"
|
||||
placeholder="Street Address 2"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="city">City</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="city"
|
||||
id="city"
|
||||
placeholder="City"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="state">State</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="state"
|
||||
id="state"
|
||||
placeholder="State (Optional)"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="zipCode">
|
||||
Zip Code / Postal Code
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="zipCode"
|
||||
id="zipCode"
|
||||
placeholder="Zip Code or Postal Code"
|
||||
required="required"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="country">Country</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderCountrySelector}
|
||||
name="country"
|
||||
id="country"
|
||||
placeholder="Select Country"
|
||||
required="required"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
marginBottom: 30,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="promocode">
|
||||
Promo Code
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="promocode"
|
||||
id="promocode"
|
||||
placeholder="Promocode (Optional)"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
className="submit"
|
||||
style={{ width: '100%', maxWidth: '100%' }}
|
||||
>
|
||||
<button
|
||||
style={{ width: '100%' }}
|
||||
type="submit"
|
||||
className="button blue medium"
|
||||
id="create-account-button"
|
||||
disabled={this.props.register.requesting}
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
{!this.props.register.requesting && (
|
||||
<span>Create Fyipe Account</span>
|
||||
)}
|
||||
{this.props.register.requesting && (
|
||||
<ButtonSpinner />
|
||||
)}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
<span>
|
||||
<label htmlFor="cardName">
|
||||
Card Holder Name
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
name="cardName"
|
||||
id="cardName"
|
||||
placeholder="Card Holder Name"
|
||||
component={RenderField}
|
||||
required="required"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
marginTop: 0,
|
||||
width: 222,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="cardNumber">
|
||||
Card Number
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #bbb',
|
||||
height: 44,
|
||||
padding: '10px 12px',
|
||||
}}
|
||||
>
|
||||
<CardNumberElement
|
||||
{...createOptions()}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<span style={errorStyle}>
|
||||
{this.state.cardNumber}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
width: 222,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="cvv">CVC</label>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #bbb',
|
||||
height: 44,
|
||||
padding: '10px 12px',
|
||||
}}
|
||||
>
|
||||
<CardCVCElement
|
||||
{...createOptions()}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<span style={errorStyle}>
|
||||
{this.state.cardCvc}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
width: 222,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="expiry">
|
||||
Expiry Date
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #bbb',
|
||||
height: 44,
|
||||
padding: '10px 12px',
|
||||
}}
|
||||
>
|
||||
<CardExpiryElement
|
||||
{...createOptions()}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<span style={errorStyle}>
|
||||
{this.state.cardExpiry}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="address1">
|
||||
Street Address 1
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="address1"
|
||||
id="address1"
|
||||
placeholder="Street Address 1"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="address2">
|
||||
Street Address 2
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="address2"
|
||||
id="address2"
|
||||
placeholder="Street Address 2"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="city">City</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="city"
|
||||
id="city"
|
||||
placeholder="City"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="state">State</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="state"
|
||||
id="state"
|
||||
placeholder="State (Optional)"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="zipCode">
|
||||
Zip Code / Postal Code
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="zipCode"
|
||||
id="zipCode"
|
||||
placeholder="Zip Code or Postal Code"
|
||||
required="required"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="country">Country</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderCountrySelector}
|
||||
name="country"
|
||||
id="country"
|
||||
placeholder="Select Country"
|
||||
required="required"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text"
|
||||
style={{
|
||||
display: 'block',
|
||||
maxWidth: '50%',
|
||||
marginTop: 0,
|
||||
marginBottom: 30,
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<label htmlFor="promocode">
|
||||
Promo Code
|
||||
</label>
|
||||
<Field
|
||||
type="text"
|
||||
component={RenderField}
|
||||
name="promocode"
|
||||
id="promocode"
|
||||
placeholder="Promocode (Optional)"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
className="submit"
|
||||
style={{ width: '100%', maxWidth: '100%' }}
|
||||
>
|
||||
<button
|
||||
style={{ width: '100%' }}
|
||||
type="submit"
|
||||
className="button blue medium"
|
||||
id="create-account-button"
|
||||
disabled={
|
||||
this.props.register.requesting
|
||||
}
|
||||
>
|
||||
{!this.props.register.requesting && (
|
||||
<span>Create Fyipe Account</span>
|
||||
)}
|
||||
{this.props.register.requesting && (
|
||||
<ButtonSpinner />
|
||||
)}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<div>
|
||||
{step === 1 && (
|
||||
<UserForm
|
||||
submitForm={this.userFormSubmitted}
|
||||
error={this.props.register.error}
|
||||
location={this.props.location}
|
||||
/>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<CardForm
|
||||
planId={this.props.planId}
|
||||
error={this.props.register.error}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Fade>
|
||||
<div>
|
||||
{step === 1 && (
|
||||
<UserForm
|
||||
submitForm={this.userFormSubmitted}
|
||||
error={this.props.register.error}
|
||||
location={this.props.location}
|
||||
/>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<CardForm
|
||||
planId={this.props.planId}
|
||||
error={this.props.register.error}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Fade>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<div id="main-body" className="box css">
|
||||
<div className="inner">
|
||||
<form
|
||||
onSubmit={this.props.handleSubmit(this.submitForm)}
|
||||
className="request-reset"
|
||||
>
|
||||
<div className="request-reset-step">
|
||||
<div className="title">
|
||||
<h2>{header}</h2>
|
||||
</div>
|
||||
{this.props.resetPasswordState.success && (
|
||||
<p
|
||||
id="reset-password-success"
|
||||
className="message"
|
||||
>
|
||||
{' '}
|
||||
An email is on its way to you. Follow the
|
||||
instructions to reset your password. Please
|
||||
don't forget to check spam.{' '}
|
||||
</p>
|
||||
)}
|
||||
{!this.props.resetPasswordState.success && (
|
||||
<p className="message">
|
||||
{' '}
|
||||
Enter your email address below and we will
|
||||
send you a link to reset your password.{' '}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!this.props.resetPasswordState.success && (
|
||||
<div>
|
||||
{' '}
|
||||
<p className="text">
|
||||
<span>
|
||||
<label htmlFor="email">
|
||||
{' '}
|
||||
Your Email
|
||||
</label>
|
||||
<Field
|
||||
component={RenderField}
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="Your Email"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p className="submit">
|
||||
<button
|
||||
type="submit"
|
||||
className="button blue medium"
|
||||
disabled={
|
||||
this.props.resetPasswordState
|
||||
.requesting
|
||||
}
|
||||
>
|
||||
{!this.props.resetPasswordState
|
||||
.requesting && (
|
||||
<span>Reset Password</span>
|
||||
)}
|
||||
{this.props.resetPasswordState
|
||||
.requesting && (
|
||||
<ButtonSpinner />
|
||||
)}
|
||||
</button>
|
||||
</p>{' '}
|
||||
<Fade>
|
||||
<div id="main-body" className="box css">
|
||||
<div className="inner">
|
||||
<form
|
||||
onSubmit={this.props.handleSubmit(this.submitForm)}
|
||||
className="request-reset"
|
||||
>
|
||||
<div className="request-reset-step">
|
||||
<div className="title">
|
||||
<h2>{header}</h2>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
{this.props.resetPasswordState.success && (
|
||||
<p
|
||||
id="reset-password-success"
|
||||
className="message"
|
||||
>
|
||||
{' '}
|
||||
An email is on its way to you. Follow
|
||||
the instructions to reset your password.
|
||||
Please don't forget to check spam.{' '}
|
||||
</p>
|
||||
)}
|
||||
{!this.props.resetPasswordState.success && (
|
||||
<p className="message">
|
||||
{' '}
|
||||
Enter your email address below and we
|
||||
will send you a link to reset your
|
||||
password.{' '}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!this.props.resetPasswordState.success && (
|
||||
<div>
|
||||
{' '}
|
||||
<p className="text">
|
||||
<span>
|
||||
<label htmlFor="email">
|
||||
{' '}
|
||||
Your Email
|
||||
</label>
|
||||
<Field
|
||||
component={RenderField}
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="Your Email"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p className="submit">
|
||||
<button
|
||||
type="submit"
|
||||
className="button blue medium"
|
||||
disabled={
|
||||
this.props
|
||||
.resetPasswordState
|
||||
.requesting
|
||||
}
|
||||
>
|
||||
{!this.props.resetPasswordState
|
||||
.requesting && (
|
||||
<span>Reset Password</span>
|
||||
)}
|
||||
{this.props.resetPasswordState
|
||||
.requesting && (
|
||||
<ButtonSpinner />
|
||||
)}
|
||||
</button>
|
||||
</p>{' '}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<div id="wrap">
|
||||
<div id="header">
|
||||
<h1>
|
||||
<a aria-hidden={false} href="/">
|
||||
Fyipe
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* LOGIN BOX */}
|
||||
{!this.props.login.success &&
|
||||
this.props.login.error &&
|
||||
this.props.login.error === 'Verify your email first.' ? (
|
||||
<div>
|
||||
<MessageBox
|
||||
title="Your email is not verified."
|
||||
//eslint-disable-next-line
|
||||
message={`An email is on its way to you with new verification link. Please don't forget to check spam.`}
|
||||
>
|
||||
<div className="below-box">
|
||||
<p>
|
||||
Click{' '}
|
||||
<Link to="/accounts/user-verify/resend">
|
||||
here
|
||||
</Link>{' '}
|
||||
to resend verification link to your email.
|
||||
</p>
|
||||
</div>
|
||||
</MessageBox>
|
||||
<Fade>
|
||||
<div id="wrap">
|
||||
<div id="header">
|
||||
<h1>
|
||||
<a aria-hidden={false} href="/">
|
||||
Fyipe
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
) : (
|
||||
<LoginForm onSubmit={this.submitHandler} {...this.props} />
|
||||
)}
|
||||
|
||||
{/* FOOTER */}
|
||||
{!masterAdminExists &&
|
||||
!requestingMasterAdmin &&
|
||||
!DISABLE_SIGNUP && (
|
||||
<div id="signUpLink" className="below-box">
|
||||
<p>
|
||||
Don't have an account?{' '}
|
||||
<Link to="/accounts/register">Sign up</Link>.
|
||||
</p>
|
||||
{/* LOGIN BOX */}
|
||||
{!this.props.login.success &&
|
||||
this.props.login.error &&
|
||||
this.props.login.error === 'Verify your email first.' ? (
|
||||
<div>
|
||||
<MessageBox
|
||||
title="Your email is not verified."
|
||||
//eslint-disable-next-line
|
||||
message={`An email is on its way to you with new verification link. Please don't forget to check spam.`}
|
||||
>
|
||||
<div className="below-box">
|
||||
<p>
|
||||
Click{' '}
|
||||
<Link to="/accounts/user-verify/resend">
|
||||
here
|
||||
</Link>{' '}
|
||||
to resend verification link to your
|
||||
email.
|
||||
</p>
|
||||
</div>
|
||||
</MessageBox>
|
||||
</div>
|
||||
) : (
|
||||
<LoginForm
|
||||
onSubmit={this.submitHandler}
|
||||
{...this.props}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* END FOOTER */}
|
||||
<div id="footer_spacer" />
|
||||
<div id="bottom">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/accounts/forgot-password">
|
||||
Forgot Password
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://fyipe.com/legal/privacy">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://fyipe.com/support">Support</a>
|
||||
</li>
|
||||
<li className="last">
|
||||
<a href="https://hackerbay.io">© HackerBay, Inc.</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/* FOOTER */}
|
||||
{!masterAdminExists &&
|
||||
!requestingMasterAdmin &&
|
||||
!DISABLE_SIGNUP && (
|
||||
<div id="signUpLink" className="below-box">
|
||||
<p>
|
||||
Don't have an account?{' '}
|
||||
<Link to="/accounts/register">Sign up</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* END FOOTER */}
|
||||
<div id="footer_spacer" />
|
||||
<div id="bottom">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/accounts/forgot-password">
|
||||
Forgot Password
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://fyipe.com/legal/privacy">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://fyipe.com/support">Support</a>
|
||||
</li>
|
||||
<li className="last">
|
||||
<a href="https://hackerbay.io">
|
||||
© HackerBay, Inc.
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user