mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-26 14:57:18 +10:00
Add auth form to correct pages
This commit is contained in:
parent
98030f0aaa
commit
dd448d842e
49 changed files with 318 additions and 220 deletions
|
|
@ -10,10 +10,14 @@ import routesConfiguration, { flattenRoutes, pathByRouteName } from './routesCon
|
|||
export const fakeAuth = {
|
||||
isAuthenticated: false,
|
||||
authenticate(cb) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('fakeAuth: authenticate');
|
||||
this.isAuthenticated = true;
|
||||
window.setTimeout(cb, 100); // fake async
|
||||
},
|
||||
signout(cb) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('fakeAuth: signout');
|
||||
this.isAuthenticated = false;
|
||||
cb();
|
||||
window.setTimeout(cb, 100); // weird bug if async?
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import { Link, Redirect } from 'react-router';
|
||||
import { PageLayout } from '../../components';
|
||||
import { LoginForm, SignUpForm } from '../../containers';
|
||||
import { fakeAuth } from '../../Routes';
|
||||
|
||||
class AuthenticationPage extends Component {
|
||||
|
|
@ -8,10 +9,21 @@ class AuthenticationPage extends Component {
|
|||
super(props);
|
||||
this.state = { redirectToReferrer: false };
|
||||
|
||||
this.login = this.login.bind(this);
|
||||
this.handleLogIn = this.handleLogIn.bind(this);
|
||||
this.handleSignUp = this.handleSignUp.bind(this);
|
||||
}
|
||||
|
||||
login() {
|
||||
handleLogIn(values) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('log in with values:', values);
|
||||
fakeAuth.authenticate(() => {
|
||||
this.setState({ redirectToReferrer: true });
|
||||
});
|
||||
}
|
||||
|
||||
handleSignUp(values) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('sign up with values:', values);
|
||||
fakeAuth.authenticate(() => {
|
||||
this.setState({ redirectToReferrer: true });
|
||||
});
|
||||
|
|
@ -20,7 +32,7 @@ class AuthenticationPage extends Component {
|
|||
render() {
|
||||
const from = this.props.location.state && this.props.location.state.from
|
||||
? this.props.location.state.from
|
||||
: '/';
|
||||
: null;
|
||||
const { redirectToReferrer } = this.state;
|
||||
|
||||
const toLogin = <Link to={{ pathname: '/login', state: { from: from || '/' } }}>Log in</Link>;
|
||||
|
|
@ -28,9 +40,12 @@ class AuthenticationPage extends Component {
|
|||
<Link to={{ pathname: '/signup', state: { from: from || '/' } }}>Sign up</Link>
|
||||
);
|
||||
const alternativeMethod = this.props.tab === 'login' ? toSignup : toLogin;
|
||||
const currentMethod = this.props.tab === 'login' ? 'Log in' : 'Sign up';
|
||||
|
||||
const fromLoginMsg = from ? (
|
||||
const form = this.props.tab === 'login'
|
||||
? <LoginForm onSubmit={this.handleLogIn} />
|
||||
: <SignUpForm onSubmit={this.handleSignUp} />;
|
||||
|
||||
const fromLoginMsg = from && from.pathname ? (
|
||||
<p>
|
||||
You must log in to view the page at
|
||||
<code>{from.pathname}</code>
|
||||
|
|
@ -41,8 +56,8 @@ class AuthenticationPage extends Component {
|
|||
<PageLayout title={`Authentication page: ${this.props.tab} tab`}>
|
||||
{redirectToReferrer ? <Redirect to={from || '/'} /> : null}
|
||||
{fromLoginMsg}
|
||||
<button onClick={this.login}>{currentMethod}</button>
|
||||
<p>or {alternativeMethod}</p>
|
||||
{form}
|
||||
{alternativeMethod}
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import AuthenticationPage from './AuthenticationPage';
|
||||
|
||||
describe('AuthenticationPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<AuthenticationPage location={{ state: { from: '/protected' } }} />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,31 +115,77 @@ exports[`AuthenticationPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Authentication page: signup tab
|
||||
</h1>
|
||||
<p>
|
||||
You must log in to view the page at
|
||||
<code />
|
||||
</p>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign up
|
||||
</button>
|
||||
<p>
|
||||
or
|
||||
<a
|
||||
className=""
|
||||
href="/login"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Log in
|
||||
</a>
|
||||
</p>
|
||||
<form
|
||||
onSubmit={[Function]}>
|
||||
<label
|
||||
htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
name="email"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="email"
|
||||
value="" />
|
||||
<label
|
||||
htmlFor="firstName">
|
||||
First name
|
||||
</label>
|
||||
<input
|
||||
name="firstName"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
value="" />
|
||||
<label
|
||||
htmlFor="lastName">
|
||||
Last name
|
||||
</label>
|
||||
<input
|
||||
name="lastName"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
value="" />
|
||||
<label
|
||||
htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
name="password"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="password"
|
||||
value="" />
|
||||
<p>
|
||||
By confirming I accept the booking terms and conditions.
|
||||
</p>
|
||||
<button
|
||||
disabled={true}
|
||||
type="submit">
|
||||
Sign up
|
||||
</button>
|
||||
</form>
|
||||
<a
|
||||
className=""
|
||||
href="/login"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ const ChangeAccountPasswordForm = props => {
|
|||
const { handleSubmit, pristine, submitting } = props;
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label htmlFor="email">Email</label>
|
||||
<Field name="email" component="input" type="email" />
|
||||
<label htmlFor="newPassword1">New password</label>
|
||||
<Field name="newPassword1" component="input" type="password" />
|
||||
<label htmlFor="newPassword2">New password, again</label>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { Provider } from 'react-redux';
|
||||
import configureStore from '../../store';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import ChangeAccountPasswordForm from './ChangeAccountPasswordForm';
|
||||
|
||||
describe('ChangeAccountPasswordForm', () => {
|
||||
it('matches snapshot', () => {
|
||||
const store = configureStore();
|
||||
const component = renderer.create(
|
||||
(
|
||||
<Provider store={store}>
|
||||
<TestProvider>
|
||||
<ChangeAccountPasswordForm />
|
||||
</Provider>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -1,19 +1,6 @@
|
|||
exports[`ChangeAccountPasswordForm matches snapshot 1`] = `
|
||||
<form
|
||||
onSubmit={[Function]}>
|
||||
<label
|
||||
htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
name="email"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="email"
|
||||
value="" />
|
||||
<label
|
||||
htmlFor="newPassword1">
|
||||
New password
|
||||
|
|
|
|||
|
|
@ -5,14 +5,10 @@ const ChangePasswordForm = props => {
|
|||
const { handleSubmit, pristine, submitting } = props;
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label htmlFor="email">Email</label>
|
||||
<Field name="email" component="input" type="email" />
|
||||
<label htmlFor="newPassword1">New password</label>
|
||||
<Field name="newPassword1" component="input" type="password" />
|
||||
<label htmlFor="newPassword2">New password, again</label>
|
||||
<Field name="newPassword2" component="input" type="password" />
|
||||
<label htmlFor="password">Current password</label>
|
||||
<Field name="password" component="input" type="password" />
|
||||
<button type="submit" disabled={pristine || submitting}>Change password</button>
|
||||
</form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { Provider } from 'react-redux';
|
||||
import configureStore from '../../store';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import ChangePasswordForm from './ChangePasswordForm';
|
||||
|
||||
describe('ChangePasswordForm', () => {
|
||||
it('matches snapshot', () => {
|
||||
const store = configureStore();
|
||||
const component = renderer.create(
|
||||
(
|
||||
<Provider store={store}>
|
||||
<TestProvider>
|
||||
<ChangePasswordForm />
|
||||
</Provider>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -1,19 +1,6 @@
|
|||
exports[`ChangePasswordForm matches snapshot 1`] = `
|
||||
<form
|
||||
onSubmit={[Function]}>
|
||||
<label
|
||||
htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
name="email"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="email"
|
||||
value="" />
|
||||
<label
|
||||
htmlFor="newPassword1">
|
||||
New password
|
||||
|
|
@ -40,19 +27,6 @@ exports[`ChangePasswordForm matches snapshot 1`] = `
|
|||
onFocus={[Function]}
|
||||
type="password"
|
||||
value="" />
|
||||
<label
|
||||
htmlFor="password">
|
||||
Current password
|
||||
</label>
|
||||
<input
|
||||
name="password"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="password"
|
||||
value="" />
|
||||
<button
|
||||
disabled={true}
|
||||
type="submit">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import CheckoutPage from './CheckoutPage';
|
||||
|
||||
describe('CheckoutPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<CheckoutPage params={{ listingId: 'some-listing-id' }} />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`CheckoutPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Checkout page: some-listing-id
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import ContactDetailsPage from './ContactDetailsPage';
|
||||
|
||||
describe('ContactDetailsPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<ContactDetailsPage params={{ displayName: 'my-shop' }} />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Contact details
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import EditProfilePage from './EditProfilePage';
|
||||
|
||||
describe('EditProfilePage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<EditProfilePage params={{ displayName: 'my-shop' }} />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`EditProfilePage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Edit profile page with display name: my-shop
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import InboxPage from './InboxPage';
|
||||
|
||||
describe('InboxPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<InboxPage filter="inbox" />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`InboxPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
inbox page
|
||||
|
|
|
|||
|
|
@ -1,18 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import LandingPage from './LandingPage';
|
||||
|
||||
describe('LandingPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<IntlProvider locale="en">
|
||||
<BrowserRouter>
|
||||
<LandingPage />
|
||||
</BrowserRouter>
|
||||
</IntlProvider>
|
||||
<TestProvider>
|
||||
<LandingPage />
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`LandingPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Landing page
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import ListingPage from './ListingPage';
|
||||
|
||||
describe('ListingPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<ListingPage params={{ slug: 'really-nice-house-1234', id: 1234 }} />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`ListingPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Listing page with listing id: #1234
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { Provider } from 'react-redux';
|
||||
import configureStore from '../../store';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import LoginForm from './LoginForm';
|
||||
|
||||
describe('LoginForm', () => {
|
||||
it('matches snapshot', () => {
|
||||
const store = configureStore();
|
||||
const component = renderer.create(
|
||||
(
|
||||
<Provider store={store}>
|
||||
<TestProvider>
|
||||
<LoginForm />
|
||||
</Provider>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import ManageListingsPage from './ManageListingsPage';
|
||||
|
||||
describe('ManageListingsPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<ManageListingsPage />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`ManageListingsPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Manage listings
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import NotFoundPage from './NotFoundPage';
|
||||
|
||||
describe('NotFoundPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<NotFoundPage />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`NotFoundPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Page not found
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import OrderPage from './OrderPage';
|
||||
|
||||
describe('OrderPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<OrderPage params={{ id: 1234 }} />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`OrderPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Order page
|
||||
|
|
|
|||
|
|
@ -1,4 +1,16 @@
|
|||
import React from 'react';
|
||||
import { PageLayout } from '../../components';
|
||||
import { ChangePasswordForm } from '../../containers';
|
||||
|
||||
export default () => <PageLayout title="Type new password" />
|
||||
const changePassword = values => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('submit with values:', values);
|
||||
};
|
||||
|
||||
const PasswordChangePage = () => (
|
||||
<PageLayout title="Type new password">
|
||||
<ChangePasswordForm onSubmit={changePassword} />
|
||||
</PageLayout>
|
||||
);
|
||||
|
||||
export default PasswordChangePage;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import PasswordChangePage from './PasswordChangePage';
|
||||
|
||||
describe('PasswordChangePage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<PasswordChangePage />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,13 +115,43 @@ exports[`PasswordChangePage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Type new password
|
||||
</h1>
|
||||
<form
|
||||
onSubmit={[Function]}>
|
||||
<label
|
||||
htmlFor="newPassword1">
|
||||
New password
|
||||
</label>
|
||||
<input
|
||||
name="newPassword1"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="password"
|
||||
value="" />
|
||||
<label
|
||||
htmlFor="newPassword2">
|
||||
New password, again
|
||||
</label>
|
||||
<input
|
||||
name="newPassword2"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="password"
|
||||
value="" />
|
||||
<button
|
||||
disabled={true}
|
||||
type="submit">
|
||||
Change password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,16 @@
|
|||
import React from 'react';
|
||||
import { PageLayout } from '../../components';
|
||||
import { PasswordForgottenForm } from '../../containers';
|
||||
|
||||
export default () => <PageLayout title="Request new password" />
|
||||
const sendPasswordResetEmail = values => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('submit with values:', values);
|
||||
};
|
||||
|
||||
const PasswordForgottenPage = () => (
|
||||
<PageLayout title="Request new password">
|
||||
<PasswordForgottenForm onSubmit={sendPasswordResetEmail} />
|
||||
</PageLayout>
|
||||
);
|
||||
|
||||
export default PasswordForgottenPage;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import PasswordForgottenPage from './PasswordForgottenPage';
|
||||
|
||||
describe('PasswordForgottenPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<PasswordForgottenPage />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,13 +115,33 @@ exports[`PasswordForgottenPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Request new password
|
||||
</h1>
|
||||
<form
|
||||
onSubmit={[Function]}>
|
||||
<label
|
||||
htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
name="email"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="email"
|
||||
value="" />
|
||||
<p>
|
||||
We will send you instructions to your email.
|
||||
</p>
|
||||
<button
|
||||
disabled={true}
|
||||
type="submit">
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import PayoutPreferencesPage from './PayoutPreferencesPage';
|
||||
|
||||
describe('PayoutPreferencesPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<PayoutPreferencesPage />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`PayoutPreferencesPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Payout preferences
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import ProfilePage from './ProfilePage';
|
||||
|
||||
describe('ProfilePage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<ProfilePage params={{ displayName: 'most-awesome-shop' }} />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`ProfilePage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Profile page with display name: most-awesome-shop
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import SalesConversationPage from './SalesConversationPage';
|
||||
|
||||
describe('SalesConversationPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<SalesConversationPage params={{ id: 12345 }} />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`SalesConversationPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Sales conversation page
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import { SearchPageComponent } from './SearchPage';
|
||||
import reducer, { ADD_FILTER, addFilter } from './SearchPage.ducks';
|
||||
import { RoutesProvider } from '../../components';
|
||||
|
|
@ -10,11 +10,11 @@ describe('SearchPageComponent', () => {
|
|||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<RoutesProvider routes={routesConfiguration}>
|
||||
<SearchPageComponent />
|
||||
</RoutesProvider>
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@ exports[`SearchPageComponent matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Search page
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
import React from 'react';
|
||||
import { PageLayout } from '../../components';
|
||||
import { ChangeAccountPasswordForm } from '../../containers';
|
||||
|
||||
const changePassword = values => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('change password to values:', values);
|
||||
};
|
||||
|
||||
export default () => (
|
||||
<PageLayout title="Security">
|
||||
<p>Change password, delete account</p>
|
||||
<ChangeAccountPasswordForm onSubmit={changePassword} />
|
||||
</PageLayout>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import SecurityPage from './SecurityPage';
|
||||
|
||||
describe('SecurityPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
(
|
||||
<BrowserRouter>
|
||||
<TestProvider>
|
||||
<SecurityPage />
|
||||
</BrowserRouter>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -115,16 +115,59 @@ exports[`SecurityPage matches snapshot 1`] = `
|
|||
style={Object {}}>
|
||||
Security
|
||||
</a>
|
||||
<button
|
||||
onClick={[Function]}>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
<h1>
|
||||
Security
|
||||
</h1>
|
||||
<p>
|
||||
Change password, delete account
|
||||
</p>
|
||||
<form
|
||||
onSubmit={[Function]}>
|
||||
<label
|
||||
htmlFor="newPassword1">
|
||||
New password
|
||||
</label>
|
||||
<input
|
||||
name="newPassword1"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="password"
|
||||
value="" />
|
||||
<label
|
||||
htmlFor="newPassword2">
|
||||
New password, again
|
||||
</label>
|
||||
<input
|
||||
name="newPassword2"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="password"
|
||||
value="" />
|
||||
<label
|
||||
htmlFor="password">
|
||||
Current password
|
||||
</label>
|
||||
<input
|
||||
name="password"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="password"
|
||||
value="" />
|
||||
<p>
|
||||
Delete account (module)
|
||||
</p>
|
||||
<button
|
||||
disabled={true}
|
||||
type="submit">
|
||||
Save changes
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { Provider } from 'react-redux';
|
||||
import configureStore from '../../store';
|
||||
import { TestProvider } from '../../util/test-helpers';
|
||||
import SignUpForm from './SignUpForm';
|
||||
|
||||
describe('SignUpForm', () => {
|
||||
it('matches snapshot', () => {
|
||||
const store = configureStore();
|
||||
const component = renderer.create(
|
||||
(
|
||||
<Provider store={store}>
|
||||
<TestProvider>
|
||||
<SignUpForm />
|
||||
</Provider>
|
||||
</TestProvider>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ const Topbar = (props, context) => {
|
|||
<Link to="/account/contact-details" {...linkProps}>Contact details</Link>
|
||||
<Link to="/account/payout-preferences" {...linkProps}>Payout preferences</Link>
|
||||
<Link to="/account/security" {...linkProps}>Security</Link>
|
||||
<SignoutButton router={context.router} />
|
||||
{fakeAuth.isAuthenticated ? <SignoutButton router={context.router} /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
18
src/util/test-helpers.js
Normal file
18
src/util/test-helpers.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import { Provider } from 'react-redux';
|
||||
import configureStore from '../store';
|
||||
|
||||
export const TestProvider = props => {
|
||||
const store = configureStore();
|
||||
return (
|
||||
<IntlProvider locale="en">
|
||||
<BrowserRouter>
|
||||
<Provider store={store}>
|
||||
{props.children}
|
||||
</Provider>
|
||||
</BrowserRouter>
|
||||
</IntlProvider>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue