@foreverrbum/ethsign/src/lib/components/dataVis/BackendLogin.js

This package will allow you to electronically sign documents within your application

import React, { useEffect, useState } from "react";
import CheckIcon from '../../assets/check.svg';

export const USERNAME = 'ethsign';
export const PASSWORD = 'Admin_1234';
export const INTERNAL_USERNAME_PASSWORD = 'internalUserNameAndPassword';

export const BackendLogin = (props) => {
    const { history, handleAuthData, pass, handlePass} = props;
    const [data, handleData] = useState({});
    const [error, handleError] = useState();
    const [remember, handleRemember] = useState(true);

    useEffect(()=> {
        if (pass) {
            history.push("/datavis");
        }
    },[pass])


    const handleChange = (info) => {
        handleData({...data, ...info});
    }

    const handleLogin = () => {
        const {username, password} = data;
        const errData = {};
        if (username !== USERNAME) {
            errData.username = true;
        }

        if (password !== PASSWORD) {
            errData.password = true;
        }
        if (!(errData?.username || errData?.password)) {
            if (remember) {
                handleAuthData(JSON.stringify({username, password}))
            }
            handlePass(true);
            history.push("/datavis");
        }
        handleError({...errData});
    }


    return (
        <>
        <div className="h-16"></div>
        <div className="flex justify-center items-center h-full mt-auto mb-auto">
            <form className="w-64 sm:w-max  border p-2 sm:p-16 flex flex-col">
                <div className="m-6 sm:w-64">
                    <input placeholder="Username" className="border p-2 w-full" onChange={evt => {handleChange({username: evt.target.value})}}/>
                </div>
                {
                    error?.username && <span className="ml-6  text-red-400">Wrong Username</span>
                }
                <div  className="m-6 sm:w-64">
                    <input type="password" placeholder="Password" className="border p-2 w-full" onChange={evt => {handleChange({password: evt.target.value})}}/>
                </div>
                {
                    error?.password && <span className="ml-6 text-red-400">Wrong Password</span>
                }
                
                <div className="flex justify-between items-center m-6">
                    <div className="flex ">
                        <div className="self-center w-4 h-4  flex-shrink-0  mr-2 border border-gray-300 rounded-sm flex justify-center cursor-pointer" 
                                onClick={() => {
                                    handleRemember(!remember);
                                }}
                            >
                                <img src={CheckIcon} />
                            
                        </div>
                        <span className='text-xs sm:text-base'>Remember</span>
                    </div>
                    <button onClick={()=> handleLogin()} className="w-20 sm:w-24 select-none focus:outline-none ml-4 sm:mx-10  text-white sm:w-28 sm:mx-0 py-2 font-medium bg-orange-500 hover:bg-orange-600 rounded-sm">Sign In </button>
                </div>
                
            </form>
        </div>
        </>
    )
}