Merge pull request #32 from nickovchinnikov/login

Login with React Hook Form

README.md

@@ -156,3 +156,9 @@
 ### Login page part 2
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/31)
+
+### React hook form and login
+
+### React hook form, validation and tests
+
+[pull request](https://github.com/nickovchinnikov/coursesbox/pull/32)

frontend/components/Input/Input.tsx

@@ -1,4 +1,11 @@
-import { FC, ChangeEventHandler, InputHTMLAttributes, ReactChild } from "react";
+import {
+  FC,
+  ChangeEventHandler,
+  InputHTMLAttributes,
+  ReactChild,
+  forwardRef,
+  ForwardedRef,
+} from "react";
 import styled from "@emotion/styled";
 
 import { Icon, AvailableIcons } from "@/components/Icon";
@@ -100,27 +107,27 @@ export type Props = {
   feedback?: ReactChild;
 } & WrapperProps;
 
-export const Input: FC<Props & InputHTMLAttributes<HTMLInputElement>> = ({
-  label,
-  height = 7,
-  width = 20,
-  icon,
-  feedback,
-  className,
-  ...rest
-}) => (
-  <Wrapper
-    isLabelVisible={Boolean(label)}
-    isFeedbackVisible={Boolean(feedback)}
-    height={height}
-    width={width}
-    className={className}
-  >
-    <Label>{label}</Label>
-    <InputWrapper>
-      <StyledInput {...rest} />
-      {icon && <StyledIcon name={icon} />}
-    </InputWrapper>
-    <Feedback>{feedback}</Feedback>
-  </Wrapper>
-);
+export const Input: FC<Props & InputHTMLAttributes<HTMLInputElement>> =
+  forwardRef(
+    (
+      { label, height = 7, width = 20, icon, feedback, className, ...rest },
+      ref
+    ) => (
+      <Wrapper
+        isLabelVisible={Boolean(label)}
+        isFeedbackVisible={Boolean(feedback)}
+        height={height}
+        width={width}
+        className={className}
+      >
+        <Label>{label}</Label>
+        <InputWrapper>
+          <StyledInput ref={ref as ForwardedRef<HTMLInputElement>} {...rest} />
+          {icon && <StyledIcon name={icon} />}
+        </InputWrapper>
+        <Feedback role="alert">{feedback}</Feedback>
+      </Wrapper>
+    )
+  );
+
+Input.displayName = "Input";

frontend/components/Input/__snapshots__/Input.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`Input test cases Render check 1`] = `
     </div>
     <span
       class="css-1reg724"
+      role="alert"
     />
   </label>
 </DocumentFragment>
@@ -65,6 +66,7 @@ exports[`Input test cases Render check with icon 1`] = `
     </div>
     <span
       class="css-1reg724"
+      role="alert"
     />
   </label>
 </DocumentFragment>

frontend/components/Layout/__snapshots__/Layout.test.tsx.snap

@@ -97,6 +97,7 @@ exports[`Layout test cases Render check 1`] = `
       </div>
       <span
         class="css-1reg724"
+        role="alert"
       />
     </label>
     <main