0.3.23 - Search radarr/sonarr

admin-ui/src/pages/Account.tsx

@@ -805,13 +805,13 @@ export function AccountPage() {
           renaming={namingViewer.id !== null}
           busy={busy === 'viewer-name'}
           onCancel={() => setNamingViewer(null)}
-          onConfirm={(name) =>
+          onConfirm={(name, pin) =>
             void act(
               'viewer-name',
               () =>
                 namingViewer.id
                   ? api.put(`${base}/viewers/${encodeURIComponent(namingViewer.id)}`, { name })
-                  : api.post(`${base}/viewers`, { name }),
+                  : api.post(`${base}/viewers`, { name, ...(pin ? { pin } : {}) }),
               namingViewer.id ? 'Viewer renamed.' : 'Viewer added.',
               () => {
                 setNamingViewer(null);
@@ -1117,10 +1117,11 @@ function ViewerNameDialog({
   initial: string;
   renaming: boolean;
   busy: boolean;
-  onConfirm: (name: string) => void;
+  onConfirm: (name: string, pin?: string) => void;
   onCancel: () => void;
 }) {
   const [name, setName] = useState(initial);
+  const [pin, setPin] = useState('');
   return (
     <div className="scrim" onPointerDown={(event) => event.target === event.currentTarget && onCancel()}>
       <div className="dialog" role="dialog" aria-modal="true">
@@ -1138,11 +1139,28 @@ function ViewerNameDialog({
             onChange={(event) => setName(event.target.value)}
           />
         </Field>
+        {!renaming ? (
+          <Field label="Initial PIN" hint="Optional. Use 4 to 12 numbers, or leave it blank to add one later.">
+            <input
+              type="password"
+              inputMode="numeric"
+              minLength={4}
+              maxLength={12}
+              value={pin}
+              onChange={(event) => setPin(event.target.value.replace(/\D/g, '').slice(0, 12))}
+            />
+          </Field>
+        ) : null}
         <div className="dialog-actions">
           <Button variant="quiet" onClick={onCancel}>
             Cancel
           </Button>
-          <Button variant="primary" busy={busy} disabled={!name.trim()} onClick={() => onConfirm(name.trim())}>
+          <Button
+            variant="primary"
+            busy={busy}
+            disabled={!name.trim() || (pin.length > 0 && pin.length < 4)}
+            onClick={() => onConfirm(name.trim(), pin || undefined)}
+          >
             {renaming ? 'Rename' : 'Add viewer'}
           </Button>
         </div>