Public Access
feat(psn): add PlayStation link card and PSN import
Settings card to link and unlink with the NPSSO, shows the expiry date. Import page gets a PSN source; blocked when the link has ended. English and German texts.
This commit is contained in:
lobo committed
1 parent
6ae2abee07
commit
599b083591
18 files changed
+573
-12
No files matched your search
@@ -0,0 +1,136 @@
|
||||
import {useState} from 'react';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {useTranslation} from 'react-i18next';
|
||||
import {Gamepad, Link2, Loader2, Unlink, Upload} from 'lucide-react';
|
||||
import {toast} from 'sonner';
|
||||
|
||||
import {Button} from '@/components/ui/button';
|
||||
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
|
||||
import {Input} from '@/components/ui/input';
|
||||
import usePsnAccount from '../hooks/usePsnAccount.js';
|
||||
import {formatDate} from '../utils/format.js';
|
||||
import {isExpired, linkPsn, NPSSO_PAGE_URL, unlinkPsn} from '../utils/psn.js';
|
||||
|
||||
/**
|
||||
* The linked PlayStation account. The user pastes an NPSSO once; Core keeps only an encrypted token for about 10 days,
|
||||
* so the card shows when the link ends.
|
||||
*/
|
||||
export default function PsnAccountCard() {
|
||||
const {t, i18n} = useTranslation();
|
||||
const {account, setAccount, failed} = usePsnAccount();
|
||||
const [npsso, setNpsso] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const link = async (event) => {
|
||||
event.preventDefault();
|
||||
setBusy(true);
|
||||
try {
|
||||
const response = await linkPsn(npsso.trim());
|
||||
if (response.status === 401) return;
|
||||
if (response.ok) {
|
||||
setAccount(await response.json());
|
||||
toast.success(t('SETTINGS.PSN.LINKED'));
|
||||
} else if (response.status === 400) {
|
||||
toast.error(t('SETTINGS.PSN.INVALID'));
|
||||
} else if (response.status === 429) {
|
||||
toast.error(t('SETTINGS.PSN.BUSY'));
|
||||
} else if (response.status === 502) {
|
||||
toast.error(t('SETTINGS.PSN.UNAVAILABLE'));
|
||||
} else if (response.status === 503) {
|
||||
setAccount((old) => ({...old, enabled: false}));
|
||||
} else {
|
||||
toast.error(t('SETTINGS.PSN.ERROR'));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('PSN link error:', err);
|
||||
toast.error(t('SETTINGS.PSN.ERROR'));
|
||||
} finally {
|
||||
// The NPSSO is a session secret: it does not stay in the page after any answer.
|
||||
setNpsso('');
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const unlink = async () => {
|
||||
setBusy(true);
|
||||
try {
|
||||
const response = await unlinkPsn();
|
||||
if (response.status === 401) return;
|
||||
if (!response.ok) {
|
||||
toast.error(t('SETTINGS.PSN.ERROR'));
|
||||
return;
|
||||
}
|
||||
setAccount((old) => ({...old, linked: false, linkedAt: null, expiresAt: null}));
|
||||
toast.success(t('SETTINGS.PSN.UNLINKED'));
|
||||
} catch (err) {
|
||||
console.error('PSN unlink error:', err);
|
||||
toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const expired = isExpired(account);
|
||||
const form = <NpssoForm npsso={npsso} onChange={setNpsso} onSubmit={link} busy={busy}/>;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><Gamepad className="size-4 text-primary"/>{t('SETTINGS.PSN.TITLE')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{failed ? (
|
||||
<p className="text-sm text-destructive">{t('SETTINGS.PSN.ERROR')}</p>
|
||||
) : !account ? (
|
||||
<Loader2 className="animate-spin text-muted-foreground"/>
|
||||
) : !account.enabled ? (
|
||||
<p className="text-sm text-muted-foreground">{t('SETTINGS.PSN.OFF')}</p>
|
||||
) : !account.linked ? form : (
|
||||
<>
|
||||
<div className="space-y-1 text-sm">
|
||||
<p>{t('SETTINGS.PSN.LINKED_SINCE', {date: formatDate(account.linkedAt, i18n.language, {dateStyle: 'medium'})})}</p>
|
||||
<p className={expired ? 'font-medium text-destructive' : undefined}>
|
||||
{t('SETTINGS.PSN.EXPIRES_ON', {date: formatDate(account.expiresAt, i18n.language, {dateStyle: 'medium'})})}
|
||||
{expired && <> · {t('SETTINGS.PSN.EXPIRED')}</>}
|
||||
</p>
|
||||
</div>
|
||||
{expired && form}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{!expired && (
|
||||
<Button asChild>
|
||||
<Link to="/import?source=PSN"><Upload/>{t('SETTINGS.PSN.IMPORT')}</Link>
|
||||
</Button>
|
||||
)}
|
||||
<Button type="button" variant="outline" onClick={unlink} disabled={busy}>
|
||||
<Unlink/>{t('SETTINGS.PSN.UNLINK')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function NpssoForm({npsso, onChange, onSubmit, busy}) {
|
||||
const {t} = useTranslation();
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="space-y-3">
|
||||
<ol className="list-decimal space-y-1 pl-5 text-sm">
|
||||
<li>{t('SETTINGS.PSN.STEPS_1')}</li>
|
||||
<li>
|
||||
{t('SETTINGS.PSN.STEPS_2')}{' '}
|
||||
<a href={NPSSO_PAGE_URL} target="_blank" rel="noopener noreferrer" className="break-all underline">{NPSSO_PAGE_URL}</a>
|
||||
</li>
|
||||
<li>{t('SETTINGS.PSN.STEPS_3')}</li>
|
||||
</ol>
|
||||
<p className="text-sm text-muted-foreground">{t('SETTINGS.PSN.WHAT_IT_GIVES')}</p>
|
||||
<Input type="password" autoComplete="off" spellCheck={false} maxLength={128} value={npsso}
|
||||
aria-label={t('SETTINGS.PSN.NPSSO_LABEL')} onChange={(e) => onChange(e.target.value)}/>
|
||||
<Button type="submit" disabled={busy || !npsso.trim()}>
|
||||
{busy ? <Loader2 className="animate-spin"/> : <Link2/>}{t('SETTINGS.PSN.LINK')}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user