Forms rtc fk

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/.yarn

.take-all-branch.sh

@@ -0,0 +1,3 @@
+git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote#origin/}" "$remote"; done
+git fetch --all
+git pull --all

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

src/03-forms/hooks/useForm.ts

@@ -0,0 +1,73 @@
+import { ChangeEvent, FormEvent, useEffect, useMemo, useState } from "react";
+
+export const useForm = <
+  T extends { [key: string]: string },
+  K extends {
+    [key: string]: [
+      fn: (value?: string | readonly string[] | undefined) => boolean,
+      erro: string
+    ];
+  }
+>(
+  initForm: T,
+  formValidations: K
+) => {
+  console.log(formValidations);
+
+  const [formState, setStateForm] = useState(initForm);
+  const [formValidation, setFormValidation] = useState(formValidations);
+
+  useEffect(() => {
+    createValidators();
+  }, [formState]);
+
+  const createValidators = () => {
+    console.log("createValidators");
+    const formCheckedValues: { [key: string]: string | null } = {};
+    console.log(isFormValid);
+    for (const formField of Object.keys(formValidations)) {
+      const [fn, error] =
+        formValidations[formField as keyof typeof formValidations];
+      //console.log(formField, error);
+      //console.log();
+      const data = fn(formState[formField]) ? null : error;
+      console.log(formField, data);
+      formCheckedValues[`${formField}Valid`] = data;
+      console.log("======", formCheckedValues);
+      /* formCheckedValues[`${ formField }Valid`] = fn[0]( formState[formField] ) ? null : errorMessage; */
+    }
+  };
+  const isFormValid = useMemo(() => {
+    console.log("====isFormValid", formValidation);
+    for (const formValue of Object.keys(formValidation)) {
+      console.log(formValue);
+
+      console.log(formValidation[formValue as keyof typeof formValidation]);
+
+      if (formValidation[formValue as keyof typeof formValidation] !== null)
+        return false;
+    }
+    return true;
+  }, [formValidation]);
+
+  const onChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = target;
+    setStateForm((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    console.log(formState);
+    onReset();
+  };
+  const onReset = () => {
+    setStateForm(initForm);
+  };
+  return {
+    ...formState,
+    onChange,
+    onSubmit,
+  };
+};

src/03-forms/interfaces/interfaces.ts

@@ -0,0 +1,6 @@
+export interface registerForm {
+  name: string;
+  email: string;
+  password1: string;
+  password2: string;
+}

src/03-forms/pages/RegisterPage.tsx

@@ -0,0 +1,107 @@
+import "../styles/styles.css";
+import { useForm } from "../hooks/useForm";
+const initForm = {
+  name: "",
+  email: "",
+  password1: "",
+  password2: "",
+};
+const formValidations: {} = {
+  email: [
+    (value?: string | readonly string[] | undefined) => {
+      return value && value.includes("@");
+    },
+    "El correo debe de tener una @",
+  ],
+  password1: [
+    (value?: string | readonly string[] | undefined) =>
+      value && value.length >= 6,
+    "El password debe de tener más de 6 letras.",
+  ],
+  password2: [
+    (value?: string | readonly string[] | undefined) =>
+      value && value.length >= 6,
+    "El password debe de tener más de 6 letras.",
+  ],
+  name: [
+    (value?: string | readonly string[] | undefined) =>
+      value && value.length >= 1,
+    "El nombre es obligatorio.",
+  ],
+};
+export const RegisterPage = () => {
+  const { onChange, onSubmit, name, email, password1, password2 } = useForm(
+    initForm,
+    formValidations
+  );
+  return (
+    <div className="form">
+      <h1 className="title"> Formulario de registro</h1>
+      <hr />
+      <form noValidate onSubmit={onSubmit}>
+        <div className="input-container ic1">
+          <input
+            type="text"
+            name="name"
+            id="name"
+            className="input"
+            placeholder=" "
+            value={name}
+            onChange={onChange}
+          />
+          <div className="cut"></div>
+          <label htmlFor="name" className="placeholder">
+            Nombre Completo
+          </label>
+        </div>
+        <div className="input-container ic2">
+          <input
+            type="email"
+            name="email"
+            id="email"
+            placeholder=" "
+            className="input"
+            value={email}
+            onChange={onChange}
+          />
+          <div className="cut"></div>
+          <label htmlFor="email" className="placeholder">
+            Correo Electrónico
+          </label>
+        </div>
+        <div className="input-container ic2">
+          <input
+            type="password"
+            name="password1"
+            id="password1"
+            placeholder=" "
+            className="input"
+            value={password1}
+            onChange={onChange}
+          />
+          <div className="cut"></div>
+          <label htmlFor="password1" className="placeholder">
+            Contraseña
+          </label>
+        </div>
+        <div className="input-container ic2">
+          <input
+            type="password"
+            name="password2"
+            placeholder=" "
+            className="input"
+            value={password2}
+            onChange={onChange}
+          />
+          <div className="cut"></div>
+          <label htmlFor="password1" className="placeholder">
+            Repetir Contraseña
+          </label>
+        </div>
+        <button type="submit" className="submit">
+          Enviar Datos
+        </button>
+      </form>
+    </div>
+  );
+};

src/03-forms/styles/styles.css

@@ -0,0 +1,125 @@
+
+
+  .form {
+    background-color: #15172b;
+    border-radius: 20px;
+    box-sizing: border-box;
+    height: 580px;
+    padding: 20px;
+    width: 450px;
+  }
+
+  .title {
+    color: #eee;
+    font-family: sans-serif;
+    font-size: 36px;
+    font-weight: 600;
+    margin-top: 30px;
+  }
+
+  .subtitle {
+    color: #eee;
+    font-family: sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    margin-top: 10px;
+  }
+
+  .input-container {
+    height: 50px;
+    position: relative;
+    width: 100%;
+  }
+
+  .ic1 {
+    margin-top: 40px;
+  }
+
+  .ic2 {
+    margin-top: 30px;
+  }
+
+  .input {
+    background-color: #303245;
+    border-radius: 12px;
+    border: 0;
+    box-sizing: border-box;
+    color: #eee;
+    font-size: 18px;
+    height: 100%;
+    outline: 0;
+    padding: 4px 20px 0;
+    width: 100%;
+  }
+
+  .cut {
+    background-color: #15172b;
+    border-radius: 10px;
+    height: 20px;
+    left: 20px;
+    position: absolute;
+    top: -20px;
+    transform: translateY(0);
+    transition: transform 200ms;
+    width: 150px;
+  }
+
+  .cut-short {
+    width: 50px;
+  }
+
+  .input:focus ~ .cut,
+  .input:not(:placeholder-shown) ~ .cut {
+    transform: translateY(8px);
+  }
+
+  .placeholder {
+    color: #65657b;
+    font-family: sans-serif;
+    left: 20px;
+    line-height: 14px;
+    pointer-events: none;
+    position: absolute;
+    transform-origin: 0 50%;
+    transition: transform 200ms, color 200ms;
+    top: 20px;
+  }
+
+  .input:focus ~ .placeholder,
+  .input:not(:placeholder-shown) ~ .placeholder {
+    transform: translateY(-30px) translateX(10px) scale(0.75);
+  }
+
+  .input:not(:placeholder-shown) ~ .placeholder {
+    color: #808097;
+  }
+
+  .input:focus ~ .placeholder {
+    color: #dc2f55;
+  }
+
+  .submit {
+    background-color: #08d;
+    border-radius: 12px;
+    border: 0;
+    box-sizing: border-box;
+    color: #eee;
+    cursor: pointer;
+    font-size: 18px;
+    height: 50px;
+    margin-top: 38px;
+   /*  outline: 0; */
+    text-align: center;
+    width: 100%;
+  }
+
+  .submit:active {
+    background-color: #06b;
+  }
+
+  hr {
+    height: 0.1px;
+    width: 100%;
+    background-color: rgba(156, 156, 156,0.5);
+    border: none;
+  }

src/index.css

@@ -6,7 +6,15 @@ html,body {
   background-color: #282c34;
   color: white;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale; 
+}
+
+.main-form {
+  align-items: center;   
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+  width: calc(100% - 80px);
 }
 
 code {
@@ -17,7 +25,7 @@ code {
 
 .main-layout {
   display: flex;
-  flex-direction: row;
+  flex-direction: row;  
 }
 
 nav {