Skip to content

Commit d7d6495

Browse files
joepiojoepio
committed
Make RegisterSignIn work
1 parent 8c29d36 commit d7d6495

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+272
-339
lines changed

‎.vscode/extensions.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"recommendations": [
33
"vadimcn.vscode-lldb",
4-
"rust-lang.rust-analyzer",
5-
"serayuzgur.crates"
4+
"rust-lang.rust-analyzer"
65
]
76
}

‎browser/data-browser/src/components/ConfirmationDialog.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ export function ConfirmationDialog({
3333
bindShow,
3434
theme = ConfirmationDialogTheme.Default,
3535
}: React.PropsWithChildren<ConfirmationDialogProps>): JSX.Element {
36-
const [dialogProps, showDialog, hideDialog] = useDialog({
36+
const {
37+
dialogProps,
38+
show: showDialog,
39+
close: hideDialog,
40+
} = useDialog({
3741
bindShow,
3842
onCancel,
3943
onSuccess: onConfirm,

‎browser/data-browser/src/components/Dialog/index.tsx

+13-8
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ import { useDialog } from './useDialog';
2424
import { useControlLock } from '../../hooks/useControlLock';
2525

2626
export interface InternalDialogProps {
27-
show: boolean;
27+
/** Is the Dialog visible */
28+
isVisible: boolean;
2829
onClose: (success: boolean) => void;
2930
onClosed: () => void;
3031
width?: CSS.Property.Width;
@@ -86,7 +87,7 @@ export function Dialog(props: React.PropsWithChildren<InternalDialogProps>) {
8687

8788
const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
8889
children,
89-
show,
90+
isVisible,
9091
width,
9192
onClose,
9293
onClosed,
@@ -95,7 +96,7 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
9596
const innerDialogRef = useRef<HTMLDivElement>(null);
9697
const { hasOpenInnerPopup } = useDialogTreeContext();
9798

98-
useControlLock(show);
99+
useControlLock(isVisible);
99100

100101
const cancelDialog = useCallback(() => {
101102
onClose(false);
@@ -121,22 +122,26 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
121122
() => {
122123
cancelDialog();
123124
},
124-
{ enabled: show && !hasOpenInnerPopup },
125+
{ enabled: isVisible && !hasOpenInnerPopup },
125126
);
126127

127128
// When closing the `data-closing` attribute must be set before rendering so the animation has started when the regular useEffect is called.
128129
useLayoutEffect(() => {
129-
if (!show && dialogRef.current && dialogRef.current.hasAttribute('open')) {
130+
if (
131+
!isVisible &&
132+
dialogRef.current &&
133+
dialogRef.current.hasAttribute('open')
134+
) {
130135
dialogRef.current.setAttribute('data-closing', 'true');
131136
}
132-
}, [show]);
137+
}, [isVisible]);
133138

134139
useEffect(() => {
135140
if (!dialogRef.current) {
136141
return;
137142
}
138143

139-
if (show) {
144+
if (isVisible) {
140145
if (!dialogRef.current.hasAttribute('open'))
141146
// @ts-ignore
142147
dialogRef.current.showModal();
@@ -151,7 +156,7 @@ const InnerDialog: React.FC<React.PropsWithChildren<InternalDialogProps>> = ({
151156
onClosed();
152157
}, ANIM_MS);
153158
}
154-
}, [show, onClosed]);
159+
}, [isVisible, onClosed]);
155160

156161
return (
157162
<StyledDialog

‎browser/data-browser/src/components/Dialog/useDialog.tsx

+12-11
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ export type UseDialogReturnType = {
77
/** Function to show the dialog */
88
show: () => void;
99
/** Function to close the dialog */
10-
close: (success?: boolean) => void,
11-
/** Boolean indicating wether the dialog is currently open */
10+
close: (success?: boolean) => void;
11+
/** Whether the dialog is currently open */
1212
isOpen: boolean;
1313
};
1414

@@ -25,26 +25,27 @@ export function useDialog<E extends HTMLElement>(
2525
): UseDialogReturnType {
2626
const { bindShow, onCancel, onSuccess, triggerRef } = options ?? {};
2727

28-
const [showDialog, setShowDialog] = useState(false);
29-
const [visible, setVisible] = useState(false);
28+
const [isOpen, setIsOpen] = useState(false);
29+
const [isVisible, setIsVisible] = useState(false);
3030
const [wasSuccess, setWasSuccess] = useState(false);
3131

3232
const show = useCallback(() => {
3333
document.body.setAttribute('inert', '');
34-
setShowDialog(true);
35-
setVisible(true);
34+
setIsVisible(true);
35+
setIsOpen(true);
3636
bindShow?.(true);
3737
}, []);
3838

3939
const close = useCallback((success = false) => {
4040
setWasSuccess(success);
41-
setShowDialog(false);
41+
setIsVisible(false);
42+
// The 'isOpen' will be set to false by handleClosed after the animation
4243
}, []);
4344

4445
const handleClosed = useCallback(() => {
4546
document.body.removeAttribute('inert');
4647
bindShow?.(false);
47-
setVisible(false);
48+
setIsOpen(false);
4849

4950
if (wasSuccess) {
5051
onSuccess?.();
@@ -60,12 +61,12 @@ export function useDialog<E extends HTMLElement>(
6061
/** Props that should be passed to a {@link Dialog} component. */
6162
const dialogProps = useMemo<InternalDialogProps>(
6263
() => ({
63-
show: showDialog,
64+
isVisible,
6465
onClose: close,
6566
onClosed: handleClosed,
6667
}),
67-
[showDialog, close, handleClosed],
68+
[isVisible, close, handleClosed],
6869
);
6970

70-
return [dialogProps, show, close, visible];
71+
return { dialogProps, show, close, isOpen };
7172
}

‎browser/data-browser/src/components/ParentPicker/ParentPickerDialog.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function ParentPickerDialog({
2929
}: ParentPickerDialogProps): React.JSX.Element {
3030
const [selected, setSelected] = useState<string>();
3131

32-
const [dialogProps, show, close, isOpen] = useDialog({
32+
const { dialogProps, show, close, isOpen } = useDialog({
3333
onCancel,
3434
bindShow: onOpenChange,
3535
});

‎browser/data-browser/src/components/RegisterSignIn.tsx

+14-21
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import {
55
DialogTitle,
66
useDialog,
77
} from './Dialog';
8-
import React, { FormEvent, useCallback, useEffect, useState } from 'react';
9-
import { useSettings } from '../helpers/AppSettings';
8+
import { FormEvent, useCallback, useEffect, useState } from 'react';
109
import { Button } from './Button';
1110
import {
1211
addPublicKey,
@@ -22,16 +21,15 @@ import { Row } from './Row';
2221
import { ErrorLook } from './ErrorLook';
2322
import { SettingsAgent } from './SettingsAgent';
2423

25-
interface RegisterSignInProps {
26-
// URL where to send the user to after successful registration
27-
redirect?: string;
28-
}
29-
3024
/** What is currently showing */
3125
enum PageStateOpts {
26+
/** Start state, select register or sign in */
3227
none,
28+
/** Enter Secret*/
3329
signIn,
30+
/** Register new Email address */
3431
register,
32+
/** Reset existing email, send Secret reset email link */
3533
reset,
3634
mailSentRegistration,
3735
mailSentAddPubkey,
@@ -41,22 +39,17 @@ enum PageStateOpts {
4139
* Two buttons: Register / Sign in.
4240
* Opens a Dialog / Modal with the appropriate form.
4341
*/
44-
export function RegisterSignIn({
45-
children,
46-
}: React.PropsWithChildren<RegisterSignInProps>): JSX.Element {
42+
export function RegisterSignIn(): JSX.Element {
4743
const { dialogProps, show, close } = useDialog();
48-
const { agent } = useSettings();
4944
const [pageState, setPageState] = useState<PageStateOpts>(PageStateOpts.none);
5045
const [email, setEmail] = useState('');
5146
const { emailRegister } = useServerSupports();
5247

53-
if (agent) {
54-
return <>{children}</>;
55-
} else if (!emailRegister) {
48+
if (!emailRegister) {
5649
return (
5750
<>
5851
<SettingsAgent />
59-
<ErrorLook>No e-mail support on this server...</ErrorLook>
52+
<ErrorLook>No email support on this server...</ErrorLook>
6053
</>
6154
);
6255
}
@@ -82,7 +75,7 @@ export function RegisterSignIn({
8275
Sign In
8376
</Button>
8477
</Row>
85-
{/* <Dialog {...dialogProps}>
78+
<Dialog {...dialogProps}>
8679
{pageState === PageStateOpts.register && (
8780
<Register
8881
setPageState={setPageState}
@@ -111,10 +104,10 @@ export function RegisterSignIn({
111104
<MailSentConfirm
112105
email={email}
113106
close={close}
114-
message={'Click that link to create a new PassPhrase.'}
107+
message={'Click that link to create a new Secret.'}
115108
/>
116109
)}
117-
</Dialog> */}
110+
</Dialog>
118111
</>
119112
);
120113
}
@@ -135,7 +128,7 @@ function Reset({ email, setEmail, setPageState }) {
135128
return (
136129
<>
137130
<DialogTitle>
138-
<h1>Reset your PassKey</h1>
131+
<h1>Reset your Secret</h1>
139132
</DialogTitle>
140133
<DialogContent>
141134
<p>
@@ -145,7 +138,7 @@ function Reset({ email, setEmail, setPageState }) {
145138
</p>
146139
<EmailField
147140
email={email}
148-
setEmail={(e: any) => {
141+
setEmail={(e: unknown) => {
149142
setErr(undefined);
150143
setEmail(e);
151144
}}
@@ -277,7 +270,7 @@ function SignIn({ setPageState }) {
277270
Register
278271
</Button>
279272
<Button subtle onClick={() => setPageState(PageStateOpts.reset)}>
280-
I lost my passphrase
273+
I lost my Secret
281274
</Button>
282275
</DialogActions>
283276
</>

‎browser/data-browser/src/components/SettingsAgent.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,9 @@ export const SettingsAgent: React.FunctionComponent = () => {
108108
return (
109109
<form>
110110
<Field
111-
label={agent ? 'Passphrase' : 'Enter your Passphrase'}
111+
label={agent ? 'Secret' : 'Enter your Secret'}
112112
helper={
113-
"The Agent Passphrase is a secret, long string of characters that encodes both the Subject and the Private Key. You can think of it as a combined username + password. Store it safely, and don't share it with others."
113+
"The Secret is a long string of characters that encodes both the Subject and the Private Key. You can think of it as a combined username + password. Store it safely, and don't share it with others."
114114
}
115115
error={error}
116116
>
@@ -124,7 +124,7 @@ export const SettingsAgent: React.FunctionComponent = () => {
124124
id='current-password'
125125
autoComplete='current-password'
126126
spellCheck='false'
127-
placeholder='Paste your Passphrase'
127+
placeholder='Paste your Secret'
128128
/>
129129
<ButtonInput
130130
type='button'

‎browser/data-browser/src/components/forms/FilePicker/FilePickerDialog.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@ export function FilePickerDialog({
3434
noUpload = false,
3535
}: FilePickerProps): React.JSX.Element {
3636
const { drive } = useSettings();
37-
const [dialogProps, showDialog, closeDialog] = useDialog({
37+
const {
38+
dialogProps,
39+
show: showDialog,
40+
close: closeDialog,
41+
} = useDialog({
3842
bindShow: onShowChange,
3943
});
4044

‎browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewArticleDialog.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,10 @@ export const NewArticleDialog: FC<CustomResourceDialogProps> = ({
4444
onClose();
4545
}, [name, createResourceAndNavigate, onClose, parent]);
4646

47-
const [dialogProps, show, hide] = useDialog({ onSuccess, onCancel: onClose });
47+
const { dialogProps, show, close } = useDialog({
48+
onSuccess,
49+
onCancel: onClose,
50+
});
4851

4952
const onNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
5053
setName(e.target.value);
@@ -69,7 +72,7 @@ export const NewArticleDialog: FC<CustomResourceDialogProps> = ({
6972
<form
7073
onSubmit={(e: FormEvent) => {
7174
e.preventDefault();
72-
hide(true);
75+
close(true);
7376
}}
7477
>
7578
<Field required label='Title'>
@@ -89,10 +92,10 @@ export const NewArticleDialog: FC<CustomResourceDialogProps> = ({
8992
</form>
9093
</DialogContent>
9194
<DialogActions>
92-
<Button onClick={() => hide(false)} subtle>
95+
<Button onClick={() => close(false)} subtle>
9396
Cancel
9497
</Button>
95-
<Button onClick={() => hide(true)} disabled={!valid}>
98+
<Button onClick={() => close(true)} disabled={!valid}>
9699
Create
97100
</Button>
98101
</DialogActions>

‎browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewCollectionDialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const NewCollectionDialog: FC<CustomResourceDialogProps> = ({
2222
const [valueFilter, setValue] = useState<string | undefined>();
2323
const [propertyFilter, setProperty] = useState<string | undefined>();
2424

25-
const [dialogProps, show, hide] = useDialog({ onCancel: onClose });
25+
const { dialogProps, show, close } = useDialog({ onCancel: onClose });
2626

2727
const createResourceAndNavigate = useCreateAndNavigate();
2828

@@ -91,7 +91,7 @@ export const NewCollectionDialog: FC<CustomResourceDialogProps> = ({
9191
</form>
9292
</DialogContent>
9393
<DialogActions>
94-
<Button onClick={() => hide(false)} subtle>
94+
<Button onClick={() => close(false)} subtle>
9595
Cancel
9696
</Button>
9797
<Button onClick={onDone} disabled={!propertyFilter && !valueFilter}>

‎browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewDriveDialog.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,11 @@ export const NewDriveDialog: FC<CustomResourceDialogProps> = ({
9191
onClose();
9292
}, [name, createAndNavigate, onClose, parent, setDrive, store]);
9393

94-
const [dialogProps, show, hide] = useDialog({ onSuccess, onCancel: onClose });
94+
const {
95+
dialogProps,
96+
show,
97+
close: hide,
98+
} = useDialog({ onSuccess, onCancel: onClose });
9599

96100
useEffect(() => {
97101
show();

‎browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewOntologyDialog.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ export const NewOntologyDialog: FC<CustomResourceDialogProps> = ({
4141
onClose();
4242
}, [shortname, createResourceAndNavigate, onClose, parent]);
4343

44-
const [dialogProps, show, hide] = useDialog({ onSuccess, onCancel: onClose });
44+
const {
45+
dialogProps,
46+
show,
47+
close: hide,
48+
} = useDialog({ onSuccess, onCancel: onClose });
4549

4650
const onShortnameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
4751
const value = stringToSlug(e.target.value);

‎browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewTableDialog.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,12 @@ export const NewTableDialog: FC<NewTableDialogProps> = ({
8989
createResourceAndNavigate,
9090
]);
9191

92-
const [dialogProps, show, hide, isOpen] = useDialog({ onCancel, onSuccess });
92+
const {
93+
dialogProps,
94+
show,
95+
close: hide,
96+
isOpen,
97+
} = useDialog({ onCancel, onSuccess });
9398

9499
useEffect(() => {
95100
show();

0 commit comments

Comments
 (0)