wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-12 21:56:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adapt SignIn

Browse Source
This commit is contained in:
Chi Vinh Le
2018-08-27 15:51:59 +02:00
parent b7208cfa44
commit 39edec79cb
10 changed files with 118 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/auth/components/App.css
+2 -1
View File
@@ -12,6 +12,7 @@
.root {
width: 100%;
padding: var(--spacing-unit);
padding: var(--spacing-unit) var(--spacing-unit) calc(2 * var(--spacing-unit))
var(--spacing-unit);
box-sizing: border-box;
}
src/core/client/auth/components/ForgotPassword.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import React, { StatelessComponent } from "react";
import { Field, Form } from "react-final-form";
import { OnSubmit } from "talk-framework/lib/form";
import * as styles from "./SignIn.css";
import {
composeValidators,
@@ -35,7 +34,7 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
{({ handleSubmit }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeightContainer />
<Flex itemGutter="double" direction="column" className={styles.root}>
<Flex itemGutter="double" direction="column">
<Typography variant="heading1" align="center">
Forgot Password
</Typography>
src/core/client/auth/components/ResetPassword.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import React, { StatelessComponent } from "react";
import { Field, Form } from "react-final-form";
import { OnSubmit } from "talk-framework/lib/form";
import * as styles from "./SignIn.css";
import {
composeValidators,
@@ -38,7 +37,7 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
{({ handleSubmit }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeightContainer />
<Flex itemGutter="double" direction="column" className={styles.root}>
<Flex itemGutter="double" direction="column">
<Typography variant="heading1" align="center">
Reset Password
</Typography>
src/core/client/auth/components/SignIn.css
-6
View File
@@ -1,6 +0,0 @@
.root {
}
.forgotPassword {
text-align: right;
}
src/core/client/auth/components/SignIn.tsx
+77 -55
View File
@@ -1,3 +1,4 @@
import { Localized } from "fluent-react/compat";
import React, { StatelessComponent } from "react";
import { Field, Form } from "react-final-form";
import { OnSubmit } from "talk-framework/lib/form";
@@ -6,7 +7,6 @@ import {
composeValidators,
required,
validateEmail,
validatePassword,
} from "talk-framework/lib/validation";
import {
@@ -14,6 +14,7 @@ import {
CallOut,
Flex,
FormField,
HorizontalGutter,
InputLabel,
TextField,
Typography,
@@ -21,7 +22,6 @@ import {
} from "talk-ui/components";
import AutoHeightContainer from "../containers/AutoHeightContainer";
import * as styles from "./SignIn.css";
interface FormProps {
email: string;
@@ -30,8 +30,8 @@ interface FormProps {
export interface SignInForm {
onSubmit: OnSubmit<FormProps>;
goToSignUp: () => void;
goToForgotPassword: () => void;
onGotoSignUp: () => void;
onGotoForgotPassword: () => void;
}
const SignIn: StatelessComponent<SignInForm> = props => {
@@ -40,10 +40,12 @@ const SignIn: StatelessComponent<SignInForm> = props => {
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeightContainer />
<Flex itemGutter="double" direction="column" className={styles.root}>
<Typography variant="heading1" align="center">
Sign in to join the conversation
</Typography>
<HorizontalGutter size="double">
<Localized id="signIn-signInToJoinHeader">
<Typography variant="heading1" align="center">
Sign in to join the conversation
</Typography>
</Localized>
{submitError && (
<CallOut color="error" fullWidth>
@@ -57,16 +59,24 @@ const SignIn: StatelessComponent<SignInForm> = props => {
>
{({ input, meta }) => (
<FormField>
<InputLabel>Email Address</InputLabel>
<TextField
name={input.name}
onChange={input.onChange}
value={input.value}
placeholder="Email Address"
/>
<Localized id="signIn-emailAddressLabel">
<InputLabel>Email Address</InputLabel>
</Localized>
<Localized
id="signIn-emailAddressTextfield"
attrs={{ placeholder: true }}
>
<TextField
name={input.name}
onChange={input.onChange}
value={input.value}
placeholder="Email Address"
fullWidth
/>
</Localized>
{meta.touched &&
(meta.error || meta.submitError) && (
<ValidationMessage>
<ValidationMessage fullWidth>
{meta.error || meta.submitError}
</ValidationMessage>
)}
@@ -74,63 +84,75 @@ const SignIn: StatelessComponent<SignInForm> = props => {
)}
</Field>
<Field
name="password"
validate={composeValidators(required, validatePassword)}
>
<Field name="password" validate={composeValidators(required)}>
{({ input, meta }) => (
<FormField>
<InputLabel>Password</InputLabel>
<TextField
name={input.name}
onChange={input.onChange}
value={input.value}
placeholder="Password"
type="password"
/>
<Localized id="signIn-passwordLabel">
<InputLabel>Password</InputLabel>
</Localized>
<Localized
id="signIn-passwordTextfield"
attrs={{ placeholder: true }}
>
<TextField
name={input.name}
onChange={input.onChange}
value={input.value}
placeholder="Password"
type="password"
fullWidth
/>
</Localized>
{meta.touched &&
(meta.error || meta.submitError) && (
<ValidationMessage>
<ValidationMessage fullWidth>
{meta.error || meta.submitError}
</ValidationMessage>
)}
<span className={styles.forgotPassword}>
<Button
variant="underlined"
color="primary"
size="small"
onClick={props.goToForgotPassword}
>
Forgot your password?
</Button>
</span>
<Flex justifyContent="flex-end">
<Localized id="signIn-forgotYourPassword">
<Button
variant="underlined"
color="primary"
size="small"
onClick={props.onGotoForgotPassword}
>
Forgot your password?
</Button>
</Localized>
</Flex>
</FormField>
)}
</Field>
<div>
<Localized id="signIn-signInAndJoinButton">
<Button
variant="filled"
color="primary"
size="large"
fullWidth
type="submit"
fullWidth
>
Sign in and join the conversation
</Button>
<Flex itemGutter="half" justifyContent="center">
<Typography>Don't have an account?</Typography>
<Button
variant="underlined"
size="small"
color="primary"
onClick={props.goToSignUp}
>
Sign Up
</Button>
</Flex>
</div>
</Flex>
</Localized>
<Flex justifyContent="center">
<Localized
id="signIn-noAccountSignUp"
button={
<Button
variant="underlined"
size="small"
color="primary"
onClick={props.onGotoSignUp}
/>
}
>
<Typography variant="bodyCopy" container={Flex}>
{"Don't have an account? <button>Sign Up</button>"}
</Typography>
</Localized>
</Flex>
</HorizontalGutter>
</form>
)}
</Form>
src/core/client/auth/components/SignUp.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ interface FormProps {
export interface SignUpForm {
onSubmit: OnSubmit<FormProps>;
goToSignIn: () => void;
onGotoSignIn: () => void;
}
const SignUp: StatelessComponent<SignUpForm> = props => {
@@ -179,7 +179,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
variant="underlined"
size="small"
color="primary"
onClick={props.goToSignIn}
onClick={props.onGotoSignIn}
>
Sign In
</Button>
src/core/client/auth/containers/SignInContainer.tsx
+6 -19
View File
@@ -13,21 +13,7 @@ interface SignInContainerProps {
setView: SetViewMutation;
}
interface SignUpContainerState {
error: string | null;
}
export type View = "SIGN_UP" | "FORGOT_PASSWORD";
class SignInContainer extends Component<
SignInContainerProps,
SignUpContainerState
> {
private setView = (view: View) => {
this.props.setView({
view,
});
};
class SignInContainer extends Component<SignInContainerProps> {
private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
try {
await this.props.signIn(input);
@@ -36,14 +22,15 @@ class SignInContainer extends Component<
return { [FORM_ERROR]: error.message };
}
};
private goToForgotPassword = () => this.setView("FORGOT_PASSWORD");
private goToSignUp = () => this.setView("SIGN_UP");
private goToForgotPassword = () =>
this.props.setView({ view: "FORGOT_PASSWORD" });
private goToSignUp = () => this.props.setView({ view: "SIGN_UP" });
public render() {
return (
<SignIn
onSubmit={this.onSubmit}
goToForgotPassword={this.goToForgotPassword}
goToSignUp={this.goToSignUp}
onGotoForgotPassword={this.goToForgotPassword}
onGotoSignUp={this.goToSignUp}
/>
);
}
src/core/client/auth/containers/SignUpContainer.tsx
+3 -17
View File
@@ -14,21 +14,7 @@ interface SignUpContainerProps {
setView: SetViewMutation;
}
interface SignUpContainerState {
error: string | null;
}
export type View = "SIGN_IN";
class SignUpContainer extends Component<
SignUpContainerProps,
SignUpContainerState
> {
private setView = (view: View) => {
this.props.setView({
view,
});
};
class SignUpContainer extends Component<SignUpContainerProps> {
private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
try {
return await this.props.signUp(input);
@@ -37,9 +23,9 @@ class SignUpContainer extends Component<
return { [FORM_ERROR]: error.message };
}
};
private goToSignIn = () => this.setView("SIGN_IN");
private goToSignIn = () => this.props.setView({ view: "SIGN_IN" });
public render() {
return <SignUp onSubmit={this.onSubmit} goToSignIn={this.goToSignIn} />;
return <SignUp onSubmit={this.onSubmit} onGotoSignIn={this.goToSignIn} />;
}
}
src/core/client/ui/shared/typography.css
+7 -7
View File
@@ -1,7 +1,7 @@
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-display: swap;
font-display: block;
font-weight: 300;
src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
url("typeface-source-sans-pro/files/source-sans-pro-latin-300.woff2")
@@ -13,7 +13,7 @@
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-display: swap;
font-display: block;
font-weight: 400;
src: local("Source Sans Pro Regular italic"),
local("Source Sans Pro-Regularitalic"),
@@ -26,7 +26,7 @@
@font-face {
font-family: "Source Sans Pro";
font-style: normal;
font-display: swap;
font-display: block;
font-weight: 600;
src: local("Source Sans Pro SemiBold italic"),
local("Source Sans Pro-SemiBolditalic"),
@@ -39,7 +39,7 @@
@font-face {
font-family: "Manuale";
font-style: normal;
font-display: swap;
font-display: block;
font-weight: 400;
src: local("Manuale Regular "), local("Manuale-Regular"),
url("typeface-manuale/files/manuale-latin-400.woff2") format("woff2"),
@@ -49,7 +49,7 @@
@font-face {
font-family: "Manuale";
font-style: normal;
font-display: swap;
font-display: block;
font-weight: 600;
src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
url("typeface-manuale/files/manuale-latin-600.woff2") format("woff2"),
@@ -60,7 +60,7 @@
font-size: calc(24rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: var(--font-family-serif);
line-height: calc(32em / 24);
line-height: calc(26em / 24);
letter-spacing: calc(0.2em / 24);
color: var(--palette-text-primary);
}
@@ -69,7 +69,7 @@
font-size: calc(20rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: var(--font-family-serif);
line-height: calc(24em / 20);
line-height: calc(22em / 20);
letter-spacing: calc(0.2em / 20);
color: var(--palette-text-primary);
}
src/locales/en-US/auth.ftl
+19
View File
@@ -0,0 +1,19 @@
### Localization for the Auth Popup
## Sign In
signIn-signInToJoinHeader = Sign in to join the conversation
signIn-signInAndJoinButton = Sign in and join the conversation
signIn-emailAddressLabel = Email Address
signIn-emailAddressTextfield =
.placeholder = Email Address
signIn-passwordLabel = Password
signIn-passwordTextfield =
.placeholder = Password
signIn-forgotYourPassword = Forgot your password?
signIn-noAccountSignUp = Don't have an account? <button>Sign Up</button>