This is my login form i want to auth login with web api url.i am done web api login,the
only think I want how can i call web api here
- import React, { useState } from 'react';
- import {useFormik, yupToFormErrors} from 'formik';
- import * as yup from 'yup';
- import 'bootstrap/dist/css/bootstrap.min.css';
- import 'font-awesome/css/font-awesome.min.css';
- import showPwdImg from './show-password.svg';
- import hidePwdImg from './hide-password.svg';
- const Login =() =>{
- const [isRevealPwd, setIsRevealPwd] = useState(false);
- const formik = useFormik({
- initialValues:{
- name:"",
- password:""
- },
- validationSchema:yup.object({
- name:yup.string()
- .required('UserName is required')
- .strict()
- .trim()
- .min(5)
- .max(15,'Maximum 15 character') ,
- password:yup.string()
- .required('Password is required')
- .min(6)
- .max(15,'Maximum 10 character')
- }),
- onSubmit:(userInputData)=>{
- console.log(userInputData);
- }
- })
- return(
- "container mt-4">
- onSubmit={formik.handleSubmit}>
"form-group">"head-form" >Log In
"input-icons">- "fa fa-user icon">
- "form-control" placeholder="Username" type="text" name="name" id="login"onChange={formik.handleChange} value={formik.values.name}/>
- {formik.errors.name ?
"text-danger">{formik.errors.name}- :null
- }
"form-group ">"input-icons">- "fa fa-key">
- "form-control" placeholder="Password" id="loginpwd" name="password" onChange={formik.handleChange} type={isRevealPwd ? "text" : "password"}
- value={formik.values.password}
- />
- title={isRevealPwd ? "Show password" : "Hide password"}
- src={isRevealPwd ? showPwdImg : hidePwdImg}
- onClick={() => setIsRevealPwd(prevState => !prevState)}
- />
- {formik.errors.password ?
"text-danger">{formik.errors.password}- :null
- }
- type="text">Submit
- )
- }
- export default Login;
Replies
Know the answer? Post it — somebody with the same question will find it here.