@foreverrbum/ethsign/src/lib/components/Dashboard/Password.js

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

import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
import { handleShowLabel } from '../../helpers/dashboard';
import Loader from '../UI/loader';
import { FormattedMessage, useIntl } from 'react-intl';
const Password = (props) => {
	const { close, doc, loading, passwordSubmit } = props;
	const [passwordLabel, handlePasswordLabel] = useState(false);
	const { register, errors, handleSubmit, getValues } = useForm();
	const { formatMessage } = useIntl();
	useEffect(() => {
		let isSubscribed = true;
		if (!doc.withPassword) {
			//TODO: TRANSFER THIS BEFORE THIS COMPONENT IS BEING RENDERED - BEFORE POPUPONCLICK - BETTER TO MAKE OWN POPOVER - COPY POPOVER FROM SENDING.JS
			let data = { password: "" }
			handleSubmission(data);
		}else{
			document.getElementById('password_input').focus()
		}
		return () => isSubscribed = false;
	}, []);

	const handleSubmission = async (data) => {
		await passwordSubmit(data, close)
	}

	return (
		<>
			{doc.withPassword &&
				<div className="rounded sm:rounded-none border-t-4 border-orange-500 -m-5px p-4 sm:p-8 text-left w-50">
					<div className={`${loading && 'invisible'} text-gray-300 text-15 mb-5 text-left`}>
					<FormattedMessage id='THIS_CONTRACT_IS_PROTECTED'/>

				</div>
					<div className="text-gray-300 text-15 mb-6 -mt-1 text-center">
						{loading &&
							<FormattedMessage id='DECRYPTING_YOUR_FILE'/>
						}
					</div>
					{!loading &&
						<form onSubmit={(e) => {e.preventDefault(); handleSubmit(handleSubmission);}} className="text-15 text-gray-300 justify-center">
							<div className="flex flex-wrap sm:flex-nowrap justify-start">
								<div className="my-auto mr-4"><FormattedMessage id='PASSWORD' />:</div>
								<input
									placeholder={formatMessage({id: 'ENTER_YOUR_PASSWORD'})}
									required={false}
									name="password"
									type="password"
									ref={register({
										maxLength: 32
									})}
									onChange={() => { handleShowLabel(getValues('password'), handlePasswordLabel) }}
									id="password_input"
									className={`flex-grow-1 rounded-sm focus:outline-none rounded-sm px-4 py-1 border mr-0 border-gray-200 ${errors.password && 'ring border border-blue-300'}`}


								>
								</input>
							</div>

							<div className="flex flex-wrap sm:flex-nowrap justify-end">
								<button onClick={() => close()} type="button" className="w-full mt-3 sm:mt-0 sm:w-28 flex-grow-0 font-bold bg-gray-60 focus:outline-none text-gray-40 py-2 rounded-sm  hover:bg-gray-70">
									<FormattedMessage id='CANCEL'/>
								</button>
								<button id="submit-btn" className="w-full mt-3 sm:mt-0 sm:ml-3 sm:w-28 font-bold flex-grow-0 bg-orange-500 focus:outline-none text-gray-40  py-2 rounded-sm  hover:bg-orange-600">
									<FormattedMessage id='OK'/>
								</button>
							</div>

						</form>
					}
				</div>
			}
			{/* This will trigger when the document doesn't have a password and prevents the empty square in the middle of the screen */}
			{!doc.withPassword &&
				<div className="border-t-4 border-orange-500 -m-5px pb-8 px-12">
					<Loader />
				</div>
			}
		</>
	);
}

export default Password;