Added SignupForm

suzdalnitski · Aug 12, 2018 · cbc3a32 · cbc3a32
1 parent c8de721
commit cbc3a32
Show file tree

Hide file tree

Showing 18 changed files with 7,981 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,94 @@
+.vscode/**
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "target": "ES6"
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "medium",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@hocs/debounce-handler": "^0.4.1",
+    "@material-ui/core": "^1.4.3",
+    "axios": "^0.18.0",
+    "lodash": "^4.17.10",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "react-scripts": "1.1.4",
+    "recompose": "^0.28.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import SignupForm from './SignupForm';
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+        <SignupForm/>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/SignupForm/SignupForm.js b/src/SignupForm/SignupForm.js
@@ -0,0 +1,54 @@
+import React from "react";
+import { TextField, Button, Grid } from "@material-ui/core";
+import withFormLogic from "./logic";
+
+const SignupForm = ({
+    email, onChangeEmail, emailError,
+    password, onChangePassword, passwordError,
+    confirmPassword, onChangeConfirmPassword, confirmPasswordError,
+    onSubmit
+}) => (
+  <Grid container spacing={16}>
+    <Grid item xs={4}>
+      <TextField
+        label="Email"
+        value={email.value}
+        error={!!emailError}
+        helperText={emailError}
+        onChange={onChangeEmail}
+        margin="normal"
+      />
+
+      <TextField
+        label="Password"
+        value={password.value}
+        error={!!passwordError}
+        helperText={passwordError}
+        type="password"
+        onChange={onChangePassword}
+        margin="normal"
+      />
+
+      <TextField
+        label="Confirm Password"
+        value={confirmPassword.value}
+        error={!!confirmPasswordError}
+        helperText={confirmPasswordError}
+        type="password"
+        onChange={onChangeConfirmPassword}
+        margin="normal"
+      />
+
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={onSubmit}
+        margin="normal"
+      >
+        Sign Up
+      </Button>
+    </Grid>
+  </Grid>
+);
+
+export default withFormLogic(SignupForm);
diff --git a/src/SignupForm/index.js b/src/SignupForm/index.js
@@ -0,0 +1 @@
+export {default} from './SignupForm';
diff --git a/src/SignupForm/logic/index.js b/src/SignupForm/logic/index.js
@@ -0,0 +1,15 @@
+import { compose } from "recompose";
+
+import withTextFieldState from "./withTextFieldState";
+import withEmailError from "./withEmailError";
+import withPasswordError from "./withPasswordError";
+import withConfirmPasswordError from "./withConfirmPasswordError";
+import withSubmitForm from "./withSubmitForm";
+
+export default compose(
+    withTextFieldState,
+    withEmailError,
+    withPasswordError,
+    withConfirmPasswordError,
+    withSubmitForm
+);
diff --git a/src/SignupForm/logic/withConfirmPasswordError.js b/src/SignupForm/logic/withConfirmPasswordError.js
@@ -0,0 +1,22 @@
+import { withProps } from "recompose";
+
+const getConfirmPasswordError = (password, confirmPassword) => {
+  if (!confirmPassword.isDirty) {
+      return "";
+  }
+
+  const passwordsMatch = password.value === confirmPassword.value;
+
+  return !passwordsMatch ? "Passwords don't match." : "";
+};
+
+const withConfirmPasswordError = withProps(
+    (ownerProps) => ({
+        confirmPasswordError: getConfirmPasswordError(
+            ownerProps.password,
+            ownerProps.confirmPassword
+        )
+    })
+);
+
+export default withConfirmPasswordError;
diff --git a/src/SignupForm/logic/withEmailError.js b/src/SignupForm/logic/withEmailError.js
@@ -0,0 +1,18 @@
+import { withProps } from "recompose";
+
+const getEmailError = email => {
+  if (!email.isDirty) {
+    return "";
+  }
+
+  const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+  const isValidEmail = emailRegex.test(email.value);
+  return !isValidEmail ? "Invalid email." : "";
+};
+
+const withEmailError = withProps(ownerProps => ({
+  emailError: getEmailError(ownerProps.email)
+}));
+
+export default withEmailError;
diff --git a/src/SignupForm/logic/withPasswordError.js b/src/SignupForm/logic/withPasswordError.js
@@ -0,0 +1,20 @@
+import { withProps } from "recompose";
+
+const getPasswordError = password => {
+  if (!password.isDirty) {
+    return "";
+  }
+
+  const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
+
+  const isValidPassword = passwordRegex.test(password.value);
+  return !isValidPassword
+    ? "The password must contain minimum eight characters, at least one letter and one number."
+    : "";
+};
+
+const withPasswordError = withProps(ownerProps => ({
+  passwordError: getPasswordError(ownerProps.password)
+}));
+
+export default withPasswordError;
diff --git a/src/SignupForm/logic/withSubmitForm.js b/src/SignupForm/logic/withSubmitForm.js
@@ -0,0 +1,27 @@
+import { withProps } from "recompose";
+import axios from "axios";
+
+const handleSubmit = ({
+  email,
+  password,
+  emailError,
+  passwordError,
+  confirmPasswordError
+}) => {
+  if (emailError || passwordError || confirmPasswordError) {
+    return;
+  }
+
+  const data = {
+    email: email.value,
+    password: password.value
+  };
+
+  axios.post(`https://mywebsite.com/api/signup`, data);
+};
+
+const withSubmitForm = withProps(ownerProps => ({
+  onSubmit: handleSubmit(ownerProps)
+}));
+
+export default withSubmitForm;