Skip to content

Commit 1240d67

Browse files
Confirmation modals for signup
1 parent 17fe302 commit 1240d67

5 files changed

Lines changed: 51 additions & 7 deletions

File tree

app/components/ConfirmationModal.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,37 @@
1+
import { useMemo } from "react";
12
import { Modal } from "react-bootstrap";
23
import Button from "./Button";
4+
import { parse } from "marked";
5+
import DOMPurify from "dompurify";
36

47
export default function ConfirmationModal({
58
show,
69
setShow,
10+
title,
711
message,
812
confirmText,
913
confirmVariant,
1014
onConfirm,
1115
}: {
1216
show: boolean;
13-
setShow: (show: boolean) => void;
17+
setShow: (show: boolean) => void;
18+
title: string;
1419
message: string;
1520
confirmText: string;
1621
confirmVariant: string;
1722
onConfirm: () => void;
1823
}) {
24+
const html = useMemo(() => {
25+
return DOMPurify.sanitize(parse(message) as string);
26+
}, [message]);
27+
1928
return (
2029
<Modal show={show} onHide={() => setShow(false)} centered>
2130
<Modal.Header closeButton>
22-
<Modal.Title>Confirm</Modal.Title>
31+
<Modal.Title>{title}</Modal.Title>
2332
</Modal.Header>
2433
<Modal.Body>
25-
<p>{message}</p>
34+
<div dangerouslySetInnerHTML={{ __html: html }} />
2635
</Modal.Body>
2736
<Modal.Footer>
2837
<Button

app/components/EditProfileModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function EditProfileModal({
8686
</Form>
8787
</Modal.Body>
8888
<Modal.Footer>
89-
<Button onClick={() => doHide()} className="me-auto" variant="primary" text="Cancel" />
89+
<Button onClick={() => doHide()} variant="primary" text="Cancel" />
9090
{!isAdd && <Button icon="copy" text="Duplicate" onClick={() => {
9191
const profileToDuplicate = profile!;
9292
saveProfile(profileToDuplicate.name + " (copy)", profileToDuplicate.command);

app/components/LoginModal.tsx

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useEffect } from "react";
1+
import { useState, useEffect, useContext } from "react";
22

33
import Modal from "react-bootstrap/Modal";
44
import Form from "react-bootstrap/Form";
@@ -7,6 +7,7 @@ import Tab from "react-bootstrap/Tab";
77

88
import Button from "./Button";
99

10+
import { SettingsCtx } from "@/app/contexts";
1011
import { EndpointInfo, ServerEntry } from "@/app/types";
1112
import { validateUsername, validatePassword, validateEmail, getPrivacyPolicyUrlForServer } from "@/app/util";
1213
import { Overlay, Tooltip } from "react-bootstrap";
@@ -27,6 +28,9 @@ const CONTROL_ID_NEW_PASSWORD = "newPassword";
2728
const CONTROL_ID_CONFIRM_PASSWORD = "confirmPassword";
2829
const CONTROL_ID_EMAIL = "email";
2930

31+
const EMAIL_DISCLAIMER = "A verification email will be sent to the address you provided. Please click on the enclosed link in order to complete the registration process as soon as possible.\n\nIf you do not click the verification link, the email will not be linked to your account. You will still be able to log in, but **you will not be able to recover your password.**";
32+
const NO_EMAIL_DISCLAIMER = "Continue without entering an email address? If there is no email linked to your account, **there will be no way to recover your password if you forget it**.\n\nIf you're logged in, you can always add an email address later by going to Settings -> Authentication -> Manage Account";
33+
3034
const replaceLinksWithShellOpen = (html: string) => {
3135
return html.replace(/<a href="([^"]+)">([^<]+)<\/a>/g, (match, href, text) => {
3236
return `<a href="#" onclick="window.__TAURI__.shell.open('${href}'); return false;">${text}</a>`;
@@ -154,6 +158,8 @@ export default function LoginModal({
154158

155159
const [emailRequired, setEmailRequired] = useState<boolean>(false);
156160

161+
const ctx = useContext(SettingsCtx);
162+
157163
const validateLogin = () => {
158164
return username.length > 0 && password.length > 0;
159165
};
@@ -196,12 +202,36 @@ export default function LoginModal({
196202
}
197203
};
198204

205+
const onSubmit = () => {
206+
if (tab === TAB_REGISTER && ctx.showConfirmationModal) {
207+
if (email.length > 0) {
208+
ctx.showConfirmationModal(
209+
EMAIL_DISCLAIMER,
210+
"I understand",
211+
"danger",
212+
submitForm,
213+
"Note!",
214+
);
215+
} else {
216+
ctx.showConfirmationModal(
217+
NO_EMAIL_DISCLAIMER,
218+
"I understand",
219+
"danger",
220+
submitForm,
221+
"Note!",
222+
);
223+
}
224+
} else {
225+
submitForm();
226+
}
227+
}
228+
199229
return (
200230
<Modal show={show && !!server} onHide={onClose} centered={true} size="lg">
201231
<Form
202232
onSubmit={(e) => {
203233
e.preventDefault();
204-
submitForm();
234+
onSubmit();
205235
}}
206236
>
207237
<Modal.Header>
@@ -340,7 +370,7 @@ export default function LoginModal({
340370
<Modal.Footer>
341371
<Button onClick={onClose} variant="primary" text="Cancel" />
342372
<Button
343-
onClick={submitForm}
373+
onClick={onSubmit}
344374
variant="success"
345375
text={tab === TAB_LOGIN ? "Log In" : "Register"}
346376
enabled={canSubmit(tab)}

app/settings/page.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export default function SettingsPage() {
4141

4242
// confirmation modal
4343
const [showConfirmation, setShowConfirmation] = useState(false);
44+
const [confirmationTitle, setConfirmationTitle] = useState("");
4445
const [confirmationMessage, setConfirmationMessage] = useState("");
4546
const [confirmationConfirmText, setConfirmationConfirmText] = useState("");
4647
const [confirmationConfirmVariant, setConfirmationConfirmVariant] =
@@ -90,7 +91,9 @@ export default function SettingsPage() {
9091
confirmText: string,
9192
confirmVariant: string,
9293
onConfirm: () => void,
94+
title?: string
9395
) => {
96+
setConfirmationTitle(title || "Confirm");
9497
setConfirmationMessage(message);
9598
setConfirmationConfirmText(confirmText);
9699
setConfirmationConfirmVariant(confirmVariant);
@@ -250,6 +253,7 @@ export default function SettingsPage() {
250253
<ConfirmationModal
251254
show={showConfirmation}
252255
setShow={setShowConfirmation}
256+
title={confirmationTitle}
253257
message={confirmationMessage}
254258
confirmText={confirmationConfirmText}
255259
confirmVariant={confirmationConfirmVariant}

app/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ export type SettingsContext = {
128128
confirmText: string,
129129
confirmVariant: string,
130130
onConfirm: () => void,
131+
title?: string
131132
) => void;
132133
};
133134

0 commit comments

Comments
 (0)