Our Personal Data Server from scratch!
tranquil.farm
pds
rust
database
fun
oauth
atproto
1<script lang="ts">
2 import { _ } from '../lib/i18n'
3
4 interface Props {
5 didType: 'plc' | 'web' | 'web-external'
6 externalDid: string
7 disabled: boolean
8 selfHostedDidWebEnabled: boolean
9 defaultDomain: string
10 onDidTypeChange: (value: 'plc' | 'web' | 'web-external') => void
11 onExternalDidChange: (value: string) => void
12 }
13
14 let {
15 didType,
16 externalDid,
17 disabled,
18 selfHostedDidWebEnabled,
19 defaultDomain,
20 onDidTypeChange,
21 onExternalDidChange,
22 }: Props = $props()
23
24 function extractDomain(did: string): string {
25 return did.replace(/^did:web:/, '').split(':')[0] || 'yourdomain.com'
26 }
27</script>
28
29<fieldset class="identity-section">
30 <legend>{$_('registerPasskey.identityType')}</legend>
31 <div class="radio-group">
32 <label class="radio-label">
33 <input type="radio" name="didType" value="plc" checked={didType === 'plc'} onchange={() => onDidTypeChange('plc')} {disabled} />
34 <span class="radio-content">
35 <strong>{$_('registerPasskey.didPlcRecommended')}</strong>
36 <span class="radio-hint">{$_('registerPasskey.didPlcHint')}</span>
37 </span>
38 </label>
39 <label class="radio-label" class:disabled={!selfHostedDidWebEnabled}>
40 <input type="radio" name="didType" value="web" checked={didType === 'web'} onchange={() => onDidTypeChange('web')} disabled={disabled || !selfHostedDidWebEnabled} />
41 <span class="radio-content">
42 <strong>{$_('registerPasskey.didWeb')}</strong>
43 {#if !selfHostedDidWebEnabled}
44 <span class="radio-hint disabled-hint">{$_('registerPasskey.didWebDisabledHint')}</span>
45 {:else}
46 <span class="radio-hint">{$_('registerPasskey.didWebHint')}</span>
47 {/if}
48 </span>
49 </label>
50 <label class="radio-label">
51 <input type="radio" name="didType" value="web-external" checked={didType === 'web-external'} onchange={() => onDidTypeChange('web-external')} {disabled} />
52 <span class="radio-content">
53 <strong>{$_('registerPasskey.didWebBYOD')}</strong>
54 <span class="radio-hint">{$_('registerPasskey.didWebBYODHint')}</span>
55 </span>
56 </label>
57 </div>
58</fieldset>
59
60{#if didType === 'web'}
61 <div class="warning-box">
62 <strong>{$_('registerPasskey.didWebWarningTitle')}</strong>
63 <ul>
64 <li><strong>{$_('registerPasskey.didWebWarning1')}</strong> {@html $_('registerPasskey.didWebWarning1Detail', { values: { did: `<code>did:web:yourhandle.${defaultDomain}</code>` } })}</li>
65 <li><strong>{$_('registerPasskey.didWebWarning2')}</strong> {$_('registerPasskey.didWebWarning2Detail')}</li>
66 <li><strong>{$_('registerPasskey.didWebWarning3')}</strong> {$_('registerPasskey.didWebWarning3Detail')}</li>
67 <li><strong>{$_('registerPasskey.didWebWarning4')}</strong> {$_('registerPasskey.didWebWarning4Detail')}</li>
68 </ul>
69 </div>
70{/if}
71
72{#if didType === 'web-external'}
73 <div>
74 <label for="external-did">{$_('registerPasskey.externalDid')}</label>
75 <input id="external-did" type="text" value={externalDid} oninput={(e) => onExternalDidChange(e.currentTarget.value)} placeholder={$_('registerPasskey.externalDidPlaceholder')} {disabled} required />
76 <p class="hint">{$_('registerPasskey.externalDidHint')} <code>https://{externalDid ? extractDomain(externalDid) : 'yourdomain.com'}/.well-known/did.json</code></p>
77 </div>
78{/if}