Skip to content

Commit

Permalink
spacing
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jsyro
Jsyro committed Oct 30, 2023
1 parent bf89939 commit f0e9a13
Showing 1 changed file with 96 additions and 80 deletions.
176 changes: 96 additions & 80 deletions services/minespace-web/src/components/Forms/verifiableCredentials/CreateInvitationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,90 +29,106 @@ interface FormStateProps {
export const CreateInvitationForm: FC<CreateInvitationFormProps &
FormStateProps &
InjectedFormProps<any>> = ({
closeModal,
partyGuid,
partyName,
connectionState,
invitation,
...props
}) => {
const isPreLoaded = invitation.invitation_url ? LOADING_STATUS.success : LOADING_STATUS.none;
const [loading, setLoading] = useState(isPreLoaded);
closeModal,
partyGuid,
partyName,
connectionState,
invitation,
...props
}) => {
const isPreLoaded = invitation.invitation_url ? LOADING_STATUS.success : LOADING_STATUS.none;
const [loading, setLoading] = useState(isPreLoaded);

const getInvitation = () => {
setLoading(LOADING_STATUS.sent);
props
.createVCWalletInvitation(partyGuid)
.then(() => setLoading(LOADING_STATUS.success))
.catch(() => setLoading(LOADING_STATUS.error));
};

const copyTextToClipboard = () => {
navigator.clipboard.writeText(invitation.invitation_url);
};
const getInvitation = () => {
setLoading(LOADING_STATUS.sent);
props
.createVCWalletInvitation(partyGuid)
.then(() => setLoading(LOADING_STATUS.success))
.catch(() => setLoading(LOADING_STATUS.error));
};

const disableGenerateButton: boolean =
connectionState === "active" ||
props.submitting ||
loading === LOADING_STATUS.sent ||
invitation.invitation_url?.length > 0;
return (
<Form layout="vertical">
<p><b>Current Connection Status: {connectionState}</b></p>
{connectionState !== "active" && (
<div>
<p> By generating this invitation, you choose to connect your organization’s digital wallet to the digital wallet of the Chief Permitting Officer of B.C. Once connected, your organization will have the option to receive permit(s) in the form of digital credentials. This is a one-time action that applies to all major mine permits.</p>
<br />
<Button disabled={disableGenerateButton} onClick={getInvitation}>
Generate Invitation for {partyName}.
</Button>
<br />
</div>
)}
{loading !== LOADING_STATUS.none && (
<Skeleton loading={loading === LOADING_STATUS.sent}>
{loading === LOADING_STATUS.success && (
<>
<br />
<p>
<b>
Accept this invitation url using the digital wallet of {partyName}. to establish a
secure connection for the purposes of recieving Mines Act Permits
</b>
</p>
<br />
<Button type="primary" onClick={copyTextToClipboard}>
Copy to Clipboard
</Button>
<br />
<br />
<p>{invitation.invitation_url}</p>
</>
)}
{loading === LOADING_STATUS.error && (
<p>There was an error generating your invitation.</p>
)}
</Skeleton>
)}
<br />
<br />
<p><b>Note:</b></p>
<p><b>Digital Wallet:</b> A digital version of a physical wallet that enables organizations to send and receive digital credentials. </p>
<p><b>Digital Credential:</b> A digital version of a physical credential, such as your mine permit. Digital credentials are cryptographically protected and verified in real-time, ensuring a high degree of privacy and security regardless of where information is shared. </p>
<Popconfirm
placement="topRight"
title="Are you sure?"
onConfirm={closeModal}
okText="Yes"
cancelText="No"
disabled={props.submitting}
>
<Button disabled={props.submitting}>Close</Button>
</Popconfirm>
</Form>
);
const copyTextToClipboard = () => {
navigator.clipboard.writeText(invitation.invitation_url);
};

const disableGenerateButton: boolean =
connectionState === "active" ||
props.submitting ||
loading === LOADING_STATUS.sent ||
invitation.invitation_url?.length > 0;
return (
<Form layout="vertical">
<p>
<b>Current Connection Status: {connectionState}</b>
</p>
{connectionState !== "active" && (
<div>
<p>
{" "}
By generating this invitation, you choose to connect your organization’s digital wallet
to the digital wallet of the Chief Permitting Officer of B.C. Once connected, your
organization will have the option to receive permit(s) in the form of digital
credentials. This is a one-time action that applies to all major mine permits.
</p>
<br />
<Button disabled={disableGenerateButton} onClick={getInvitation}>
Generate Invitation for {partyName}.
</Button>
<br />
</div>
)}
<br />
{loading !== LOADING_STATUS.none && (
<Skeleton loading={loading === LOADING_STATUS.sent}>
{loading === LOADING_STATUS.success && (
<>
<p>
<b>
Accept this invitation url using the digital wallet of {partyName}. to establish a
secure connection for the purposes of recieving Mines Act Permits
</b>
</p>
<Button type="primary" onClick={copyTextToClipboard}>
Copy to Clipboard
</Button>
<br />
<br />
<p>{invitation.invitation_url}</p>
</>
)}
{loading === LOADING_STATUS.error && (
<p>There was an error generating your invitation.</p>
)}
</Skeleton>
)}
<br />
<br />
<p>
<b>Note:</b>
</p>
<p>
<b>Digital Wallet:</b> A digital version of a physical wallet that enables organizations to
send and receive digital credentials.{" "}
</p>
<p>
<b>Digital Credential:</b> A digital version of a physical credential, such as your mine
permit. Digital credentials are cryptographically protected and verified in real-time,
ensuring a high degree of privacy and security regardless of where information is shared.{" "}
</p>
<Popconfirm
placement="topRight"
title="Are you sure?"
onConfirm={closeModal}
okText="Yes"
cancelText="No"
disabled={props.submitting}
>
<Button disabled={props.submitting}>Close</Button>
</Popconfirm>
</Form>
);
};

const mapStateToProps = (state) => ({
invitation: getVCWalletConnectionInvitation(state),
});
Expand Down

0 comments on commit f0e9a13

Please sign in to comment.