chore: update/make more clear connect flow
This commit is contained in:
Senko-san
@@ -2,11 +2,11 @@ import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { FetchBaseQueryError } from '@reduxjs/toolkit/query';
|
||||
import { Card, TextField, Button, Callout, Badge } from '@olly/modern-sk';
|
||||
import { Card, TextField, Button, Callout, Badge, Dialog } from '@olly/modern-sk';
|
||||
import { Icon } from '../../components/common/Icon';
|
||||
import { useAppDispatch } from '../../hooks/useAppDispatch';
|
||||
import { useConnectionStatus } from '../../hooks/useConnectionStatus';
|
||||
import { setTokens, setUser } from '../../store/slices/auth';
|
||||
import { setApiBaseUrl } from '../../config/runtime-config';
|
||||
import {
|
||||
useLoginMutation,
|
||||
useRegisterMutation,
|
||||
@@ -17,10 +17,27 @@ import {
|
||||
getActiveInstanceId,
|
||||
setActiveInstanceId,
|
||||
removeInstance,
|
||||
clearInstanceAuth,
|
||||
upsertInstance,
|
||||
type Instance,
|
||||
} from '../../config/instances';
|
||||
|
||||
type Mode = 'login' | 'register';
|
||||
|
||||
const HEALTH_VARIANTS = {
|
||||
connected: 'lime',
|
||||
connecting: 'neutral',
|
||||
disconnected: 'ember',
|
||||
error: 'ember',
|
||||
} as const;
|
||||
|
||||
const HEALTH_KEY = {
|
||||
connected: 'conn.connected',
|
||||
connecting: 'conn.connecting',
|
||||
disconnected: 'conn.disconnected',
|
||||
error: 'conn.error',
|
||||
} as const;
|
||||
|
||||
/** Map an RTKQ login failure to a user-facing i18n key. */
|
||||
function resolveLoginError(err: unknown): string {
|
||||
const e = err as FetchBaseQueryError | undefined;
|
||||
@@ -43,6 +60,121 @@ function resolveRegisterError(err: unknown): string {
|
||||
return 'connect.errors.registerFailed';
|
||||
}
|
||||
|
||||
function InstanceRow({
|
||||
inst,
|
||||
selected,
|
||||
onSelect,
|
||||
onLogout,
|
||||
onRemove,
|
||||
}: {
|
||||
inst: Instance;
|
||||
selected: boolean;
|
||||
onSelect: () => void;
|
||||
onLogout: () => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const status = useConnectionStatus(inst.baseUrl);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.625rem',
|
||||
padding: '0.375rem 0',
|
||||
}}
|
||||
>
|
||||
<Badge variant={HEALTH_VARIANTS[status]} dot>
|
||||
{t(HEALTH_KEY[status])}
|
||||
</Badge>
|
||||
<div style={{ minWidth: 0, flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-1)',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{inst.name}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '0.75rem',
|
||||
color: 'var(--color-text-3)',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{inst.baseUrl}
|
||||
</div>
|
||||
</div>
|
||||
{selected ? (
|
||||
<Badge variant="outline">{t('connect.domains.selected')}</Badge>
|
||||
) : (
|
||||
<Button variant="ghost" size="sm" onClick={onSelect}>
|
||||
{t('connect.domains.use')}
|
||||
</Button>
|
||||
)}
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onOpenChange={setDialogOpen}
|
||||
title={t('connect.removeDialog.title')}
|
||||
description={t('connect.removeDialog.description', {
|
||||
name: inst.name,
|
||||
})}
|
||||
trigger={
|
||||
<button
|
||||
type="button"
|
||||
className="iconbtn sm"
|
||||
title={t('connect.domains.forgetTitle')}
|
||||
>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
}
|
||||
footer={
|
||||
<div
|
||||
style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setDialogOpen(false)}
|
||||
>
|
||||
{t('connect.removeDialog.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setDialogOpen(false);
|
||||
onLogout();
|
||||
}}
|
||||
>
|
||||
{t('connect.removeDialog.logout')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ember"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setDialogOpen(false);
|
||||
onRemove();
|
||||
}}
|
||||
>
|
||||
{t('connect.removeDialog.removeAndLogout')}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ConnectPage() {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
@@ -50,10 +182,15 @@ export function ConnectPage() {
|
||||
|
||||
const [rev, setRev] = useState(0);
|
||||
const instances = listInstances();
|
||||
const activeId = getActiveInstanceId();
|
||||
|
||||
const [selectedId, setSelectedId] = useState<string | null>(() =>
|
||||
getActiveInstanceId(),
|
||||
);
|
||||
const selectedInstance = instances.find((i) => i.id === selectedId) ?? null;
|
||||
|
||||
const [addUrl, setAddUrl] = useState('https://');
|
||||
|
||||
const [mode, setMode] = useState<Mode>('login');
|
||||
const [apiUrl, setApiUrl] = useState('https://');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -67,23 +204,40 @@ export function ConnectPage() {
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const switchTo = (id: string) => {
|
||||
// Switching the active instance and reloading lets the app pick the saved
|
||||
// session for that instance back up (if any); if it has none, ProtectedRoute
|
||||
// bounces back here and `selectedId` defaults to it, surfacing the login card.
|
||||
const selectInstance = (id: string) => {
|
||||
setActiveInstanceId(id);
|
||||
window.location.assign('/');
|
||||
};
|
||||
|
||||
const forget = (id: string) => {
|
||||
const handleAdd = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const url = addUrl.trim();
|
||||
if (!url || url === 'https://') return;
|
||||
const inst = upsertInstance(url);
|
||||
setActiveInstanceId(inst.id);
|
||||
setAddUrl('https://');
|
||||
setSelectedId(inst.id);
|
||||
setRev((r) => r + 1);
|
||||
};
|
||||
|
||||
const handleLogout = (id: string) => {
|
||||
clearInstanceAuth(id);
|
||||
setRev((r) => r + 1);
|
||||
};
|
||||
|
||||
const handleRemove = (id: string) => {
|
||||
removeInstance(id);
|
||||
if (selectedId === id) setSelectedId(getActiveInstanceId());
|
||||
setRev((r) => r + 1);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedInstance) return;
|
||||
setError(null);
|
||||
// Point the API layer at this backend *before* logging in — baseQuery reads
|
||||
// the active instance's URL at request time. Auth tokens then persist under
|
||||
// that instance's namespace, never bleeding across servers.
|
||||
setApiBaseUrl(apiUrl);
|
||||
|
||||
try {
|
||||
const action =
|
||||
@@ -145,204 +299,160 @@ export function ConnectPage() {
|
||||
<Icon name="vinyl-record" fill /> MCMA
|
||||
</h1>
|
||||
|
||||
{instances.length > 0 && (
|
||||
<Card>
|
||||
<div
|
||||
style={{
|
||||
padding: '1.25rem 1.5rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<span className="msk-label" style={{ marginBottom: '0.25rem' }}>
|
||||
{t('connect.savedInstances')}
|
||||
</span>
|
||||
{instances.map((inst) => (
|
||||
<div
|
||||
key={inst.id}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.625rem',
|
||||
padding: '0.375rem 0',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`led ${inst.id === activeId ? 'online' : 'offline'}`}
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
background:
|
||||
inst.id === activeId ? 'var(--lime)' : 'var(--fg-3)',
|
||||
boxShadow:
|
||||
inst.id === activeId ? '0 0 6px var(--lime)' : 'none',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<div style={{ minWidth: 0, flex: 1 }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-1)',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{inst.name}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '0.75rem',
|
||||
color: 'var(--color-text-3)',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{inst.baseUrl}
|
||||
</div>
|
||||
</div>
|
||||
{inst.id === activeId ? (
|
||||
<Badge variant="lime">{t('connect.active')}</Badge>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => switchTo(inst.id)}
|
||||
>
|
||||
{t('connect.use')}
|
||||
</Button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="iconbtn sm"
|
||||
onClick={() => forget(inst.id)}
|
||||
title={t('connect.forgetTitle')}
|
||||
>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
<div
|
||||
style={{
|
||||
padding: '1.25rem 1.5rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1rem',
|
||||
padding: '1.5rem',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<span className="msk-label">
|
||||
{mode === 'register'
|
||||
? t('connect.form.registerTitle')
|
||||
: t('connect.form.title')}
|
||||
</span>
|
||||
<div>
|
||||
<label style={labelStyle}>{t('connect.form.serverUrl')}</label>
|
||||
<TextField
|
||||
value={apiUrl}
|
||||
onChange={(e) => setApiUrl(e.target.value)}
|
||||
placeholder="https://your-server.example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={labelStyle}>{t('connect.form.username')}</label>
|
||||
<TextField
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="username"
|
||||
autoComplete="username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={labelStyle}>{t('connect.form.password')}</label>
|
||||
<TextField
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="password"
|
||||
autoComplete={
|
||||
mode === 'register' ? 'new-password' : 'current-password'
|
||||
}
|
||||
required
|
||||
/>
|
||||
{mode === 'register' && (
|
||||
<span
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
color: 'var(--color-text-3)',
|
||||
marginTop: '0.375rem',
|
||||
}}
|
||||
>
|
||||
{t('connect.form.passwordHint')}
|
||||
{instances.length > 0 && (
|
||||
<>
|
||||
<span className="msk-label" style={{ marginBottom: '0.25rem' }}>
|
||||
{t('connect.domains.title')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{error && <Callout variant="danger">{t(error)}</Callout>}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={isLoading}
|
||||
style={{ marginTop: '0.5rem' }}
|
||||
{instances.map((inst) => (
|
||||
<InstanceRow
|
||||
key={inst.id}
|
||||
inst={inst}
|
||||
selected={inst.id === selectedId}
|
||||
onSelect={() => selectInstance(inst.id)}
|
||||
onLogout={() => handleLogout(inst.id)}
|
||||
onRemove={() => handleRemove(inst.id)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
<form
|
||||
onSubmit={handleAdd}
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
marginTop: instances.length > 0 ? '0.5rem' : 0,
|
||||
}}
|
||||
>
|
||||
{isLoading
|
||||
? mode === 'register'
|
||||
? t('connect.form.registering')
|
||||
: t('connect.form.submitting')
|
||||
: mode === 'register'
|
||||
? t('connect.form.registerSubmit')
|
||||
: t('connect.form.submit')}
|
||||
</Button>
|
||||
<TextField
|
||||
value={addUrl}
|
||||
onChange={(e) => setAddUrl(e.target.value)}
|
||||
placeholder={t('connect.domains.addPlaceholder')}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Button type="submit" variant="primary">
|
||||
<Icon name="plus" /> {t('connect.domains.addButton')}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{REGISTRATION_ENABLED && (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
fontSize: '0.8125rem',
|
||||
color: 'var(--color-text-3)',
|
||||
}}
|
||||
>
|
||||
{mode === 'register' ? (
|
||||
<>
|
||||
{t('connect.form.haveAccount')}{' '}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => switchMode('login')}
|
||||
>
|
||||
{t('connect.form.signInLink')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t('connect.form.noAccount')}{' '}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => switchMode('register')}
|
||||
>
|
||||
{t('connect.form.registerLink')}
|
||||
</Button>
|
||||
</>
|
||||
{selectedInstance && (
|
||||
<Card>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1rem',
|
||||
padding: '1.5rem',
|
||||
}}
|
||||
>
|
||||
<span className="msk-label">
|
||||
{mode === 'register'
|
||||
? t('connect.login.registerTitle', {
|
||||
name: selectedInstance.name,
|
||||
})
|
||||
: t('connect.login.title', { name: selectedInstance.name })}
|
||||
</span>
|
||||
<div>
|
||||
<label style={labelStyle}>{t('connect.login.username')}</label>
|
||||
<TextField
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="username"
|
||||
autoComplete="username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={labelStyle}>{t('connect.login.password')}</label>
|
||||
<TextField
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="password"
|
||||
autoComplete={
|
||||
mode === 'register' ? 'new-password' : 'current-password'
|
||||
}
|
||||
required
|
||||
/>
|
||||
{mode === 'register' && (
|
||||
<span
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
color: 'var(--color-text-3)',
|
||||
marginTop: '0.375rem',
|
||||
}}
|
||||
>
|
||||
{t('connect.login.passwordHint')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</Card>
|
||||
{error && <Callout variant="danger">{t(error)}</Callout>}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={isLoading}
|
||||
style={{ marginTop: '0.5rem' }}
|
||||
>
|
||||
{isLoading
|
||||
? mode === 'register'
|
||||
? t('connect.login.registering')
|
||||
: t('connect.login.submitting')
|
||||
: mode === 'register'
|
||||
? t('connect.login.registerSubmit')
|
||||
: t('connect.login.submit')}
|
||||
</Button>
|
||||
|
||||
{REGISTRATION_ENABLED && (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
fontSize: '0.8125rem',
|
||||
color: 'var(--color-text-3)',
|
||||
}}
|
||||
>
|
||||
{mode === 'register' ? (
|
||||
<>
|
||||
{t('connect.login.haveAccount')}{' '}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => switchMode('login')}
|
||||
>
|
||||
{t('connect.login.signInLink')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t('connect.login.noAccount')}{' '}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => switchMode('register')}
|
||||
>
|
||||
{t('connect.login.registerLink')}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user