Merge pull request #8 from Altalogy/add/ForgotPassword

added ForgotPassword component

src/components/ForgotPassword/ForgotPassword.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+import FormLinks from '../FormLinks'
+import { ErrorBoundary, Input, Button } from '../UI'
+import '../../index.css'
+
+/**
+ * @typedef IForgotPasswordProps
+ * @props {string} [className] - the CSS classes
+ * @props {() => void} [onClick] - onClick handler launching after submit form
+ * @props {string} [apiError] - api error messages
+ */
+
+export interface IForgotPasswordProps {
+  className?: string
+  onClick?: () => void
+  apiError?: string
+}
+
+/**
+ * Renders the sign-in component
+ *
+ * @param  {string} [className] - the CSS classes
+ * @param  {() => void} [onClick] - onClick handler launching after submit form
+ * @param  {string} [apiError] - api error messages
+ *
+ * @example
+ * <ForgotPassword
+ *  className='a6y-react-auth__forgot-password'
+ *  onClick={onClick}
+ * />
+ */
+
+const ForgotPassword = ({
+  className = 'a6y-react-auth__forgot-password',
+  onClick,
+  apiError,
+}: IForgotPasswordProps): JSX.Element => {
+  const [forgotPasswordData, setForgotPasswordData] = useState({
+    email: '',
+  })
+  const onSubmit = () => {
+    if (onClick) onClick()
+  }
+  return (
+    <div className={className}>
+      <ErrorBoundary showError={apiError ? true : false}>
+        {apiError}
+      </ErrorBoundary>
+      <form className={`${className}__form`} onSubmit={onSubmit}>
+        <div className={`${className}-group`}>
+          <Input
+            id='email'
+            placeholder='Email'
+            typeInput='email'
+            label=''
+            onChange={(e: { target: { value: string } }) =>
+              setForgotPasswordData({
+                ...forgotPasswordData,
+                email: e.target.value,
+              })
+            }
+            value={forgotPasswordData.email}
+          />
+        </div>
+        <Button role='submit' style='primary'>
+          Reset password
+        </Button>
+      </form>
+      <FormLinks />
+    </div>
+  )
+}
+
+export default ForgotPassword

src/components/ForgotPassword/index.tsx

@@ -0,0 +1,2 @@
+import ForgotPassword from './ForgotPassword'
+export default ForgotPassword

src/components/SignIn/SignIn.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import EmailPasswordForm from '../EmailPasswordForm'
 import FormLinks from '../FormLinks'
 import { ErrorBoundary } from '../UI'
-import './SignIn.css'
+import '../../index.css'
 
 /**
  * @typedef ISignInProps

src/components/SignUp/SignUp.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import EmailPasswordForm from '../EmailPasswordForm'
 import FormLinks from '../FormLinks'
 import { ErrorBoundary } from '../UI'
-import './SignUp.css'
+import '../../index.css'
 
 /**
  * @typedef ISignUpProps

src/containers/ForgotPasswordContainer/ForgotPasswordContainer.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import ForgotPassword from '../../components/ForgotPassword'
+
+/**
+ * @typedef IForgotPasswordContainerProps
+ * @props {string} [className] - the CSS classes
+ */
+export interface IForgotPasswordContainerProps {
+  className?: string
+}
+
+/**
+ * Renders the sign-in component with API call
+ *
+ * @param  {string} [className] - the CSS classes
+ *
+ * @example
+ * <ForgotPasswordContainer
+ *  className='a6y-react-auth__forgot-password'
+ * />
+ */
+
+const ForgotPasswordContainer = ({
+  className,
+}: IForgotPasswordContainerProps): JSX.Element => {
+  const [apiError, setApiError] = useState(undefined)
+  async function signIn() {
+    try {
+      // sign in service
+    } catch (error) {
+      return setApiError(error)
+    }
+  }
+  return (
+    <div className={className ? className : 'a6y-react-auth__forgot-password'}>
+      <ForgotPassword onClick={signIn} apiError={apiError} />
+    </div>
+  )
+}
+
+export default ForgotPasswordContainer

src/containers/ForgotPasswordContainer/index.tsx

@@ -0,0 +1,2 @@
+import ForgotPasswordContainer from './ForgotPasswordContainer'
+export default ForgotPasswordContainer

src/containers/SignInContainer/SignInContainer.tsx

@@ -16,7 +16,7 @@ export interface ISignInContainerProps {
  *
  * @example
  * <SignInContainer
- *  className='a6y-react-auth-sign-in-cmp'
+ *  className='a6y-react-auth__sign-in'
  * />
  */
 

src/containers/SignUpContainer/SignUpContainer.tsx

@@ -17,7 +17,7 @@ export interface ISignUpContainerProps {
  *
  * @example
  * <SignUpContainer
- *  className='a6y-react-auth-sign-in-cmp'
+ *  className='a6y-react-auth__sign-in'
  * />
  */
 

src/components/SignIn/SignIn.css → src/index.css

@@ -1,4 +1,4 @@
-.a6y-react-auth__sign-in {
+.a6y-react-auth__sign-in,.a6y-react-auth__forgot-password,.a6y-react-auth__sign-up {
   padding: 2rem 1rem;
   max-width: 320px;
   margin: auto;

src/tests/components/ForgotPassword.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import ForgotPassword from '../../components/ForgotPassword'
+
+describe(`Component:ForgotPassword test`, () => {
+  it('renders without crashing', () => {
+    const rendered = render(<ForgotPassword />)
+    expect(rendered).toBeDefined
+  })
+})

src/tests/containers/ForgotPasswordContainer.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import ForgotPasswordContainer from '../../containers/ForgotPasswordContainer'
+
+describe(`Container:ForgotPasswordContainer test`, () => {
+  it('renders without crashing', () => {
+    const rendered = render(<ForgotPasswordContainer />)
+    expect(rendered).toBeDefined
+  })
+})

stories/components/ForgotPassword.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import ForgotPassword from '../../src/components/ForgotPassword'
+
+export const ForgotPasswordComponent: React.VFC<unknown> = args => (
+  <ForgotPassword {...args} />
+)
+
+export default {
+  title: 'Components/ForgotPassword',
+  component: ForgotPassword,
+} as Meta