feat: add ConnectInstanceModal for federation friend connect flow
This commit is contained in:
Jannis Braun
@@ -0,0 +1,161 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useInstanceConnect } from '../../hooks/useInstanceConnect';
|
||||
|
||||
interface ConnectInstanceModalProps {
|
||||
domain: string;
|
||||
targetDisplayName: string;
|
||||
isReconnect?: boolean;
|
||||
actionLabel?: string;
|
||||
onConnected(result: 'new' | 'reconnect'): void;
|
||||
onCancel(): void;
|
||||
}
|
||||
|
||||
export function ConnectInstanceModal({
|
||||
domain,
|
||||
targetDisplayName,
|
||||
isReconnect = false,
|
||||
actionLabel,
|
||||
onConnected,
|
||||
onCancel,
|
||||
}: ConnectInstanceModalProps) {
|
||||
const [password, setPassword] = useState('');
|
||||
const { connect, isConnecting, error, clearError } = useInstanceConnect();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const resolvedLabel = actionLabel
|
||||
?? (isReconnect ? 'Reconnect & Add Friend' : 'Connect & Add Friend');
|
||||
|
||||
// Focus password input on mount
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => inputRef.current?.focus(), 50);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
// Escape key handler — stop propagation to prevent parent modal from closing
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
e.stopPropagation();
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKey, true); // capture phase
|
||||
return () => document.removeEventListener('keydown', handleKey, true);
|
||||
}, [onCancel]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!password.trim() || isConnecting) return;
|
||||
|
||||
try {
|
||||
const result = await connect(domain, password.trim());
|
||||
onConnected(result);
|
||||
} catch {
|
||||
// Error state is managed by the hook — UI updates via `error`
|
||||
}
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[210] flex items-center justify-center animate-fade-in">
|
||||
{/* Lighter backdrop to avoid compounding with parent modal */}
|
||||
<div className="absolute inset-0 bg-black/30" onClick={onCancel} />
|
||||
|
||||
<div className="relative w-full max-w-sm mx-4 glass-modal rounded-lg animate-slide-up overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="px-5 pt-5 pb-0">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-accent-lavender/15 flex items-center justify-center flex-shrink-0">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" className="text-accent-lavender">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-[16px] font-bold text-txt-primary">
|
||||
{isReconnect ? 'Reconnect to Instance' : 'Connect to Instance'}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-[13px] text-txt-secondary leading-relaxed mb-4">
|
||||
{isReconnect ? (
|
||||
<>
|
||||
Your connection to <strong className="text-txt-primary font-semibold">{domain}</strong> was lost.
|
||||
Re-enter your password to reconnect and send a friend request to{' '}
|
||||
<strong className="text-txt-primary font-semibold">{targetDisplayName}</strong>.
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<strong className="text-txt-primary font-semibold">{targetDisplayName}</strong> is on{' '}
|
||||
<strong className="text-txt-primary font-semibold">{domain}</strong>, an instance you
|
||||
haven't connected to yet. Connect to send a friend request.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
||||
{/* Instance badge */}
|
||||
<div className="flex items-center gap-2.5 px-3 py-2.5 bg-white/[0.03] border border-white/[0.06] rounded-lg mb-4">
|
||||
<div className="w-7 h-7 rounded-md bg-accent-sky/12 flex items-center justify-center flex-shrink-0">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-accent-sky">
|
||||
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[12px] font-semibold text-txt-primary">{domain}</div>
|
||||
<div className="text-[11px] text-txt-tertiary">Remote Backspace instance</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="px-5 pb-5">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="password"
|
||||
className="input-standard w-full py-2.5 mb-1"
|
||||
placeholder="Your password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (error) clearError();
|
||||
}}
|
||||
disabled={isConnecting}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
|
||||
{/* Error text */}
|
||||
{error && (
|
||||
<p className="text-[12px] text-txt-danger mt-1 mb-2">{error}</p>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isConnecting || !password.trim()}
|
||||
className="flex-1 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-accent-primary hover:bg-accent-primary/80 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isConnecting ? (
|
||||
<>
|
||||
<svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
Connecting...
|
||||
</>
|
||||
) : (
|
||||
resolvedLabel
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={isConnecting}
|
||||
className="py-2.5 px-4 rounded-lg text-[13px] font-medium text-txt-tertiary border border-white/[0.06] hover:bg-white/[0.06] transition-colors disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user