diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx index 4fe34d3a1..f2537db83 100644 --- a/src/core/client/auth/components/App.tsx +++ b/src/core/client/auth/components/App.tsx @@ -1,23 +1,25 @@ -import * as React from "react"; -import { StatelessComponent } from "react"; +import React, { StatelessComponent } from "react"; +import * as styles from "./App.css"; import ForgotPasswordContainer from "../containers/ForgotPasswordContainer"; import ResetPasswordContainer from "../containers/ResetPasswordContainer"; import SignInContainer from "../containers/SignInContainer"; import SignUpContainer from "../containers/SignUpContainer"; +// TODO: (cvle) Remove %future added value when we have Relay 1.6 +// https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2 +export type View = + | "SIGN_UP" + | "SIGN_IN" + | "FORGOT_PASSWORD" + | "RESET_PASSWORD" + | "%future added value"; + export interface AppProps { - // TODO: (cvle) Remove %future added value when we have Relay 1.6 - // https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2 - view: - | "SIGN_UP" - | "SIGN_IN" - | "FORGOT_PASSWORD" - | "RESET_PASSWORD" - | "%future added value"; + view: View; } -const App: StatelessComponent = ({ view }) => { +const renderView = (view: View) => { switch (view) { case "SIGN_UP": return ; @@ -32,4 +34,8 @@ const App: StatelessComponent = ({ view }) => { } }; +const App: StatelessComponent = ({ view }) => ( +
{renderView(view)}
+); + export default App; diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx index 0c9191a5a..940f2c3ec 100644 --- a/src/core/client/auth/components/SignIn.tsx +++ b/src/core/client/auth/components/SignIn.tsx @@ -19,7 +19,7 @@ import { Typography, ValidationMessage, } from "talk-ui/components"; -import { View } from "../containers/SignInContainer"; + import * as styles from "./SignIn.css"; interface FormProps { @@ -29,7 +29,8 @@ interface FormProps { export interface SignInForm { onSubmit: OnSubmit; - setView: (view: View) => void; + goToSignUp: () => void; + goToForgotPassword: () => void; error: string | null; } @@ -95,9 +96,7 @@ const SignIn: StatelessComponent = props => { variant="underlined" color="primary" size="small" - onClick={() => { - props.setView("FORGOT_PASSWORD"); - }} + onClick={props.goToForgotPassword} > Forgot your password? @@ -126,9 +125,7 @@ const SignIn: StatelessComponent = props => { variant="underlined" size="small" color="primary" - onClick={() => { - props.setView("SIGN_UP"); - }} + onClick={props.goToSignUp} > Sign Up diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx index b80837a1d..169a06864 100644 --- a/src/core/client/auth/components/SignUp.tsx +++ b/src/core/client/auth/components/SignUp.tsx @@ -21,7 +21,7 @@ import { Typography, ValidationMessage, } from "talk-ui/components"; -import { View } from "../containers/SignUpContainer"; + import * as styles from "./SignUp.css"; interface FormProps { @@ -33,7 +33,7 @@ interface FormProps { export interface SignUpForm { onSubmit: OnSubmit; - setView: (view: View) => void; + goToSignIn: () => void; error: string | null; } @@ -160,7 +160,7 @@ const SignUp: StatelessComponent = props => { )} -
+
- + Already have an account? diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx index 5902fe372..3c3d16f89 100644 --- a/src/core/client/auth/containers/SignInContainer.tsx +++ b/src/core/client/auth/containers/SignInContainer.tsx @@ -44,11 +44,14 @@ class SignInContainer extends Component< } return undefined; }; + private goToForgotPassword = () => this.setView("FORGOT_PASSWORD"); + private goToSignUp = () => this.setView("SIGN_UP"); public render() { return ( ); diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx index 1a9f91a46..776dc2f32 100644 --- a/src/core/client/auth/containers/SignUpContainer.tsx +++ b/src/core/client/auth/containers/SignUpContainer.tsx @@ -44,11 +44,12 @@ class SignUpContainer extends Component< } return undefined; }; + private goToSignIn = () => this.setView("SIGN_IN"); public render() { return ( );