@hwdtech/login-components

Installing

To Add this package to your project use the command

yarn add -D @hwdtech/login-components

Usage

Components to export

• Authorization

Types to export

• GetAuthFunc

Authorization usage

To provide authorization needs to define getAuth function which sends login and password to specified api and process the api response.

This function gets the following props:

type GetAuthProps = {
  event: FormEvent<HTMLFormElement>,
  login: string,
  pass: string,
  successHandler: (newValue: boolean) => void, 
  setErrorMessage: React.Dispatch<React.SetStateAction<string>>
}

Note that props event, login, setErrorMessage and pass provided by Authorization component therefore you need provide only setIsLoggedIn props.

setErrorMessage will show a received message.

successHandler should process successful login operation.

###Example

  const getAuth: GetAuthFunc = async ({
                                        event,
                                        login,
                                        pass,
                                        setErrorMessage,
                                        successHandler,
                                      }) => {
    event.preventDefault();
    try {
      const resp = await axios.post("/api/api-to-login", { login, pass });
      if (resp.status === 200) {
        setIsLoggedIn(someArguments);
      }
    } catch (e) {
      setErrorMessage("Wrong login or password!");
    }
  }

Providing props to Authorization component

<Authorization successHandler={successHandler} getAuth={getAuth} />