Fix/demo routes

README.md

@@ -2,6 +2,8 @@
 
 Authentication forms for React.
 
+[Demo](https://altalogy.github.io/a6y-react-auth/#/)
+
 ## **Getting Started**
 
 **1) Install:**
@@ -71,7 +73,7 @@ param | type | description
 --- | --- | ---
 className[optional] | string | the CSS classes
 onSuccess[optional]] | (response: unknown) => void | onSuccess callback function
-onLinkHandler[optional] | it's a link callback function to redirect the app. If not declared it's using by pathname `/sign-in`
+onLinkHandler[optional] | it's a link callback function to redirect the app. If not declared it's using by pathname `sign-in`
 
 
 **example**
@@ -89,7 +91,7 @@ param | type | description
 --- | --- | ---
 className[optional] | string | the CSS classes
 onSuccess[optional]] | (response: unknown) => void | onSuccess callback function
-onLinkHandler[optional] | it's a link callback function to redirect the app. If not declared it's using by pathname `/sign-up`
+onLinkHandler[optional] | it's a link callback function to redirect the app. If not declared it's using by pathname `sign-up`
 
 
 **example**
@@ -108,7 +110,7 @@ param | type | description
 --- | --- | ---
 className[optional] | string | the CSS classes
 onSuccess[optional]] | (response: unknown) => void | onSuccess callback function
-onLinkHandler[optional] | (to: string) => void | it's a link callback function to redirect the app. If not declared it's using by pathname `/forgot-password`
+onLinkHandler[optional] | (to: string) => void | it's a link callback function to redirect the app. If not declared it's using by pathname `forgot-password`
 
 
 **example**
@@ -125,7 +127,7 @@ onLinkHandler[optional] | (to: string) => void | it's a link callback function t
 
 ### Getting started
 
-1. Clone repository with `git clone`
+1. Clone repository with `git clone` and go to `cd a6y-react-auth`
 
 2. Install:
 ```
@@ -139,6 +141,10 @@ $ npm link
 ```
 Full docs here: [npm-link](https://docs.npmjs.com/cli/v7/commands/npm-link)
 
+4. Then go to `/demo` and run `npm install && npm start`
+
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
 
 ### Storybook
 **build**

a6y-react-auth/package.json

@@ -1,6 +1,7 @@
 {
   "name": "a6y-react-auth",
-  "version": "0.0.1",
+  "version": "0.0.6",
+  "homepage": "https://altalogy.github.io/a6y-react-auth/",
   "description": "Authentication forms for React.",
   "main": "./lib/index.js",
   "module": "./lib/index.es.js",
@@ -69,7 +70,6 @@
   "bugs": {
     "url": "https://github.com/Altalogy/a6y-react-auth/issues"
   },
-  "homepage": "https://github.com/Altalogy/a6y-react-auth#readme",
   "peerDependencies": {
     "react": ">=16",
     "react-dom": "16.13.1"
@@ -78,7 +78,6 @@
     "react": ">=16",
     "react-dom": "16.13.1",
     "babel-loader": "^8.2.2",
-    "classnames": "^2.2.6",
     "copyfiles": "^2.4.1",
     "eslint": "^7.20.0",
     "eslint-config-prettier": "^8.1.0",
@@ -117,6 +116,7 @@
     "@typescript-eslint/parser": "^4.15.2"
   },
   "dependencies": {
+    "classnames": "^2.2.6",
     "aws-amplify": "^3.3.22"
   }
 }

a6y-react-auth/src/components/AuthComponent/AuthComponent.tsx

@@ -31,17 +31,14 @@ const AuthComponent = ({
   className = 'a6y-react-auth',
   onSuccess,
 }: IAuthProps): JSX.Element => {
-  const [currentForm, setCurrentForm] = useState('/sign-in')
-  const formhandler = (to: string) => {
-    setCurrentForm(to)
-  }
+  const [currentForm, setCurrentForm] = useState('sign-in')
   const getAuthForm = (): JSX.Element => {
     switch (currentForm) {
       case 'sign-up':
         return (
           <SignUp
             onSuccess={onSuccess ? onSuccess : undefined}
-            onLinkHandler={(to: string) => formhandler(to)}
+            onLinkHandler={(to: string) => setCurrentForm(to)}
           />
         )
       case 'forgot-password':

a6y-react-auth/src/components/EmailPasswordForm/EmailPasswordForm.tsx

@@ -50,6 +50,24 @@ function EmailPasswordForm({
     email: '',
     password: '',
   })
+  const [errorData, setErrorData] = useState({
+    email: false,
+    password: false,
+  })
+
+  const classNames = require('classnames')
+
+  const FormClassEmail = classNames({
+    [`${className}--error`]: errorData.email ? true : false,
+  })
+  const FormClassPassword = classNames({
+    [`${className}--error`]: errorData.password ? true : false,
+  })
+
+  const onInputChange = (e: { target: { value: string } }, target: string) => {
+    setErrorData({ ...errorData, [target]: e.target.value.length !== 0 })
+    setSignUpData({ ...signUpData, [target]: e.target.value })
+  }
 
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.stopPropagation()
@@ -64,33 +82,33 @@ function EmailPasswordForm({
         rules: ['CANNOT_BE_BLANK'],
       },
     ]
-    if (onClick && validate(data))
+    if (onClick && validate(data)) {
       onClick(signUpData.email, signUpData.password)
+    } else {
+      if (!errorData.email && !errorData.password)
+        setErrorData({ email: true, password: true })
+    }
   }
 
   return (
     <form className={`${className}`} onSubmit={e => onSubmit(e)}>
-      <div className={`${className}-group`}>
+      <div className={`${className}-group ${FormClassEmail}`}>
         <Input
           id='email'
           placeholder='Email'
           typeInput='email'
           label=''
-          onChange={(e: { target: { value: string } }) =>
-            setSignUpData({ ...signUpData, email: e.target.value })
-          }
+          onChange={e => onInputChange(e, 'email')}
           value={signUpData.email}
         />
       </div>
-      <div className={`${className}-group`}>
+      <div className={`${className}-group ${FormClassPassword}`}>
         <Input
           id='password'
           typeInput='password'
           placeholder='Password'
           label=''
-          onChange={(e: { target: { value: string } }) =>
-            setSignUpData({ ...signUpData, password: e.target.value })
-          }
+          onChange={e => onInputChange(e, 'password')}
           value={signUpData.password}
         />
       </div>

a6y-react-auth/src/components/ForgotPassword/ForgotPassword.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import FormLinks from '../FormLinks'
 import { ErrorBoundary, Input, Button } from '../UI'
+import validate from '../../utilities/validation'
 import '../../index.css'
 
 /**
@@ -42,27 +43,49 @@ const ForgotPassword = ({
   const [forgotPasswordData, setForgotPasswordData] = useState({
     email: '',
   })
-  const onSubmit = () => {
-    if (onClick) onClick(forgotPasswordData.email)
+  const [errorData, setErrorData] = useState({
+    email: false,
+  })
+  const classNames = require('classnames')
+
+  const FormClass = classNames({
+    [`${className}--error`]: errorData.email ? true : false,
+  })
+  const onInputChange = (e: { target: { value: string } }, target: string) => {
+    setErrorData({ ...errorData, [target]: e.target.value.length !== 0 })
+    setForgotPasswordData({
+      ...forgotPasswordData,
+      [target]: e.target.value,
+    })
+  }
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const data = [
+      {
+        value: forgotPasswordData.email,
+        rules: ['CANNOT_BE_BLANK'],
+      },
+    ]
+    if (onClick && validate(data)) {
+      onClick(forgotPasswordData.email)
+    } else {
+      if (!errorData.email) setErrorData({ email: true })
+    }
   }
   return (
     <div className={className}>
       <ErrorBoundary showError={apiError ? true : false}>
         {apiError}
       </ErrorBoundary>
       <form className={`${className}__form`} onSubmit={onSubmit}>
-        <div className={`${className}-group`}>
+        <div className={`${className}-group ${FormClass}`}>
           <Input
             id='email'
             placeholder='Email'
             typeInput='email'
             label=''
-            onChange={(e: { target: { value: string } }) =>
-              setForgotPasswordData({
-                ...forgotPasswordData,
-                email: e.target.value,
-              })
-            }
+            onChange={e => onInputChange(e, 'email')}
             value={forgotPasswordData.email}
           />
         </div>

a6y-react-auth/src/components/FormLinks/FormLinks.tsx

@@ -36,7 +36,7 @@ const FormLinks = ({
       <Link
         onClick={onLinkHandler}
         className={className + '__link'}
-        to='/forgot-password'
+        to='forgot-password'
       >
         Forgot Password
       </Link>
@@ -49,7 +49,7 @@ const FormLinks = ({
             <Link
               onClick={onLinkHandler}
               className={className + '__link'}
-              to='/sign-up'
+              to='sign-up'
             >
               Sign Up
             </Link>
@@ -62,7 +62,7 @@ const FormLinks = ({
             <Link
               onClick={onLinkHandler}
               className={className + '__link'}
-              to='/sign-in'
+              to='sign-in'
             >
               Sign In
             </Link>
@@ -74,14 +74,14 @@ const FormLinks = ({
             <Link
               onClick={onLinkHandler}
               className={className + '__link'}
-              to='/sign-in'
+              to='sign-in'
             >
               Sign In
             </Link>
             <Link
               onClick={onLinkHandler}
               className={className + '__link'}
-              to='/sign-up'
+              to='sign-up'
             >
               Sign Up
             </Link>

a6y-react-auth/src/components/UI/ErrorBoundary/ErrorBoundary.css

@@ -7,6 +7,7 @@
 
 .a6y-react-auth__error-boundary--primary {
   padding: 10px 15px;
+  margin-bottom: 10px;
 }
 
 .a6y-react-auth__error-boundary--primary.a6y-react-auth__error-boundary--warning,

a6y-react-auth/src/index.css

@@ -3,4 +3,8 @@
   max-width: 320px;
   margin: auto;
   box-shadow: 0 1px 10px 1px rgb(0 0 0 / 8%), 0 1px 2px -1px rgb(0 0 0 / 6%);
+}
+
+.a6y-react-auth__form--error label.a6y-react-auth__label input.a6y-react-auth__label__input {
+  border: 1px solid #DC2626;
 }