log in page with css

 import React, { useState } from 'react'


import 'bootstrap/dist/css/bootstrap.min.css';


export default function FullFormFunction() {


   const[state,setState] =useState({
    form: {
     
        email: "",
        password: "",
        confirmPassword: "",
 
      },
      formErrors: {

        email: null,
        password: null,
        confirmPassword: null,
   
       
      }
   });
   const [passwordShown, setPasswordShown] = useState(false);
   
   
   var   handleChange = e => {

        const { name, value, checked } = e.target;
        const { form, formErrors } = state;
        let formObj = {};
       
          formObj = {
            ...form,
            [name]: value
          };
        //state htmlForvalue

        if (!Object.keys(formErrors).includes(name)) return;
       
        let formErrorsObj = {};
        if (name === "password" ||
        name === "confirmPassword") {
          let refValue = state.form[
            name === "password" ? "confirmPassword" : "password"
          ];
          const errorMsg = validateField(name, value, refValue);
          formErrorsObj = { ...formErrors, [name]: errorMsg };
          // if (!errorMsg && refValue) {
          //   formErrorsObj.confirmPassword = null;
          //   formErrorsObj.password = null;
          // }
        } else {
          const errorMsg = validateField(
            name,
            name === "email" ?
             state.form["email"] : value
          );
          formErrorsObj = { ...formErrors, [name]: errorMsg };
        }
        setState({...state ,formErrors: formErrorsObj,form: formObj });
     
      };
   
    var  validateField = (name, value, refValue) => {
        let errorMsg = null;
        switch (name) {
          case "email":
            if (!value) errorMsg = "Please enter Email.";
            else if (
              !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                value
              )
            )
            errorMsg = "Please enter valid Email.";
            break;
         
          case "password":
            // refValue is the value of Confirm Password field
            if (!value) errorMsg = "Please enter Password.";
            else if (refValue && value !== refValue)
              errorMsg = "Password and Confirm Password does not match.";
            break;
          case "confirmPassword":
            // refValue is the value of Password field
            if (!value) errorMsg = "Please enter Confirm Password.";
            else if (refValue && value !== refValue)
              errorMsg = "Password and Confirm Password does not match.";
            break;
          default:
            break;
        }
        return errorMsg;
      };
   
    var  validateForm = (form, formErrors, validateFunc) => {
        const errorObj = {};
        Object.keys(formErrors).map(x => {
          let refValue = null;
          if (x === "password" || x === "confirmPassword") {
            refValue = form[x === "password" ? "confirmPassword" : "password"];
          }
          const msg = validateFunc(x, form[x], refValue);
          if (msg) errorObj[x] = msg;
        });
        return errorObj;
      };
   
     var handleSubmit = () => {
        const { form, formErrors } = state;
        const errorObj = validateForm(form, formErrors, validateField);
        if (Object.keys(errorObj).length !== 0) {
          setState({...state, formErrors:  errorObj  });
          return false;
        }

        //database
        //api code
        console.log("Data: ", form);
      };



      const togglePassword = (e) => {
        e.preventDefault();
        setPasswordShown(!passwordShown);
      };
  return (
    <>
        <section className="vh-100">
  <div className="container py-5 h-100">
    <div className="row d-flex align-items-center justify-content-center h-100">
      <div className="col-md-8 col-lg-7 col-xl-6">
        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg" className="img-fluid" alt="Phone image"/>
      </div>
      <div className="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
        <form>
         
          <div className="form-outline mb-4">
            <input type="text" id="form1Example13" className="form-control form-control-lg" name="email" value={state.form.email} onChange={handleChange} onBlur={handleChange} />
            <label className="form-label" for="form1Example13">Email address</label>

            <div className="divider align-items-center my-1">
            {state.formErrors.email && (
                  <span className="err">{state.formErrors.email}</span>
                )}
          </div>

          </div>  

         
          <div className="form-outline mb-4">
            <input  type={passwordShown ? "text" : "password"} id="form1Example23" className="form-control form-control-lg"
                  name="password"
                  value={state.form.password}
                  onChange={handleChange}
                  onBlur={handleChange}
                   
                  />
            <label className="form-label" for="form1Example23">Password</label>
           
                  <button type="button" id='eye' className="btn btn-light pl-5 d-flex align-items-end flex-column mt-auto" onClick={togglePassword}>Show Password</button>
            <div className="divider align-items-center my-1">
            {state.formErrors.password && (
                  <span className="err">{state.formErrors.password}</span>
                )}
          </div>
           
          </div>

          <div className="form-outline mb-4">
            <input type="password" id="form1Example24" className="form-control form-control-lg"
                  name="confirmPassword"
                  value={state.form.confirmPassword}
                  onChange={handleChange}
                  onBlur={handleChange}/>
            <label className="form-label" for="form1Example23">Confirm-password</label>


            <div className="divider align-items-center my-1">
            {state.formErrors.confirmPassword && (
                  <span className="err">{state.formErrors.confirmPassword}</span>
                )}
          </div>
           
          </div>



          <div className="d-flex justify-content-around align-items-center mb-4">
           
            <div className="form-check">
              <input className="form-check-input" type="checkbox" value="" id="form1Example3" />
              <label className="form-check-label" for="form1Example3"> Remember me </label>
            </div>
            <a >Forgot password?</a>
          </div>

         
          <button className="btn btn-primary btn-lg btn-block" type="button" value="Submit"
              onClick={handleSubmit}>Sign in</button>




        </form>
      </div>
    </div>
  </div>
</section>
      </>
  )
}






.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}

.err { color: red; }




import FullFormFunction from '../src/Ethic'


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <FullFormFunction/>
  </React.StrictMode>
);

Comments

Post a Comment

Popular posts from this blog

Controlled Form

 import React, { useState } from "react"; function Form() {   const [formData, setFormData] = useState({ name: "", email: "" });   const [submittedData, setSubmittedData] = useState(null);   const handleChange = (e) => {     const { name, value } = e.target;     setFormData({ ...formData, [name]: value });   };   const handleSubmit = (e) => {     e.preventDefault();     setSubmittedData(formData);   };   return (     <div>       <h2>Controlled Form</h2>       <form onSubmit={handleSubmit}>         <input           type="text"           name="name"           placeholder="Name"           value={formData.name}           onChange={handleChange}         />      ...
Read more

LOCAL STORE

 //App.js import React from " react " ; import { Routes , Route } from " react-router-dom " ; import { ToastContainer } from " react-toastify " ; import " react-toastify/dist/ReactToastify.css " ; import LoginPage from " ./Pages/LoginPage " ; import UsersList from " ./Pages/UsersList " ; import HomePage from " ./Pages/HomePage " ; import Footer from " ./Components/Footer " ; function App () {   return (     < >       < ToastContainer         position = " top-center "         autoClose = { 2000 }         hideProgressBar = { false }         newestOnTop = { false }         closeOnClick         rtl = { false }         pauseOnFocusLoss         draggable         pauseOnHover       />       < Routes >   ...
Read more

NodeJS MongoDB

 server.js const mongoose = require ( 'mongoose' ); const dotenv = require ( 'dotenv' ); dotenv . config ({ path : './config.env' }); const app = require ( './app' ); // Require the Express app from app.js const DB = process . env . DATABASE ; // Connect to the database-------------------------------------- mongoose     . connect ( "mongodb://localhost:27017/nikedb" , {         useNewUrlParser : true ,         useUnifiedTopology : true ,         // Other options if needed     })     . then (() => {         console . log ( 'Database connection successful' );     })     . catch (( err ) => {         console . error ( 'Database connection error:' , err );     }); const port = process . env . PORT || 3000 ; app . listen ( port , () => {     console . log ( `App running on port ${ port } ` ); ...
Read more