Merge branch 'auth-views' of github.com:coralproject/talk into auth-views

* 'auth-views' of github.com:coralproject/talk: (27 commits) feat: added token blacklisting Compile schema when watching client (#1809) TSLint imports ordered Missing console.log Adding variable to the scope and contemplating undefined from the BE Tests updated Updated tests and latest changes User signedIn enters the stream Adding test for FormField, InputDescription and Spinner Updated docs Adding Spinner Component to UI and some corrections to the docs Working validation from the server using CallOuts Working validation from the server using CallOuts Handling error messages Working type submit for forms - Button Component Hitting the delete route and deleting the token SignOff Mutation Progress Working signin and comment Able to Sign In ...
2026-09-09 11:38:08 +08:00 · 2018-08-21 22:18:48 -03:00
parent 4c86d842dd 5aad008261
commit ec5cdb5681
96 changed files with 2025 additions and 761 deletions
@@ -1,5 +1,7 @@
 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,
@@ -17,14 +19,18 @@ import {
  ValidationMessage,
 } from "talk-ui/components";

-import * as styles from "./ForgotPassword.css";
+interface FormProps {
+  email: string;
+}

-const ForgotPassword: StatelessComponent = props => {
+export interface ForgotPasswordForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
  return (
-    // TODO (bc) add functionality when Forgot Password is done on the backend
-    // tslint:disable-next-line:no-empty
-    <Form onSubmit={() => {}}>
-      {({ handleSubmit, submitting }) => (
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit }) => (
        <form autoComplete="off" onSubmit={handleSubmit}>
          <Flex itemGutter direction="column" className={styles.root}>
            <Typography variant="heading1" align="center">
@@ -1,5 +1,7 @@
 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,
@@ -12,20 +14,26 @@ import {
  Button,
  Flex,
  FormField,
+  InputDescription,
  InputLabel,
  TextField,
  Typography,
  ValidationMessage,
 } from "talk-ui/components";

-import * as styles from "./ResetPassword.css";
+interface FormProps {
+  password: string;
+  confirmPassword: string;
+}

-const ResetPassword: StatelessComponent = props => {
+export interface ResetPasswordForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
  return (
-    // TODO (bc) add functionality when Reset Password is done on the backend
-    // tslint:disable-next-line:no-empty
-    <Form onSubmit={() => {}}>
-      {({ handleSubmit, submitting }) => (
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit }) => (
        <form autoComplete="off" onSubmit={handleSubmit}>
          <Flex itemGutter direction="column" className={styles.root}>
            <Typography variant="heading1" align="center">
@@ -38,9 +46,9 @@ const ResetPassword: StatelessComponent = props => {
              {({ input, meta }) => (
                <FormField>
                  <InputLabel>Password</InputLabel>
-                  <Typography variant="inputDescription">
+                  <InputDescription>
                    Must be at least 8 characters
-                  </Typography>
+                  </InputDescription>
                  <TextField
                    name={input.name}
                    onChange={input.onChange}
@@ -69,9 +77,9 @@ const ResetPassword: StatelessComponent = props => {
              {({ input, meta }) => (
                <FormField>
                  <InputLabel>Confirm Password</InputLabel>
-                  <Typography variant="inputDescription">
+                  <InputDescription>
                    Must be at least 8 characters
-                  </Typography>
+                  </InputDescription>
                  <TextField
                    name={input.name}
                    onChange={input.onChange}
@@ -1,8 +1,6 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+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,
@@ -13,6 +11,7 @@ import {

 import {
  Button,
+  CallOut,
  Flex,
  FormField,
  InputLabel,
@@ -20,6 +19,8 @@ import {
  Typography,
  ValidationMessage,
 } from "talk-ui/components";
+import { View } from "../containers/SignInContainer";
+import * as styles from "./SignIn.css";

 interface FormProps {
  email: string;
@@ -28,6 +29,8 @@ interface FormProps {

 export interface SignInForm {
  onSubmit: OnSubmit<FormProps>;
+  setView: (view: View) => void;
+  error: string | null;
 }

 const SignIn: StatelessComponent<SignInForm> = props => {
@@ -39,7 +42,11 @@ const SignIn: StatelessComponent<SignInForm> = props => {
            <Typography variant="heading1" align="center">
              Sign in to join the conversation
            </Typography>
-
+            {props.error && (
+              <CallOut color="error" fullWidth>
+                {props.error}
+              </CallOut>
+            )}
            <Field
              name="email"
              validate={composeValidators(required, validateEmail)}
@@ -70,9 +77,6 @@ const SignIn: StatelessComponent<SignInForm> = props => {
              {({ input, meta }) => (
                <FormField>
                  <InputLabel>Password</InputLabel>
-                  <Typography variant="inputDescription">
-                    Must be at least 8 characters
-                  </Typography>
                  <TextField
                    name={input.name}
                    onChange={input.onChange}
@@ -87,7 +91,14 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                      </ValidationMessage>
                    )}
                  <span className={styles.forgotPassword}>
-                    <Button variant="underlined" color="primary" size="small">
+                    <Button
+                      variant="underlined"
+                      color="primary"
+                      size="small"
+                      onClick={() => {
+                        props.setView("FORGOT_PASSWORD");
+                      }}
+                    >
                      Forgot your password?
                    </Button>
                  </span>
@@ -111,7 +122,14 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                className={styles.subFooter}
              >
                <Typography>Don't have an account?</Typography>
-                <Button variant="underlined" size="small" color="primary">
+                <Button
+                  variant="underlined"
+                  size="small"
+                  color="primary"
+                  onClick={() => {
+                    props.setView("SIGN_UP");
+                  }}
+                >
                  Sign Up
                </Button>
              </Flex>
@@ -10,17 +10,19 @@ import {
  validatePassword,
  validateUsername,
 } from "talk-framework/lib/validation";
-import * as styles from "./SignUp.css";
-
 import {
  Button,
+  CallOut,
  Flex,
  FormField,
+  InputDescription,
  InputLabel,
  TextField,
  Typography,
  ValidationMessage,
 } from "talk-ui/components";
+import { View } from "../containers/SignUpContainer";
+import * as styles from "./SignUp.css";

 interface FormProps {
  email: string;
@@ -31,6 +33,8 @@ interface FormProps {

 export interface SignUpForm {
  onSubmit: OnSubmit<FormProps>;
+  setView: (view: View) => void;
+  error: string | null;
 }

 const SignUp: StatelessComponent<SignUpForm> = props => {
@@ -43,7 +47,11 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
              <Typography variant="heading1" align="center">
                Sign up to join the conversation
              </Typography>
-
+              {props.error && (
+                <CallOut color="error" fullWidth>
+                  {props.error}
+                </CallOut>
+              )}
              <Field
                name="email"
                validate={composeValidators(required, validateEmail)}
@@ -74,10 +82,10 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                {({ input, meta }) => (
                  <FormField>
                    <InputLabel>Username</InputLabel>
-                    <Typography variant="inputDescription">
+                    <InputDescription>
                      A unique identifier displayed on your comments. You may
                      use “_” and “.”
-                    </Typography>
+                    </InputDescription>
                    <TextField
                      name={input.name}
                      onChange={input.onChange}
@@ -101,9 +109,9 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                {({ input, meta }) => (
                  <FormField>
                    <InputLabel>Password</InputLabel>
-                    <Typography variant="inputDescription">
+                    <InputDescription>
                      Must be at least 8 characters
-                    </Typography>
+                    </InputDescription>
                    <TextField
                      name={input.name}
                      onChange={input.onChange}
@@ -132,9 +140,9 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                {({ input, meta }) => (
                  <FormField>
                    <InputLabel>Confirm Password</InputLabel>
-                    <Typography variant="inputDescription">
+                    <InputDescription>
                      Must be at least 8 characters
-                    </Typography>
+                    </InputDescription>
                    <TextField
                      name={input.name}
                      onChange={input.onChange}
@@ -168,7 +176,14 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                className={styles.subFooter}
              >
                <Typography>Already have an account?</Typography>
-                <Button variant="underlined" size="small" color="primary">
+                <Button
+                  variant="underlined"
+                  size="small"
+                  color="primary"
+                  onClick={() => {
+                    props.setView("SIGN_IN");
+                  }}
+                >
                  Sign In
                </Button>
              </Flex>