merge fixed

Altalogy · Mar 8, 2021 · 0a27c93 · 0a27c93
2 parents 7f40e10 + ac83cce
commit 0a27c93
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 26 deletions.
diff --git a/src/components/AuthComponent/AuthComponent.tsx b/src/components/AuthComponent/AuthComponent.tsx
@@ -31,15 +31,30 @@ const AuthComponent = ({
   className = 'a6y-react-auth',
   onSuccess,
 }: IAuthProps): JSX.Element => {
-  const [currentForm] = useState('sign-in')
+  const [currentForm, setCurrentForm] = useState('/sign-in')
   const getAuthForm = (): JSX.Element => {
     switch (currentForm) {
       case 'sign-up':
-        return <SignUp onSuccess={onSuccess ? onSuccess : undefined} />
+        return (
+          <SignUp
+            onSuccess={onSuccess ? onSuccess : undefined}
+            onLinkHandler={(to: string) => setCurrentForm(to)}
+          />
+        )
       case 'forgot-password':
-        return <ForgotPassword onSuccess={onSuccess ? onSuccess : undefined} />
+        return (
+          <ForgotPassword
+            onSuccess={onSuccess ? onSuccess : undefined}
+            onLinkHandler={(to: string) => setCurrentForm(to)}
+          />
+        )
       default:
-        return <SignIn onSuccess={onSuccess ? onSuccess : undefined} />
+        return (
+          <SignIn
+            onSuccess={onSuccess ? onSuccess : undefined}
+            onLinkHandler={(to: string) => setCurrentForm(to)}
+          />
+        )
     }
   }
   return <div className={className}>{getAuthForm()}</div>

diff --git a/src/components/ForgotPassword/ForgotPassword.tsx b/src/components/ForgotPassword/ForgotPassword.tsx
@@ -8,12 +8,14 @@ import '../../index.css'
  * @props {string} [className] - the CSS classes
  * @props {(email: string) => void} [onClick] - onClick handler launching after submit form
  * @props {string} [apiError] - api error messages
+ * @props  {(to: string) => void} [onLinkHandler] - links onClick handler
  */
 
 export interface IForgotPasswordProps {
   className?: string
   onClick?: (email: string) => void
   apiError?: string
+  onLinkHandler?: (to: string) => void
 }
 
 /**
@@ -22,6 +24,7 @@ export interface IForgotPasswordProps {
  * @param  {string} [className] - the CSS classes
  * @param  {(email: string) => void} [onClick] - onClick handler launching after submit form
  * @param  {string} [apiError] - api error messages
+ * @param  {(to: string) => void} [onLinkHandler] - links onClick handler
  *
  * @example
  * <ForgotPassword
@@ -34,6 +37,7 @@ const ForgotPassword = ({
   className = 'a6y-react-auth__forgot-password',
   onClick,
   apiError,
+  onLinkHandler,
 }: IForgotPasswordProps): JSX.Element => {
   const [forgotPasswordData, setForgotPasswordData] = useState({
     email: '',
@@ -66,7 +70,7 @@ const ForgotPassword = ({
           Reset password
         </Button>
       </form>
-      <FormLinks />
+      <FormLinks onLinkHandler={onLinkHandler} />
     </div>
   )
 }

diff --git a/src/components/FormLinks/FormLinks.tsx b/src/components/FormLinks/FormLinks.tsx
@@ -6,30 +6,38 @@ import './FormLinks.css'
  * @typedef IFormLinksProps
  * @props {string} [className] - the CSS classes
  * @props {string} [path] - the name of route path
+ * @props  {(to: string) => void} [onLinkHandler] - links onClick handler
  */
 
 export interface IFormLinksProps {
   className?: string
   path?: string
+  onLinkHandler?: (to: string) => void
 }
 
 /**
  * Renders form component with links
  *
  * @param  {string} [className] - the CSS classes
  * @param {string} [path] - the name of route path
+ * @param  {(to: string) => void} [onLinkHandler] - links onClick handler
  *
  * @example
- * <FormLinks path='sign-in' className='a6y-react-auth-form' />
+ * <FormLinks onLinkHandler={() => void} path='sign-in' className='a6y-react-auth-form' />
  */
 
 const FormLinks = ({
   className = 'a6y-react-auth__form',
   path,
+  onLinkHandler,
 }: IFormLinksProps): JSX.Element => {
   function renderLinks(): JSX.Element {
-    const ForgotPassword = (): JSX.Element => (
-      <Link className={className + '__link'} to='/forgot-password'>
+    const ForgotPassword = (
+      <Link
+        onClick={onLinkHandler}
+        className={className + '__link'}
+        to='/forgot-password'
+      >
         Forgot Password
       </Link>
     )
@@ -38,7 +46,11 @@ const FormLinks = ({
         return (
           <>
             {ForgotPassword}
-            <Link className={className + '__link'} to='/sign-up'>
+            <Link
+              onClick={onLinkHandler}
+              className={className + '__link'}
+              to='/sign-up'
+            >
               Sign Up
             </Link>
           </>
@@ -47,13 +59,34 @@ const FormLinks = ({
         return (
           <>
             {ForgotPassword}
-            <Link className={className + '__link'} to='/sign-in'>
+            <Link
+              onClick={onLinkHandler}
+              className={className + '__link'}
+              to='/sign-in'
+            >
               Sign In
             </Link>
           </>
         )
       default:
-        return <>{ForgotPassword}</>
+        return (
+          <>
+            <Link
+              onClick={onLinkHandler}
+              className={className + '__link'}
+              to='/sign-in'
+            >
+              Sign In
+            </Link>
+            <Link
+              onClick={onLinkHandler}
+              className={className + '__link'}
+              to='/sign-up'
+            >
+              Sign Up
+            </Link>
+          </>
+        )
     }
   }
   return <div className={className + '__links'}>{renderLinks()}</div>

diff --git a/src/components/SignIn/SignIn.tsx b/src/components/SignIn/SignIn.tsx
@@ -9,12 +9,14 @@ import '../../index.css'
  * @props {string} [className] - the CSS classes
  * @props {(email: string, password: string) => void} [onClick] - onClick handler launching after submit form
  * @props {string} [apiError] - api error messages
+ * @props  {(to: string) => void} [onLinkHandler] - links onClick handler
  */
 
 export interface ISignInProps {
   className?: string
   onClick?: (email: string, password: string) => void
   apiError?: string
+  onLinkHandler?: (to: string) => void
 }
 
 /**
@@ -23,26 +25,29 @@ export interface ISignInProps {
  * @param  {string} [className] - the CSS classes
  * @param  {(email: string, password: string) => void} [onClick] - onClick handler launching after submit form
  * @param  {string} [apiError] - api error messages
+ * @param  {(to: string) => void} [onLinkHandler] - links onClick handler
  *
  * @example
  * <SignIn
  *  className='a6y-react-auth__sign-in'
  *  onClick={onClick}
+ *  onLinkHandler={onLinkHandler}
  * />
  */
 
 const SignIn = ({
   className = 'a6y-react-auth__sign-in',
   onClick,
   apiError,
+  onLinkHandler = undefined,
 }: ISignInProps): JSX.Element => {
   return (
     <div className={className}>
       <ErrorBoundary showError={apiError ? true : false}>
         {apiError}
       </ErrorBoundary>
       <EmailPasswordForm submitLabel='sign in' onClick={onClick} />
-      <FormLinks path='sign-in' />
+      <FormLinks onLinkHandler={onLinkHandler} path='sign-in' />
     </div>
   )
 }

diff --git a/src/components/SignUp/SignUp.tsx b/src/components/SignUp/SignUp.tsx
@@ -9,12 +9,14 @@ import '../../index.css'
  * @props {string} [className] - the CSS classes
  * @props {(email: string, password: string) => void} [onClick] - onClick handler launching after submit form
  * @props {string} [apiError] - api error messages
+ * @props {(to: string) => void} [onLinkHandler] - links onClick handler
  */
 
 export interface ISignUpProps {
   className?: string
   onClick?: (email: string, password: string) => void
   apiError?: string
+  onLinkHandler?: (to: string) => void
 }
 
 /**
@@ -23,26 +25,29 @@ export interface ISignUpProps {
  * @param  {string} [className] - the CSS classes
  * @param  {(email: string, password: string) => void} [onClick] - onClick handler launching after submit form
  * @param  {string} [apiError] - api error messages
+ * @param  {(to: string) => void} [onLinkHandler] - links onClick handler
  *
  * @example
  * <SignUp
  *  className='a6y-react-auth__sign-up'
  *  onClick={onClick}
+ *  onLinkHandler={onLinkHandler}
  * />
  */
 
 const SignUp = ({
   className = 'a6y-react-auth__sign-up',
   onClick,
   apiError,
+  onLinkHandler = undefined,
 }: ISignUpProps): JSX.Element => {
   return (
     <div className={className}>
       <ErrorBoundary showError={apiError ? true : false}>
         {apiError}
       </ErrorBoundary>
       <EmailPasswordForm submitLabel='sign up' onClick={onClick} />
-      <FormLinks path='sign-up' />
+      <FormLinks onLinkHandler={onLinkHandler} path='sign-up' />
     </div>
   )
 }

diff --git a/src/components/UI/Button/Button.css b/src/components/UI/Button/Button.css
@@ -8,7 +8,7 @@ button.a6y-react-auth__button {
   margin: 1rem auto;
 }
 
-button:hover {
+button.a6y-react-auth__button:hover {
   opacity: .7;
 }
 

diff --git a/src/components/UI/Link/Link.css b/src/components/UI/Link/Link.css
@@ -1,11 +1,19 @@
-a.a6y-react-auth__form__link--primary {
+.a6y-react-auth__form__link--primary {
   color: #2f5ef7;
+  background: transparent;
+  border: none;
 }
-a.a6y-react-auth__form__link--secondary {
+.a6y-react-auth__form__link--secondary {
   color: #172232;
+  background: transparent;
+  border: none;
 }
-a.a6y-react-auth__form__link {
+.a6y-react-auth__form__link {
   letter-spacing: normal;
   font-size: .9rem;
   margin: 5px 0;
+  cursor: pointer;
+  text-decoration: underline;
+  width: fit-content;
+  font-family: inherit;
 }
diff --git a/src/components/UI/Link/Link.tsx b/src/components/UI/Link/Link.tsx
@@ -14,7 +14,7 @@ import './Link.css'
 export interface ILinkProps {
   children: React.ReactNode
   className?: string
-  onClick?: () => void
+  onClick?: (to: string) => void
   to: string
   underline?: 'none' | 'hover' | 'always'
   style?: 'primary' | 'secondary' | 'custom'
@@ -52,16 +52,19 @@ const Link = ({
     [`${className}--${style}`]: style ? true : false,
   })
 
-  function handleLinkClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  function handleLinkClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
     e.preventDefault()
     e.stopPropagation()
-    if (onClick) onClick()
+    if (onClick) onClick(to)
   }
   if (onClick) {
     return (
-      <a href='#' onClick={e => handleLinkClick(e)} className={LinkClass}>
+      <button
+        onClick={e => handleLinkClick(e)}
+        className={className + ' ' + LinkClass}
+      >
         {children}
-      </a>
+      </button>
     )
   }
   return (

diff --git a/src/containers/ForgotPasswordContainer/ForgotPasswordContainer.tsx b/src/containers/ForgotPasswordContainer/ForgotPasswordContainer.tsx
@@ -6,17 +6,21 @@ import AuthService from '../../services/AuthService'
  * @typedef IForgotPasswordContainerProps
  * @props {string} [className] - the CSS classes
  * @props {(response: unknown) => void} [onSuccess] - onSuccess call function
+ * @props  {(to: string) => void} [onLinkHandler] - links onClick handler
  */
+
 export interface IForgotPasswordContainerProps {
   className?: string
   onSuccess?: (response: unknown) => void
+  onLinkHandler?: (to: string) => void
 }
 
 /**
  * Renders the sign-in component with API call
  *
  * @param  {string} [className] - the CSS classes
  * @param  {(response: unknown) => void} [onSuccess] - onSuccess call function
+ * @param  {(to: string) => void} [onLinkHandler] - links onClick handler
  *
  * @example
  * <ForgotPasswordContainer
@@ -28,6 +32,7 @@ export interface IForgotPasswordContainerProps {
 const ForgotPasswordContainer = ({
   className,
   onSuccess,
+  onLinkHandler = undefined,
 }: IForgotPasswordContainerProps): JSX.Element => {
   const [apiError, setApiError] = useState(undefined)
   async function forgotPassword(email: string) {
@@ -44,8 +49,14 @@ const ForgotPasswordContainer = ({
     }
   }
   return (
-    <div className={className ? className : 'a6y-react-auth__forgot-password'}>
-      <ForgotPassword onClick={forgotPassword} apiError={apiError} />
+    <div
+      className={className ? className : 'a6y-react-auth__forgot-password-cnt'}
+    >
+      <ForgotPassword
+        onLinkHandler={onLinkHandler}
+        onClick={forgotPassword}
+        apiError={apiError}
+      />
     </div>
   )
 }