@peers-app/peers-ui 0.7.40 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/globals.d.ts +1 -1
- package/dist/screens/contacts/contact-list.js +4 -1
- package/dist/screens/contacts/index.d.ts +2 -0
- package/dist/screens/contacts/index.js +2 -0
- package/dist/screens/contacts/user-connect.d.ts +2 -0
- package/dist/screens/contacts/user-connect.js +312 -0
- package/package.json +3 -3
- package/src/screens/contacts/contact-list.tsx +4 -0
- package/src/screens/contacts/index.ts +3 -1
- package/src/screens/contacts/user-connect.tsx +452 -0
package/dist/globals.d.ts
CHANGED
|
@@ -14,8 +14,8 @@ export declare const isDesktop: import("@peers-app/peers-sdk").Observable<boolea
|
|
|
14
14
|
export declare const groups: import("@peers-app/peers-sdk").Observable<{
|
|
15
15
|
name: string;
|
|
16
16
|
description: string;
|
|
17
|
-
signature: string;
|
|
18
17
|
publicKey: string;
|
|
18
|
+
signature: string;
|
|
19
19
|
publicBoxKey: string;
|
|
20
20
|
groupId: string;
|
|
21
21
|
founderUserId: string;
|
|
@@ -142,7 +142,10 @@ function ContactList() {
|
|
|
142
142
|
react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-3" },
|
|
143
143
|
react_1.default.createElement("h4", null,
|
|
144
144
|
react_1.default.createElement("i", { className: "bi-person-fill-check me-2" }),
|
|
145
|
-
"Contacts")
|
|
145
|
+
"Contacts"),
|
|
146
|
+
react_1.default.createElement("a", { href: "#contacts/connect", className: "btn btn-primary btn-sm" },
|
|
147
|
+
react_1.default.createElement("i", { className: "bi-person-plus me-1" }),
|
|
148
|
+
"Connect to New User")),
|
|
146
149
|
react_1.default.createElement("div", { className: "input-group mb-3" },
|
|
147
150
|
react_1.default.createElement(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search or create contacts", autoFocus: true, onKeyUp: handleSearchSubmit })),
|
|
148
151
|
react_1.default.createElement("div", { className: "peers-list-container" },
|
|
@@ -17,5 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
// Import all contact screen components to ensure they register their routes
|
|
18
18
|
require("./contact-list");
|
|
19
19
|
require("./contact-details");
|
|
20
|
+
require("./user-connect");
|
|
20
21
|
__exportStar(require("./contact-list"), exports);
|
|
21
22
|
__exportStar(require("./contact-details"), exports);
|
|
23
|
+
__exportStar(require("./user-connect"), exports);
|
|
@@ -0,0 +1,312 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.UserConnect = UserConnect;
|
|
37
|
+
const peers_sdk_1 = require("@peers-app/peers-sdk");
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const globals_1 = require("../../globals");
|
|
40
|
+
const hooks_1 = require("../../hooks");
|
|
41
|
+
const ui_loader_1 = require("../../ui-router/ui-loader");
|
|
42
|
+
function UserConnect() {
|
|
43
|
+
const [mode, setMode] = (0, react_1.useState)('select');
|
|
44
|
+
const [status, setStatus] = (0, react_1.useState)('idle');
|
|
45
|
+
const [connectionCode, setConnectionCode] = (0, react_1.useState)('');
|
|
46
|
+
const [inputCode, setInputCode] = (0, react_1.useState)('');
|
|
47
|
+
const [result, setResult] = (0, react_1.useState)(null);
|
|
48
|
+
const [error, setError] = (0, react_1.useState)('');
|
|
49
|
+
const [copied, setCopied] = (0, react_1.useState)(false);
|
|
50
|
+
// Subscribe to userConnectStatus from the device layer
|
|
51
|
+
const [connectStatus] = (0, hooks_1.useObservable)(peers_sdk_1.userConnectStatus);
|
|
52
|
+
// Also set up a direct subscription after loading is complete
|
|
53
|
+
(0, react_1.useEffect)(() => {
|
|
54
|
+
let disposed = false;
|
|
55
|
+
let subscription;
|
|
56
|
+
peers_sdk_1.userConnectStatus.loadingPromise.then(() => {
|
|
57
|
+
if (disposed)
|
|
58
|
+
return;
|
|
59
|
+
subscription = peers_sdk_1.userConnectStatus.subscribe(() => {
|
|
60
|
+
// Force a re-render by checking the current value
|
|
61
|
+
const currentStatus = (0, peers_sdk_1.userConnectStatus)();
|
|
62
|
+
if (currentStatus && typeof currentStatus === 'string') {
|
|
63
|
+
handleConnectStatusChange(currentStatus);
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
return () => {
|
|
68
|
+
disposed = true;
|
|
69
|
+
subscription?.dispose();
|
|
70
|
+
};
|
|
71
|
+
}, []);
|
|
72
|
+
// Handle connect status changes
|
|
73
|
+
const handleConnectStatusChange = (0, react_1.useCallback)(async (connectStatusValue) => {
|
|
74
|
+
if (!connectStatusValue || status === 'success')
|
|
75
|
+
return;
|
|
76
|
+
if (connectStatusValue.startsWith('Error:')) {
|
|
77
|
+
// Error status
|
|
78
|
+
setError(connectStatusValue.replace('Error: ', ''));
|
|
79
|
+
setStatus('error');
|
|
80
|
+
}
|
|
81
|
+
else if (connectStatusValue.length > 0) {
|
|
82
|
+
// Success - connectStatus is the remote userId
|
|
83
|
+
const remoteUserId = connectStatusValue;
|
|
84
|
+
try {
|
|
85
|
+
const userContext = await (0, peers_sdk_1.getUserContext)();
|
|
86
|
+
const me = await (0, peers_sdk_1.getMe)();
|
|
87
|
+
const remoteUser = await (0, peers_sdk_1.Users)(userContext.userDataContext).get(remoteUserId);
|
|
88
|
+
if (!remoteUser) {
|
|
89
|
+
setError('Could not find connected user');
|
|
90
|
+
setStatus('error');
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
const remoteDevice = await (0, peers_sdk_1.Devices)(userContext.userDataContext).findOne({ userId: remoteUserId });
|
|
94
|
+
if (!remoteDevice) {
|
|
95
|
+
setError('Could not find connected device but connection was successful');
|
|
96
|
+
setStatus('error');
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
// Build user connect info for confirmation hash
|
|
100
|
+
const myInfo = {
|
|
101
|
+
userId: me.userId,
|
|
102
|
+
publicKey: me.publicKey,
|
|
103
|
+
publicBoxKey: me.publicBoxKey,
|
|
104
|
+
deviceId: userContext.deviceId(),
|
|
105
|
+
};
|
|
106
|
+
const remoteInfo = {
|
|
107
|
+
userId: remoteUser.userId,
|
|
108
|
+
publicKey: remoteUser.publicKey,
|
|
109
|
+
publicBoxKey: remoteUser.publicBoxKey,
|
|
110
|
+
deviceId: remoteDevice.deviceId,
|
|
111
|
+
};
|
|
112
|
+
const confirmationHash = (0, peers_sdk_1.generateConfirmationHash)(myInfo, remoteInfo);
|
|
113
|
+
setResult({ remoteUser, confirmationHash });
|
|
114
|
+
setStatus('success');
|
|
115
|
+
// Clear the codes
|
|
116
|
+
(0, peers_sdk_1.userConnectCodeOffer)('');
|
|
117
|
+
(0, peers_sdk_1.userConnectCodeAnswer)('');
|
|
118
|
+
}
|
|
119
|
+
catch (err) {
|
|
120
|
+
setError(err.message || 'Failed to complete connection');
|
|
121
|
+
setStatus('error');
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}, [status]);
|
|
125
|
+
// React to userConnectStatus changes from useObservable
|
|
126
|
+
(0, react_1.useEffect)(() => {
|
|
127
|
+
if (connectStatus && typeof connectStatus === 'string') {
|
|
128
|
+
handleConnectStatusChange(connectStatus);
|
|
129
|
+
}
|
|
130
|
+
}, [connectStatus, handleConnectStatusChange]);
|
|
131
|
+
// Clean up on unmount
|
|
132
|
+
(0, react_1.useEffect)(() => {
|
|
133
|
+
return () => {
|
|
134
|
+
if (mode === 'initiate' && status === 'waiting') {
|
|
135
|
+
(0, peers_sdk_1.userConnectCodeOffer)('');
|
|
136
|
+
(0, peers_sdk_1.userConnectCodeAnswer)('');
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
}, [mode, status]);
|
|
140
|
+
const handleInitiate = (0, react_1.useCallback)(async () => {
|
|
141
|
+
setMode('initiate');
|
|
142
|
+
setStatus('waiting');
|
|
143
|
+
setError('');
|
|
144
|
+
(0, peers_sdk_1.userConnectStatus)(''); // Clear any previous status
|
|
145
|
+
// Generate the connection code
|
|
146
|
+
const code = (0, peers_sdk_1.generateConnectionCode)();
|
|
147
|
+
(0, peers_sdk_1.userConnectCodeOffer)(code.code);
|
|
148
|
+
const formattedCode = (0, peers_sdk_1.formatConnectionCode)(code.code);
|
|
149
|
+
setConnectionCode(formattedCode);
|
|
150
|
+
}, []);
|
|
151
|
+
const handleRespond = (0, react_1.useCallback)(async () => {
|
|
152
|
+
if (inputCode.replace(/[^0-9A-Za-z]/g, '').length !== 12) {
|
|
153
|
+
setError('Please enter a valid 12-character connection code');
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
setStatus('waiting');
|
|
157
|
+
setError('');
|
|
158
|
+
(0, peers_sdk_1.userConnectStatus)(''); // Clear any previous status
|
|
159
|
+
(0, peers_sdk_1.userConnectCodeAnswer)(inputCode);
|
|
160
|
+
}, [inputCode]);
|
|
161
|
+
const handleCancel = (0, react_1.useCallback)(async () => {
|
|
162
|
+
(0, peers_sdk_1.userConnectCodeOffer)('');
|
|
163
|
+
(0, peers_sdk_1.userConnectCodeAnswer)('');
|
|
164
|
+
(0, peers_sdk_1.userConnectStatus)('');
|
|
165
|
+
setMode('select');
|
|
166
|
+
setStatus('idle');
|
|
167
|
+
setConnectionCode('');
|
|
168
|
+
setError('');
|
|
169
|
+
}, []);
|
|
170
|
+
const handleReset = (0, react_1.useCallback)(() => {
|
|
171
|
+
(0, peers_sdk_1.userConnectCodeOffer)('');
|
|
172
|
+
(0, peers_sdk_1.userConnectCodeAnswer)('');
|
|
173
|
+
(0, peers_sdk_1.userConnectStatus)('');
|
|
174
|
+
setMode('select');
|
|
175
|
+
setStatus('idle');
|
|
176
|
+
setConnectionCode('');
|
|
177
|
+
setInputCode('');
|
|
178
|
+
setResult(null);
|
|
179
|
+
setError('');
|
|
180
|
+
setCopied(false);
|
|
181
|
+
}, []);
|
|
182
|
+
const handleSaveContact = (0, react_1.useCallback)(async () => {
|
|
183
|
+
if (!result)
|
|
184
|
+
return;
|
|
185
|
+
try {
|
|
186
|
+
const userContext = await (0, peers_sdk_1.getUserContext)();
|
|
187
|
+
// Contact is already saved by the device layer, just set trust level
|
|
188
|
+
await (0, peers_sdk_1.setUserTrustLevel)(result.remoteUser.userId, peers_sdk_1.TrustLevel.Trusted, userContext.userDataContext);
|
|
189
|
+
// Navigate to contact details
|
|
190
|
+
(0, globals_1.mainContentPath)(`contacts/${result.remoteUser.userId}`);
|
|
191
|
+
}
|
|
192
|
+
catch (err) {
|
|
193
|
+
setError(err.message || 'Failed to save contact');
|
|
194
|
+
}
|
|
195
|
+
}, [result]);
|
|
196
|
+
// Copy connection code to clipboard
|
|
197
|
+
const handleCopyCode = (0, react_1.useCallback)(async () => {
|
|
198
|
+
if (!connectionCode)
|
|
199
|
+
return;
|
|
200
|
+
try {
|
|
201
|
+
await navigator.clipboard.writeText(connectionCode);
|
|
202
|
+
setCopied(true);
|
|
203
|
+
setTimeout(() => setCopied(false), 2000);
|
|
204
|
+
}
|
|
205
|
+
catch (err) {
|
|
206
|
+
// Fallback for older browsers
|
|
207
|
+
const textArea = document.createElement('textarea');
|
|
208
|
+
textArea.value = connectionCode;
|
|
209
|
+
document.body.appendChild(textArea);
|
|
210
|
+
textArea.select();
|
|
211
|
+
document.execCommand('copy');
|
|
212
|
+
document.body.removeChild(textArea);
|
|
213
|
+
setCopied(true);
|
|
214
|
+
setTimeout(() => setCopied(false), 2000);
|
|
215
|
+
}
|
|
216
|
+
}, [connectionCode]);
|
|
217
|
+
// Format input code as user types
|
|
218
|
+
const handleCodeInput = (value) => {
|
|
219
|
+
// Remove non-alphanumeric characters
|
|
220
|
+
const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, '');
|
|
221
|
+
// Format as XXXX-YYYY-ZZZZ
|
|
222
|
+
let formatted = '';
|
|
223
|
+
for (let i = 0; i < cleaned.length && i < 12; i++) {
|
|
224
|
+
if (i === 4 || i === 8)
|
|
225
|
+
formatted += '-';
|
|
226
|
+
formatted += cleaned[i];
|
|
227
|
+
}
|
|
228
|
+
setInputCode(formatted);
|
|
229
|
+
};
|
|
230
|
+
return (react_1.default.createElement("div", { className: "container-fluid p-3" },
|
|
231
|
+
react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-4" },
|
|
232
|
+
react_1.default.createElement("h4", null,
|
|
233
|
+
react_1.default.createElement("i", { className: "bi-person-plus-fill me-2" }),
|
|
234
|
+
"Connect to New User"),
|
|
235
|
+
mode !== 'select' && (react_1.default.createElement("button", { className: "btn btn-outline-secondary btn-sm", onClick: handleReset },
|
|
236
|
+
react_1.default.createElement("i", { className: "bi-arrow-left me-1" }),
|
|
237
|
+
"Back"))),
|
|
238
|
+
mode === 'select' && (react_1.default.createElement("div", { className: "row g-3" },
|
|
239
|
+
react_1.default.createElement("div", { className: "col-md-6" },
|
|
240
|
+
react_1.default.createElement("div", { className: "card h-100 border-primary", style: { cursor: 'pointer' }, onClick: handleInitiate },
|
|
241
|
+
react_1.default.createElement("div", { className: "card-body text-center p-4" },
|
|
242
|
+
react_1.default.createElement("i", { className: "bi-qr-code display-4 text-primary mb-3" }),
|
|
243
|
+
react_1.default.createElement("h5", { className: "card-title" }, "Create Connection Code"),
|
|
244
|
+
react_1.default.createElement("p", { className: "card-text text-muted" }, "Generate a code to share with someone who wants to connect with you")))),
|
|
245
|
+
react_1.default.createElement("div", { className: "col-md-6" },
|
|
246
|
+
react_1.default.createElement("div", { className: "card h-100 border-success", style: { cursor: 'pointer' }, onClick: () => setMode('respond') },
|
|
247
|
+
react_1.default.createElement("div", { className: "card-body text-center p-4" },
|
|
248
|
+
react_1.default.createElement("i", { className: "bi-keyboard display-4 text-success mb-3" }),
|
|
249
|
+
react_1.default.createElement("h5", { className: "card-title" }, "Enter Connection Code"),
|
|
250
|
+
react_1.default.createElement("p", { className: "card-text text-muted" }, "Enter a code that someone shared with you to connect")))))),
|
|
251
|
+
mode === 'initiate' && status === 'waiting' && (react_1.default.createElement("div", { className: "text-center" },
|
|
252
|
+
react_1.default.createElement("div", { className: "mb-4" },
|
|
253
|
+
react_1.default.createElement("p", { className: "text-muted" }, "Share this code with the person you want to connect with:")),
|
|
254
|
+
react_1.default.createElement("div", { className: "mb-4", style: { maxWidth: '400px', margin: '0 auto' } },
|
|
255
|
+
react_1.default.createElement("div", { className: "input-group" },
|
|
256
|
+
react_1.default.createElement("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", value: connectionCode || 'XXXX-YYYY-ZZZZ', readOnly: true, style: { letterSpacing: '0.15em', fontSize: '1.5rem' } }),
|
|
257
|
+
react_1.default.createElement("button", { className: "btn btn-outline-primary", onClick: handleCopyCode, title: "Copy to clipboard" },
|
|
258
|
+
react_1.default.createElement("i", { className: copied ? "bi-check-lg" : "bi-clipboard" }))),
|
|
259
|
+
copied && (react_1.default.createElement("small", { className: "text-success mt-1 d-block" }, "Copied!"))),
|
|
260
|
+
react_1.default.createElement("div", { className: "mb-4" },
|
|
261
|
+
react_1.default.createElement("div", { className: "spinner-border spinner-border-sm text-primary me-2", role: "status" }),
|
|
262
|
+
react_1.default.createElement("span", { className: "text-muted" }, "Waiting for connection...")),
|
|
263
|
+
react_1.default.createElement("p", { className: "text-muted small" }, "This code will expire in 10 minutes"),
|
|
264
|
+
react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleCancel }, "Cancel"))),
|
|
265
|
+
mode === 'respond' && status !== 'success' && (react_1.default.createElement("div", { className: "text-center" },
|
|
266
|
+
react_1.default.createElement("div", { className: "mb-4" },
|
|
267
|
+
react_1.default.createElement("p", { className: "text-muted" }, "Enter the connection code shared with you:")),
|
|
268
|
+
react_1.default.createElement("div", { className: "mb-4", style: { maxWidth: '400px', margin: '0 auto' } },
|
|
269
|
+
react_1.default.createElement("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", placeholder: "XXXX-YYYY-ZZZZ", value: inputCode, onChange: (e) => handleCodeInput(e.target.value), maxLength: 14, style: { letterSpacing: '0.15em', fontSize: '1.5rem' }, autoFocus: true })),
|
|
270
|
+
error && (react_1.default.createElement("div", { className: "alert alert-danger", style: { maxWidth: '400px', margin: '0 auto 1rem' } }, error)),
|
|
271
|
+
react_1.default.createElement("button", { className: "btn btn-primary btn-lg", onClick: handleRespond, disabled: status === 'waiting' || inputCode.replace(/[^0-9A-Z]/gi, '').length !== 12 }, status === 'waiting' ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
272
|
+
react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-2", role: "status" }),
|
|
273
|
+
"Connecting...")) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
274
|
+
react_1.default.createElement("i", { className: "bi-link-45deg me-2" }),
|
|
275
|
+
"Connect"))))),
|
|
276
|
+
status === 'success' && result && (react_1.default.createElement("div", { className: "text-center" },
|
|
277
|
+
react_1.default.createElement("div", { className: "mb-4" },
|
|
278
|
+
react_1.default.createElement("i", { className: "bi-check-circle-fill text-success display-3" })),
|
|
279
|
+
react_1.default.createElement("h5", { className: "mb-4" }, "Connection Successful!"),
|
|
280
|
+
react_1.default.createElement("div", { className: "card mb-4", style: { maxWidth: '400px', margin: '0 auto' } },
|
|
281
|
+
react_1.default.createElement("div", { className: "card-body" },
|
|
282
|
+
react_1.default.createElement("p", { className: "text-muted mb-2" }, "Verify with the other person that you both see:"),
|
|
283
|
+
react_1.default.createElement("h3", { className: "font-monospace text-primary mb-3", style: { letterSpacing: '0.2em' } }, result.confirmationHash),
|
|
284
|
+
react_1.default.createElement("hr", null),
|
|
285
|
+
react_1.default.createElement("div", { className: "text-start" },
|
|
286
|
+
react_1.default.createElement("small", { className: "text-muted" }, "Name:"),
|
|
287
|
+
react_1.default.createElement("p", { className: "mb-2" }, result.remoteUser.name),
|
|
288
|
+
react_1.default.createElement("small", { className: "text-muted" }, "User ID:"),
|
|
289
|
+
react_1.default.createElement("p", { className: "font-monospace small mb-0" }, result.remoteUser.userId)))),
|
|
290
|
+
react_1.default.createElement("div", { className: "d-flex gap-2 justify-content-center" },
|
|
291
|
+
react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleSaveContact },
|
|
292
|
+
react_1.default.createElement("i", { className: "bi-check-lg me-2" }),
|
|
293
|
+
"Trust & View Contact"),
|
|
294
|
+
react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleReset }, "Connect Another")))),
|
|
295
|
+
status === 'error' && (react_1.default.createElement("div", { className: "text-center" },
|
|
296
|
+
react_1.default.createElement("div", { className: "mb-4" },
|
|
297
|
+
react_1.default.createElement("i", { className: "bi-x-circle-fill text-danger display-3" })),
|
|
298
|
+
react_1.default.createElement("h5", { className: "mb-4" }, "Connection Failed"),
|
|
299
|
+
react_1.default.createElement("div", { className: "alert alert-danger", style: { maxWidth: '400px', margin: '0 auto 1rem' } }, error),
|
|
300
|
+
react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleReset }, "Try Again")))));
|
|
301
|
+
}
|
|
302
|
+
(0, ui_loader_1.registerInternalPeersUI)({
|
|
303
|
+
peersUIId: '000user00connect0screen01',
|
|
304
|
+
component: UserConnect,
|
|
305
|
+
routes: [
|
|
306
|
+
{
|
|
307
|
+
isMatch: (props, context) => context.path === 'contacts/connect',
|
|
308
|
+
uiCategory: 'screen',
|
|
309
|
+
priority: 3
|
|
310
|
+
}
|
|
311
|
+
]
|
|
312
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@peers-app/peers-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/peers-app/peers-ui.git"
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"bootstrap": "^5.3.3",
|
|
30
|
-
"@peers-app/peers-sdk": "^0.
|
|
30
|
+
"@peers-app/peers-sdk": "^0.8.0",
|
|
31
31
|
"react": "^18.0.0",
|
|
32
32
|
"react-dom": "^18.0.0"
|
|
33
33
|
},
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"jest": "^29.7.0",
|
|
58
58
|
"jest-environment-jsdom": "^30.0.5",
|
|
59
59
|
"path-browserify": "^1.0.1",
|
|
60
|
-
"@peers-app/peers-sdk": "0.
|
|
60
|
+
"@peers-app/peers-sdk": "0.8.0",
|
|
61
61
|
"react": "^18.0.0",
|
|
62
62
|
"react-dom": "^18.0.0",
|
|
63
63
|
"string-width": "^7.1.0",
|
|
@@ -127,6 +127,10 @@ export function ContactList() {
|
|
|
127
127
|
<i className="bi-person-fill-check me-2" />
|
|
128
128
|
Contacts
|
|
129
129
|
</h4>
|
|
130
|
+
<a href="#contacts/connect" className="btn btn-primary btn-sm">
|
|
131
|
+
<i className="bi-person-plus me-1" />
|
|
132
|
+
Connect to New User
|
|
133
|
+
</a>
|
|
130
134
|
</div>
|
|
131
135
|
|
|
132
136
|
<div className="input-group mb-3">
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
// Import all contact screen components to ensure they register their routes
|
|
2
2
|
import './contact-list';
|
|
3
3
|
import './contact-details';
|
|
4
|
+
import './user-connect';
|
|
4
5
|
|
|
5
6
|
export * from "./contact-list";
|
|
6
|
-
export * from "./contact-details";
|
|
7
|
+
export * from "./contact-details";
|
|
8
|
+
export * from "./user-connect";
|
|
@@ -0,0 +1,452 @@
|
|
|
1
|
+
import {
|
|
2
|
+
formatConnectionCode,
|
|
3
|
+
generateConnectionCode,
|
|
4
|
+
generateConfirmationHash,
|
|
5
|
+
getMe,
|
|
6
|
+
getUserContext,
|
|
7
|
+
IUser,
|
|
8
|
+
IUserConnectInfo,
|
|
9
|
+
setUserTrustLevel,
|
|
10
|
+
TrustLevel,
|
|
11
|
+
userConnectCodeOffer,
|
|
12
|
+
userConnectCodeAnswer,
|
|
13
|
+
userConnectStatus,
|
|
14
|
+
Users,
|
|
15
|
+
Devices
|
|
16
|
+
} from "@peers-app/peers-sdk";
|
|
17
|
+
import React, { useState, useEffect, useCallback } from 'react';
|
|
18
|
+
import { mainContentPath } from '../../globals';
|
|
19
|
+
import { useObservable } from '../../hooks';
|
|
20
|
+
import { registerInternalPeersUI } from '../../ui-router/ui-loader';
|
|
21
|
+
|
|
22
|
+
type ConnectionMode = 'select' | 'initiate' | 'respond';
|
|
23
|
+
type ConnectionStatus = 'idle' | 'waiting' | 'success' | 'error';
|
|
24
|
+
|
|
25
|
+
interface ConnectionResult {
|
|
26
|
+
remoteUser: IUser;
|
|
27
|
+
confirmationHash: string;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export function UserConnect() {
|
|
31
|
+
const [mode, setMode] = useState<ConnectionMode>('select');
|
|
32
|
+
const [status, setStatus] = useState<ConnectionStatus>('idle');
|
|
33
|
+
const [connectionCode, setConnectionCode] = useState<string>('');
|
|
34
|
+
const [inputCode, setInputCode] = useState<string>('');
|
|
35
|
+
const [result, setResult] = useState<ConnectionResult | null>(null);
|
|
36
|
+
const [error, setError] = useState<string>('');
|
|
37
|
+
const [copied, setCopied] = useState(false);
|
|
38
|
+
|
|
39
|
+
// Subscribe to userConnectStatus from the device layer
|
|
40
|
+
const [connectStatus] = useObservable(userConnectStatus);
|
|
41
|
+
|
|
42
|
+
// Also set up a direct subscription after loading is complete
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
let disposed = false;
|
|
45
|
+
let subscription: { dispose: () => void } | undefined;
|
|
46
|
+
|
|
47
|
+
userConnectStatus.loadingPromise.then(() => {
|
|
48
|
+
if (disposed) return;
|
|
49
|
+
subscription = userConnectStatus.subscribe(() => {
|
|
50
|
+
// Force a re-render by checking the current value
|
|
51
|
+
const currentStatus = userConnectStatus();
|
|
52
|
+
if (currentStatus && typeof currentStatus === 'string') {
|
|
53
|
+
handleConnectStatusChange(currentStatus);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
return () => {
|
|
59
|
+
disposed = true;
|
|
60
|
+
subscription?.dispose();
|
|
61
|
+
};
|
|
62
|
+
}, []);
|
|
63
|
+
|
|
64
|
+
// Handle connect status changes
|
|
65
|
+
const handleConnectStatusChange = useCallback(async (connectStatusValue: string) => {
|
|
66
|
+
if (!connectStatusValue || status === 'success') return;
|
|
67
|
+
|
|
68
|
+
if (connectStatusValue.startsWith('Error:')) {
|
|
69
|
+
// Error status
|
|
70
|
+
setError(connectStatusValue.replace('Error: ', ''));
|
|
71
|
+
setStatus('error');
|
|
72
|
+
} else if (connectStatusValue.length > 0) {
|
|
73
|
+
// Success - connectStatus is the remote userId
|
|
74
|
+
const remoteUserId = connectStatusValue;
|
|
75
|
+
|
|
76
|
+
try {
|
|
77
|
+
const userContext = await getUserContext();
|
|
78
|
+
const me = await getMe();
|
|
79
|
+
const remoteUser = await Users(userContext.userDataContext).get(remoteUserId);
|
|
80
|
+
|
|
81
|
+
if (!remoteUser) {
|
|
82
|
+
setError('Could not find connected user');
|
|
83
|
+
setStatus('error');
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
const remoteDevice = await Devices(userContext.userDataContext).findOne({ userId: remoteUserId });
|
|
88
|
+
if (!remoteDevice) {
|
|
89
|
+
setError('Could not find connected device but connection was successful');
|
|
90
|
+
setStatus('error');
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Build user connect info for confirmation hash
|
|
95
|
+
const myInfo: IUserConnectInfo = {
|
|
96
|
+
userId: me.userId,
|
|
97
|
+
publicKey: me.publicKey,
|
|
98
|
+
publicBoxKey: me.publicBoxKey,
|
|
99
|
+
deviceId: userContext.deviceId(),
|
|
100
|
+
};
|
|
101
|
+
const remoteInfo: IUserConnectInfo = {
|
|
102
|
+
userId: remoteUser.userId,
|
|
103
|
+
publicKey: remoteUser.publicKey,
|
|
104
|
+
publicBoxKey: remoteUser.publicBoxKey,
|
|
105
|
+
deviceId: remoteDevice.deviceId,
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
const confirmationHash = generateConfirmationHash(myInfo, remoteInfo);
|
|
109
|
+
|
|
110
|
+
setResult({ remoteUser, confirmationHash });
|
|
111
|
+
setStatus('success');
|
|
112
|
+
|
|
113
|
+
// Clear the codes
|
|
114
|
+
userConnectCodeOffer('');
|
|
115
|
+
userConnectCodeAnswer('');
|
|
116
|
+
} catch (err: any) {
|
|
117
|
+
setError(err.message || 'Failed to complete connection');
|
|
118
|
+
setStatus('error');
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}, [status]);
|
|
122
|
+
|
|
123
|
+
// React to userConnectStatus changes from useObservable
|
|
124
|
+
useEffect(() => {
|
|
125
|
+
if (connectStatus && typeof connectStatus === 'string') {
|
|
126
|
+
handleConnectStatusChange(connectStatus);
|
|
127
|
+
}
|
|
128
|
+
}, [connectStatus, handleConnectStatusChange]);
|
|
129
|
+
|
|
130
|
+
// Clean up on unmount
|
|
131
|
+
useEffect(() => {
|
|
132
|
+
return () => {
|
|
133
|
+
if (mode === 'initiate' && status === 'waiting') {
|
|
134
|
+
userConnectCodeOffer('');
|
|
135
|
+
userConnectCodeAnswer('');
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
}, [mode, status]);
|
|
139
|
+
|
|
140
|
+
const handleInitiate = useCallback(async () => {
|
|
141
|
+
setMode('initiate');
|
|
142
|
+
setStatus('waiting');
|
|
143
|
+
setError('');
|
|
144
|
+
userConnectStatus(''); // Clear any previous status
|
|
145
|
+
|
|
146
|
+
// Generate the connection code
|
|
147
|
+
const code = generateConnectionCode();
|
|
148
|
+
userConnectCodeOffer(code.code);
|
|
149
|
+
const formattedCode = formatConnectionCode(code.code);
|
|
150
|
+
setConnectionCode(formattedCode);
|
|
151
|
+
}, []);
|
|
152
|
+
|
|
153
|
+
const handleRespond = useCallback(async () => {
|
|
154
|
+
if (inputCode.replace(/[^0-9A-Za-z]/g, '').length !== 12) {
|
|
155
|
+
setError('Please enter a valid 12-character connection code');
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
setStatus('waiting');
|
|
160
|
+
setError('');
|
|
161
|
+
userConnectStatus(''); // Clear any previous status
|
|
162
|
+
userConnectCodeAnswer(inputCode);
|
|
163
|
+
}, [inputCode]);
|
|
164
|
+
|
|
165
|
+
const handleCancel = useCallback(async () => {
|
|
166
|
+
userConnectCodeOffer('');
|
|
167
|
+
userConnectCodeAnswer('');
|
|
168
|
+
userConnectStatus('');
|
|
169
|
+
setMode('select');
|
|
170
|
+
setStatus('idle');
|
|
171
|
+
setConnectionCode('');
|
|
172
|
+
setError('');
|
|
173
|
+
}, []);
|
|
174
|
+
|
|
175
|
+
const handleReset = useCallback(() => {
|
|
176
|
+
userConnectCodeOffer('');
|
|
177
|
+
userConnectCodeAnswer('');
|
|
178
|
+
userConnectStatus('');
|
|
179
|
+
setMode('select');
|
|
180
|
+
setStatus('idle');
|
|
181
|
+
setConnectionCode('');
|
|
182
|
+
setInputCode('');
|
|
183
|
+
setResult(null);
|
|
184
|
+
setError('');
|
|
185
|
+
setCopied(false);
|
|
186
|
+
}, []);
|
|
187
|
+
|
|
188
|
+
const handleSaveContact = useCallback(async () => {
|
|
189
|
+
if (!result) return;
|
|
190
|
+
|
|
191
|
+
try {
|
|
192
|
+
const userContext = await getUserContext();
|
|
193
|
+
|
|
194
|
+
// Contact is already saved by the device layer, just set trust level
|
|
195
|
+
await setUserTrustLevel(result.remoteUser.userId, TrustLevel.Trusted, userContext.userDataContext);
|
|
196
|
+
|
|
197
|
+
// Navigate to contact details
|
|
198
|
+
mainContentPath(`contacts/${result.remoteUser.userId}`);
|
|
199
|
+
} catch (err: any) {
|
|
200
|
+
setError(err.message || 'Failed to save contact');
|
|
201
|
+
}
|
|
202
|
+
}, [result]);
|
|
203
|
+
|
|
204
|
+
// Copy connection code to clipboard
|
|
205
|
+
const handleCopyCode = useCallback(async () => {
|
|
206
|
+
if (!connectionCode) return;
|
|
207
|
+
try {
|
|
208
|
+
await navigator.clipboard.writeText(connectionCode);
|
|
209
|
+
setCopied(true);
|
|
210
|
+
setTimeout(() => setCopied(false), 2000);
|
|
211
|
+
} catch (err) {
|
|
212
|
+
// Fallback for older browsers
|
|
213
|
+
const textArea = document.createElement('textarea');
|
|
214
|
+
textArea.value = connectionCode;
|
|
215
|
+
document.body.appendChild(textArea);
|
|
216
|
+
textArea.select();
|
|
217
|
+
document.execCommand('copy');
|
|
218
|
+
document.body.removeChild(textArea);
|
|
219
|
+
setCopied(true);
|
|
220
|
+
setTimeout(() => setCopied(false), 2000);
|
|
221
|
+
}
|
|
222
|
+
}, [connectionCode]);
|
|
223
|
+
|
|
224
|
+
// Format input code as user types
|
|
225
|
+
const handleCodeInput = (value: string) => {
|
|
226
|
+
// Remove non-alphanumeric characters
|
|
227
|
+
const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, '');
|
|
228
|
+
|
|
229
|
+
// Format as XXXX-YYYY-ZZZZ
|
|
230
|
+
let formatted = '';
|
|
231
|
+
for (let i = 0; i < cleaned.length && i < 12; i++) {
|
|
232
|
+
if (i === 4 || i === 8) formatted += '-';
|
|
233
|
+
formatted += cleaned[i];
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
setInputCode(formatted);
|
|
237
|
+
};
|
|
238
|
+
|
|
239
|
+
return (
|
|
240
|
+
<div className="container-fluid p-3">
|
|
241
|
+
<div className="d-flex justify-content-between align-items-center mb-4">
|
|
242
|
+
<h4>
|
|
243
|
+
<i className="bi-person-plus-fill me-2" />
|
|
244
|
+
Connect to New User
|
|
245
|
+
</h4>
|
|
246
|
+
{mode !== 'select' && (
|
|
247
|
+
<button className="btn btn-outline-secondary btn-sm" onClick={handleReset}>
|
|
248
|
+
<i className="bi-arrow-left me-1" />
|
|
249
|
+
Back
|
|
250
|
+
</button>
|
|
251
|
+
)}
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
{/* Mode Selection */}
|
|
255
|
+
{mode === 'select' && (
|
|
256
|
+
<div className="row g-3">
|
|
257
|
+
<div className="col-md-6">
|
|
258
|
+
<div
|
|
259
|
+
className="card h-100 border-primary"
|
|
260
|
+
style={{ cursor: 'pointer' }}
|
|
261
|
+
onClick={handleInitiate}
|
|
262
|
+
>
|
|
263
|
+
<div className="card-body text-center p-4">
|
|
264
|
+
<i className="bi-qr-code display-4 text-primary mb-3" />
|
|
265
|
+
<h5 className="card-title">Create Connection Code</h5>
|
|
266
|
+
<p className="card-text text-muted">
|
|
267
|
+
Generate a code to share with someone who wants to connect with you
|
|
268
|
+
</p>
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
<div className="col-md-6">
|
|
273
|
+
<div
|
|
274
|
+
className="card h-100 border-success"
|
|
275
|
+
style={{ cursor: 'pointer' }}
|
|
276
|
+
onClick={() => setMode('respond')}
|
|
277
|
+
>
|
|
278
|
+
<div className="card-body text-center p-4">
|
|
279
|
+
<i className="bi-keyboard display-4 text-success mb-3" />
|
|
280
|
+
<h5 className="card-title">Enter Connection Code</h5>
|
|
281
|
+
<p className="card-text text-muted">
|
|
282
|
+
Enter a code that someone shared with you to connect
|
|
283
|
+
</p>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
)}
|
|
289
|
+
|
|
290
|
+
{/* Initiate Mode - Show Generated Code */}
|
|
291
|
+
{mode === 'initiate' && status === 'waiting' && (
|
|
292
|
+
<div className="text-center">
|
|
293
|
+
<div className="mb-4">
|
|
294
|
+
<p className="text-muted">Share this code with the person you want to connect with:</p>
|
|
295
|
+
</div>
|
|
296
|
+
|
|
297
|
+
<div className="mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
|
|
298
|
+
<div className="input-group">
|
|
299
|
+
<input
|
|
300
|
+
type="text"
|
|
301
|
+
className="form-control form-control-lg text-center font-monospace"
|
|
302
|
+
value={connectionCode || 'XXXX-YYYY-ZZZZ'}
|
|
303
|
+
readOnly
|
|
304
|
+
style={{ letterSpacing: '0.15em', fontSize: '1.5rem' }}
|
|
305
|
+
/>
|
|
306
|
+
<button
|
|
307
|
+
className="btn btn-outline-primary"
|
|
308
|
+
onClick={handleCopyCode}
|
|
309
|
+
title="Copy to clipboard"
|
|
310
|
+
>
|
|
311
|
+
<i className={copied ? "bi-check-lg" : "bi-clipboard"} />
|
|
312
|
+
</button>
|
|
313
|
+
</div>
|
|
314
|
+
{copied && (
|
|
315
|
+
<small className="text-success mt-1 d-block">Copied!</small>
|
|
316
|
+
)}
|
|
317
|
+
</div>
|
|
318
|
+
|
|
319
|
+
<div className="mb-4">
|
|
320
|
+
<div className="spinner-border spinner-border-sm text-primary me-2" role="status" />
|
|
321
|
+
<span className="text-muted">Waiting for connection...</span>
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
<p className="text-muted small">
|
|
325
|
+
This code will expire in 10 minutes
|
|
326
|
+
</p>
|
|
327
|
+
|
|
328
|
+
<button className="btn btn-outline-secondary" onClick={handleCancel}>
|
|
329
|
+
Cancel
|
|
330
|
+
</button>
|
|
331
|
+
</div>
|
|
332
|
+
)}
|
|
333
|
+
|
|
334
|
+
{/* Respond Mode - Enter Code */}
|
|
335
|
+
{mode === 'respond' && status !== 'success' && (
|
|
336
|
+
<div className="text-center">
|
|
337
|
+
<div className="mb-4">
|
|
338
|
+
<p className="text-muted">Enter the connection code shared with you:</p>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div className="mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
|
|
342
|
+
<input
|
|
343
|
+
type="text"
|
|
344
|
+
className="form-control form-control-lg text-center font-monospace"
|
|
345
|
+
placeholder="XXXX-YYYY-ZZZZ"
|
|
346
|
+
value={inputCode}
|
|
347
|
+
onChange={(e) => handleCodeInput(e.target.value)}
|
|
348
|
+
maxLength={14}
|
|
349
|
+
style={{ letterSpacing: '0.15em', fontSize: '1.5rem' }}
|
|
350
|
+
autoFocus
|
|
351
|
+
/>
|
|
352
|
+
</div>
|
|
353
|
+
|
|
354
|
+
{error && (
|
|
355
|
+
<div className="alert alert-danger" style={{ maxWidth: '400px', margin: '0 auto 1rem' }}>
|
|
356
|
+
{error}
|
|
357
|
+
</div>
|
|
358
|
+
)}
|
|
359
|
+
|
|
360
|
+
<button
|
|
361
|
+
className="btn btn-primary btn-lg"
|
|
362
|
+
onClick={handleRespond}
|
|
363
|
+
disabled={status === 'waiting' || inputCode.replace(/[^0-9A-Z]/gi, '').length !== 12}
|
|
364
|
+
>
|
|
365
|
+
{status === 'waiting' ? (
|
|
366
|
+
<>
|
|
367
|
+
<span className="spinner-border spinner-border-sm me-2" role="status" />
|
|
368
|
+
Connecting...
|
|
369
|
+
</>
|
|
370
|
+
) : (
|
|
371
|
+
<>
|
|
372
|
+
<i className="bi-link-45deg me-2" />
|
|
373
|
+
Connect
|
|
374
|
+
</>
|
|
375
|
+
)}
|
|
376
|
+
</button>
|
|
377
|
+
</div>
|
|
378
|
+
)}
|
|
379
|
+
|
|
380
|
+
{/* Success State */}
|
|
381
|
+
{status === 'success' && result && (
|
|
382
|
+
<div className="text-center">
|
|
383
|
+
<div className="mb-4">
|
|
384
|
+
<i className="bi-check-circle-fill text-success display-3" />
|
|
385
|
+
</div>
|
|
386
|
+
|
|
387
|
+
<h5 className="mb-4">Connection Successful!</h5>
|
|
388
|
+
|
|
389
|
+
<div className="card mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
|
|
390
|
+
<div className="card-body">
|
|
391
|
+
<p className="text-muted mb-2">Verify with the other person that you both see:</p>
|
|
392
|
+
<h3 className="font-monospace text-primary mb-3" style={{ letterSpacing: '0.2em' }}>
|
|
393
|
+
{result.confirmationHash}
|
|
394
|
+
</h3>
|
|
395
|
+
|
|
396
|
+
<hr />
|
|
397
|
+
|
|
398
|
+
<div className="text-start">
|
|
399
|
+
<small className="text-muted">Name:</small>
|
|
400
|
+
<p className="mb-2">{result.remoteUser.name}</p>
|
|
401
|
+
|
|
402
|
+
<small className="text-muted">User ID:</small>
|
|
403
|
+
<p className="font-monospace small mb-0">{result.remoteUser.userId}</p>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
|
|
408
|
+
<div className="d-flex gap-2 justify-content-center">
|
|
409
|
+
<button className="btn btn-primary" onClick={handleSaveContact}>
|
|
410
|
+
<i className="bi-check-lg me-2" />
|
|
411
|
+
Trust & View Contact
|
|
412
|
+
</button>
|
|
413
|
+
<button className="btn btn-outline-secondary" onClick={handleReset}>
|
|
414
|
+
Connect Another
|
|
415
|
+
</button>
|
|
416
|
+
</div>
|
|
417
|
+
</div>
|
|
418
|
+
)}
|
|
419
|
+
|
|
420
|
+
{/* Error State */}
|
|
421
|
+
{status === 'error' && (
|
|
422
|
+
<div className="text-center">
|
|
423
|
+
<div className="mb-4">
|
|
424
|
+
<i className="bi-x-circle-fill text-danger display-3" />
|
|
425
|
+
</div>
|
|
426
|
+
|
|
427
|
+
<h5 className="mb-4">Connection Failed</h5>
|
|
428
|
+
|
|
429
|
+
<div className="alert alert-danger" style={{ maxWidth: '400px', margin: '0 auto 1rem' }}>
|
|
430
|
+
{error}
|
|
431
|
+
</div>
|
|
432
|
+
|
|
433
|
+
<button className="btn btn-primary" onClick={handleReset}>
|
|
434
|
+
Try Again
|
|
435
|
+
</button>
|
|
436
|
+
</div>
|
|
437
|
+
)}
|
|
438
|
+
</div>
|
|
439
|
+
);
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
registerInternalPeersUI({
|
|
443
|
+
peersUIId: '000user00connect0screen01',
|
|
444
|
+
component: UserConnect,
|
|
445
|
+
routes: [
|
|
446
|
+
{
|
|
447
|
+
isMatch: (props, context) => context.path === 'contacts/connect',
|
|
448
|
+
uiCategory: 'screen',
|
|
449
|
+
priority: 3
|
|
450
|
+
}
|
|
451
|
+
]
|
|
452
|
+
});
|