> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombify.io/llms.txt
> Use this file to discover all available pages before exploring further.

# अपने पासवर्ड मैनेजर ऐप सेट करें

> अपना तिजोरी खाता बनाएँ, पहला पासवर्ड सहेजें, और अपने फ़ोन, ब्राउज़र और कंप्यूटर के Bitwarden ऐप को अपनी तिजोरी से जोड़ें।

export const ClientSetupGuide = ({id, labels, locale = 'en', direction = 'ltr', meta = [], requirements = [], requirementsHelp, appsTitle = labels.appsTitle, vendor, apps = [], appsNote, stepsTitle = labels.stepsTitle, steps = [], help = [], helpTitle = labels.helpTitle, next = [], nextTitle = labels.nextTitle, attribution, sources}) => {
  const Anchor = 'a', Article = 'article', Details = 'details', Dialog = 'dialog', Figcaption = 'figcaption', Figure = 'figure', Footer = 'footer', Img = 'img', Summary = 'summary';
  const number = new Intl.NumberFormat(locale);
  const stepNumber = new Intl.NumberFormat(locale, {
    minimumIntegerDigits: 2
  });
  const message = (key, values = {}) => labels[key].replace(/\{(\w+)\}/g, (_, name) => String(values[name]));
  const count = steps.length;
  const last = count - 1;
  const storageKey = `kombify-client-guide:${id}:v1`;
  const rootRef = useRef(null);
  const zoomRef = useRef(null);
  const toastTimer = useRef(null);
  const focusTab = useRef(false);
  const [current, setCurrent] = useState(0);
  const [completed, setCompleted] = useState(() => steps.map(() => false));
  const [verified, setVerified] = useState(() => steps.map(step => (step.verify || []).map(() => false)));
  const [failed, setFailed] = useState({});
  const [zoom, setZoom] = useState(null);
  const [toast, setToast] = useState('');
  const isExternal = href => (/^https?:\/\//).test(href || '');
  const icon = name => {
    const paths = {
      apple: <path d="M16.7 1.8c0 2.1-1.7 4.4-3.7 4.2-.4-2.1 1.8-4.3 3.7-4.2ZM20.4 17.3c-.5 1.2-.8 1.7-1.5 2.7-1 1.5-2.4 3.3-4.2 3.3-1.6 0-2-1-4.1-.9-2.1 0-2.5 1-4.2.9-1.8-.1-3.1-1.7-4.1-3.2C-.5 15.9-.7 10.4 1 7.6c1.2-2 3.1-3.1 4.9-3.1 1.9 0 3.1 1 4.7 1 1.5 0 2.5-1 4.7-1 1.6 0 3.3.9 4.5 2.3-4 2.2-3.3 8 0 10.5Z" fill="currentColor" stroke="none" transform="translate(2 0) scale(.87)" />,
      android: <><path d="M5 12a7 7 0 0 1 14 0v6H5Zm2-6L5 3m12 3 2-3M2 12v5m20-5v5M8 18v4m8-4v4" /><path d="M8.5 9h.01M15.5 9h.01" /></>,
      browser: <><rect height="16" rx="2" width="20" x="2" y="4" /><path d="M2 9h20M6 6.5h.01M9 6.5h.01" /></>,
      desktop: <><rect height="14" rx="2" width="20" x="2" y="3" /><path d="M8 22h8M12 17v5" /></>,
      web: <><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></>,
      server: <><rect height="7" rx="2" width="18" x="3" y="3" /><rect height="7" rx="2" width="18" x="3" y="14" /><path d="M7 6.5h.01M7 17.5h.01M16 6.5h2M16 17.5h2" /></>,
      phone: <><rect height="20" rx="3" width="12" x="6" y="2" /><path d="M10 5h4M11 19h2" /></>,
      steps: <><rect height="7" rx="1.5" width="7" x="3" y="3" /><rect height="7" rx="1.5" width="7" x="14" y="3" /><rect height="7" rx="1.5" width="7" x="3" y="14" /><rect height="7" rx="1.5" width="7" x="14" y="14" /></>,
      book: <path d="M12 5v15M3 4c4-1 6 0 9 1 3-1 5-2 9-1v15c-4-1-6 0-9 1-3-1-5-2-9-1Z" />,
      clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
      print: <><path d="M6 8V3h12v5M6 17H3V8h18v9h-3M6 14h12v7H6Z" /><path d="M17 11h.01" /></>,
      check: <path d="m5 12 4 4L19 6" />,
      arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
      back: <path d="m15 5-7 7 7 7" />,
      external: <><path d="M14 4h6v6m0-6L10 14" /><path d="M10 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5" /></>,
      info: <><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 7h.01" /></>,
      ok: <><circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" /></>,
      camera: <><path d="M3 7h4l2-3h6l2 3h4v13H3Z" /><circle cx="12" cy="13" r="4" /></>,
      zoom: <><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 5 5M7 10.5h7M10.5 7v7" /></>,
      shield: <><path d="M12 3 3 7v6c0 5 9 9 9 9s9-4 9-9V7Z" /><path d="m8 12 3 3 5-6" /></>,
      close: <path d="m6 6 12 12M6 18 18 6" />
    };
    return <svg aria-hidden="true" className="ico" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" viewBox="0 0 24 24">{paths[name] || paths.info}</svg>;
  };
  const safeHref = href => (/^(https:\/\/|\/|#)/).test(href || '') ? href : '#';
  const link = (href, children, className, key) => isExternal(href) ? <Anchor className={className || ''} href={safeHref(href)} key={key} rel="noopener noreferrer" target="_blank">{children} {icon('external')}<span className="sr-only">{labels.opensInNewTab}</span></Anchor> : <Anchor className={className || ''} href={safeHref(href)} key={key} onClick={(href || '').startsWith('#') ? () => {
    zoomRef.current?.close();
    reveal(href.slice(1));
  } : undefined}>{children}</Anchor>;
  const rich = text => {
    if (!text || !text.split) return text;
    return text.split(/(\[\[[^\]]+\]\]|\*\*[^*]+\*\*|\[[^\]]+\]\([^)\s]+\))/g).map((part, i) => {
      if ((/^\[\[[^\]]+\]\]$/).test(part)) return <span className="key" key={i}>{part.slice(2, -2)}</span>;
      if ((/^\*\*[^*]+\*\*$/).test(part)) return <strong key={i}>{part.slice(2, -2)}</strong>;
      const match = (/^\[([^\]]+)\]\(([^)\s]+)\)$/).exec(part);
      if (match) return link(match[2], match[1], undefined, i);
      return part;
    });
  };
  useEffect(() => {
    try {
      const saved = JSON.parse(localStorage.getItem(storageKey) || 'null');
      if (Array.isArray(saved?.completed) && saved.completed.length === count) setCompleted(saved.completed.map(Boolean));
      if (Array.isArray(saved?.verified) && saved.verified.length === count) setVerified(saved.verified.map((list, i) => (steps[i].verify || []).map((_, j) => Boolean(list?.[j]))));
    } catch (_) {}
    const root = rootRef.current;
    const timer = setTimeout(() => {
      if (!root) return;
      const broken = {};
      root.querySelectorAll('.screen-image > img').forEach(image => {
        if (image.complete && !image.naturalWidth) broken[image.getAttribute('src')] = true;
      });
      if (Object.keys(broken).length) setFailed(old => ({
        ...old,
        ...broken
      }));
    }, 7000);
    const openAll = () => root?.querySelectorAll('details').forEach(node => {
      node.open = true;
    });
    window.addEventListener('beforeprint', openAll);
    return () => {
      clearTimeout(timer);
      clearTimeout(toastTimer.current);
      window.removeEventListener('beforeprint', openAll);
    };
  }, []);
  useEffect(() => {
    if (!focusTab.current) return;
    focusTab.current = false;
    rootRef.current?.querySelector(`[id="${id}-tab-${current}"]`)?.focus();
  }, [current]);
  const persist = (nextCompleted, nextVerified) => {
    try {
      localStorage.setItem(storageKey, JSON.stringify({
        completed: nextCompleted,
        verified: nextVerified
      }));
    } catch (_) {}
  };
  const say = text => {
    setToast('');
    setTimeout(() => setToast(text), 60);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(''), 3800);
  };
  const select = (index, focus) => {
    const target = Math.max(0, Math.min(last, index));
    setCurrent(target);
    focusTab.current = Boolean(focus);
  };
  const onNext = () => {
    const checks = verified[current] || [];
    if (checks.length && !checks.every(Boolean)) {
      say(labels.verifyRequired);
      rootRef.current?.querySelector(`[id="${id}-verify-${current}-${checks.indexOf(false)}"]`)?.focus();
      return;
    }
    const nextCompleted = completed.map((done, i) => i === current ? true : done);
    setCompleted(nextCompleted);
    persist(nextCompleted, verified);
    if (current < last) select(current + 1, true); else {
      const done = nextCompleted.filter(Boolean).length;
      say(done === count ? labels.allDone : message('remainingSteps', {
        done: number.format(done),
        count: number.format(count)
      }));
      rootRef.current?.querySelector(`[id="${id}-more"], [id="${id}-help"]`)?.scrollIntoView({
        block: 'start'
      });
    }
  };
  const onVerify = (stepIndex, checkIndex, value) => {
    const nextVerified = verified.map((list, i) => i === stepIndex ? list.map((v, j) => j === checkIndex ? value : v) : list);
    const nextCompleted = completed.map((done, i) => i === stepIndex && !value ? false : done);
    setVerified(nextVerified);
    setCompleted(nextCompleted);
    persist(nextCompleted, nextVerified);
  };
  const onReset = () => {
    const nextCompleted = steps.map(() => false);
    const nextVerified = steps.map(step => (step.verify || []).map(() => false));
    setCompleted(nextCompleted);
    setVerified(nextVerified);
    persist(nextCompleted, nextVerified);
    select(0);
    say(labels.progressReset);
  };
  const onTabKey = event => {
    const moves = {
      ArrowRight: c => (c + 1) % count,
      ArrowLeft: c => (c - 1 + count) % count,
      Home: () => 0,
      End: () => last
    };
    const move = moves[event.key];
    if (!move) return;
    event.preventDefault();
    focusTab.current = true;
    setCurrent(move);
  };
  const openZoom = shot => {
    setZoom(shot);
    const dialog = zoomRef.current;
    if (dialog && !dialog.open) dialog.showModal();
  };
  const closeOnBackdrop = event => {
    const dialog = event.currentTarget;
    if (event.target !== dialog) return;
    const rect = dialog.getBoundingClientRect();
    if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) dialog.close();
  };
  const reveal = targetId => {
    const node = rootRef.current?.querySelector(`[id="${targetId}"]`);
    const details = node && (node.tagName === 'DETAILS' ? node : node.querySelector('details'));
    if (details) details.open = true;
  };
  const renderShot = (shot, stepIndex) => {
    const unavailable = failed[shot.src];
    const label = shot.vendor ? labels.vendorScreenshotTag : labels.kombifyScreenshotTag;
    return <>
        <span className="screenshot-tag">{icon('camera')} {label}</span>
        <Figure className={`screen-figure${shot.frame === 'phone' ? ' phone' : ''}${unavailable ? ' image-unavailable' : ''}`}>
          <div className="screen-image">
            <Img alt={shot.alt} className={shot.srcDark ? 'only-light has-dark' : undefined} decoding="async" height={shot.height} loading={stepIndex === 0 ? 'eager' : 'lazy'} onError={() => setFailed(old => ({
      ...old,
      [shot.src]: true
    }))} referrerPolicy="no-referrer" src={shot.src} width={shot.width} />
            {shot.srcDark ? <Img alt={shot.alt} className="only-dark" decoding="async" height={shot.height} loading="lazy" onError={() => setFailed(old => ({
      ...old,
      [shot.src]: true
    }))} src={shot.srcDark} width={shot.width} /> : null}
            {(shot.vendor ? [] : shot.annotations || []).map((mark, i) => <span aria-hidden="true" className="annotation" data-n={mark.n ?? undefined} key={i} style={{
      top: `${mark.top}%`,
      left: `${mark.left}%`,
      width: `${mark.width}%`,
      height: `${mark.height}%`
    }} />)}
            <Anchor className="image-fallback" href={shot.vendor ? shot.creditHref || shot.src : shot.src} rel="noopener noreferrer" target="_blank">{icon('external')} {shot.vendor ? labels.openVendorPage : labels.openScreenshot}<span>{shot.vendor ? labels.vendorImageUnavailable : labels.imageUnavailable}</span></Anchor>
            <button aria-label={message('enlargeScreenshot', {
      description: shot.alt
    })} className="zoom-button" onClick={() => openZoom(shot)} type="button">{icon('zoom')}</button>
          </div>
          <Figcaption>
            {shot.caption}{shot.credit ? <> · {shot.creditHref ? link(shot.creditHref, shot.credit) : shot.credit}</> : null}
            {shot.version || shot.captured ? <span className="meta">{[shot.version, shot.captured ? message('captured', {
      date: shot.captured
    }) : null].filter(Boolean).join(' · ')}</span> : null}
          </Figcaption>
        </Figure>
      </>;
  };
  const renderLinkVisual = visual => <>
      <span className="screenshot-tag">{icon('external')} {visual.tag || labels.vendorGuideTag}</span>
      <div className="link-visual">
        {visual.title ? <strong>{visual.title}</strong> : null}
        {visual.text ? <p>{rich(visual.text)}</p> : null}
        {(visual.links || []).map((item, i) => <Anchor className="vendor-link" href={item.href} key={i} rel="noopener noreferrer" target="_blank">
            {icon(item.icon || 'book')}<span>{item.label}{item.detail ? <small>{item.detail}</small> : null}</span>{icon('external')}<span className="sr-only">{labels.opensInNewTab}</span>
          </Anchor>)}
      </div>
    </>;
  return <div className="kombify-client-guide not-prose" id={id} dir={direction} lang={locale} ref={rootRef} style={{
    '--kcg-steps': count
  }}>
      <div className="guide-content">
        <div className="page-top">
          <div className="intro-meta">{meta.map((item, i) => <span key={i}>{icon(item.icon)} {item.text}</span>)}</div>
          <div className="page-tools"><button aria-label={labels.printGuide} className="tool-button" onClick={() => window.print()} type="button">{icon('print')}</button></div>
        </div>
        {requirements.length ? <div className="ready-strip">
            <strong>{labels.requirementsTitle}</strong>
            {requirements.map((item, i) => <span key={i}>{icon('check')} {rich(item)}</span>)}
            {requirementsHelp ? <Anchor href={`#${requirementsHelp.target}`} onClick={() => reveal(requirementsHelp.target)}>{requirementsHelp.label} {icon('arrow')}</Anchor> : null}
          </div> : null}

        {apps.length ? <section aria-labelledby={`${id}-apps-title`} className="downloads" id={`${id}-apps`}>
            <div className="section-top">
              <h2 id={`${id}-apps-title`}>{appsTitle}</h2>
              {vendor ? link(vendor.href, vendor.label, 'small-link') : null}
            </div>
            <div className="downloads-grid">
              {apps.map((app, i) => <Anchor className="download-card" href={app.href} key={i} rel="noopener noreferrer" target="_blank">
                  <span className="platform-icon">{icon(app.platform)}</span>
                  <span className="download-text">
                    <strong>{app.label}</strong>
                    <small>{app.detail}</small>
                    <span className="store-name">{app.store} {icon('external')}</span>
                    <span className={`badge ${app.official ? 'official' : 'unofficial'}`}>{app.official ? message('officialApp', {
    vendor: app.vendor
  }) : message('thirdPartyApp', {
    vendor: app.vendor
  })}</span>
                  </span>
                  <span className="sr-only">{labels.opensInNewTab}</span>
                </Anchor>)}
            </div>
            {appsNote ? <p className="download-hint">{rich(appsNote)}</p> : null}
          </section> : null}

        <section aria-labelledby={`${id}-guide-title`} className="guide-section" id={`${id}-guide`}>
          <div className="guide-heading"><h2 id={`${id}-guide-title`}>{stepsTitle}</h2></div>
          <div className="wizard">
            <div aria-label={labels.setupSteps} className="step-tabs" onKeyDown={onTabKey} role="tablist">
              {steps.map((step, i) => <button aria-controls={`${id}-panel-${i}`} aria-selected={i === current} className={`step-tab${completed[i] ? ' done' : ''}`} id={`${id}-tab-${i}`} key={i} onClick={() => select(i)} role="tab" tabIndex={i === current ? 0 : -1} type="button">
                  <span className="step-dot">{completed[i] ? '✓' : number.format(i + 1)}</span><span>{step.tab}</span>
                </button>)}
            </div>
            {steps.map((step, i) => <Article aria-labelledby={`${id}-tab-${i}`} className={`guide-panel${i === current ? ' active' : ''}`} id={`${id}-panel-${i}`} key={i} role="tabpanel">
                <div className="panel-copy">
                  <div className="step-kicker">{message('stepPosition', {
    current: stepNumber.format(i + 1),
    count: stepNumber.format(count)
  })}</div>
                  <h3>{step.title}</h3>
                  {step.intro ? <p className="step-intro">{rich(step.intro)}</p> : null}
                  {step.clicks?.length ? <ol className="click-list">{step.clicks.map((click, j) => <li key={j}><span className="click-num">{number.format(j + 1)}</span><span>{rich(click)}</span></li>)}</ol> : null}
                  {step.verify?.length ? <div className="verify-list">
                      {step.verify.map((item, j) => <label key={j}><input checked={Boolean(verified[i]?.[j])} id={`${id}-verify-${i}-${j}`} onChange={event => onVerify(i, j, event.target.checked)} type="checkbox" /><span>{rich(item)}</span></label>)}
                    </div> : null}
                  {step.note ? <div className="micro-note">{icon('info')}<span>{rich(step.note)}</span></div> : null}
                  {(step.faq ? [].concat(step.faq) : []).map((faq, j) => <Details key={j}><Summary>{faq.q}</Summary><p>{rich(faq.a)}</p></Details>)}
                  {step.check ? <div className="step-check">{icon('ok')} {rich(step.check)}</div> : null}
                </div>
                <div className="panel-visual">
                  {step.screenshot ? renderShot(step.screenshot, i) : step.visual ? renderLinkVisual(step.visual) : null}
                </div>
              </Article>)}
            <div className="wizard-bottom">
              <div className="progress-note">
                <span>{message('progress', {
    done: number.format(completed.filter(Boolean).length),
    count: number.format(count)
  })}</span>
                <div aria-hidden="true" className="progress-meter">{steps.map((step, i) => <span className={completed[i] ? 'done' : undefined} key={i} />)}</div>
              </div>
              <button className="prev" disabled={current === 0} onClick={() => select(current - 1, true)} type="button">{icon('back')} {labels.back}</button>
              <button className="next" onClick={onNext} type="button"><span>{current === last ? labels.finish : labels.next}</span>{icon('arrow')}</button>
            </div>
          </div>
          {sources ? <p className="provenance-inline">{sources.summary} <Anchor href={`#${id}-sources`} onClick={() => reveal(`${id}-sources-detail`)}>{labels.imageSources}</Anchor></p> : null}
        </section>

        {next.length ? <section aria-labelledby={`${id}-more-title`} className="more-section" id={`${id}-more`}>
            <div className="section-top"><h2 id={`${id}-more-title`}>{nextTitle}</h2></div>
            <div className="more-grid">
              {next.map((item, i) => link(item.href, <>
                  <span className="more-icon">{icon(item.icon || 'arrow')}</span>
                  <span><strong>{item.title}</strong><small>{item.text}</small></span>
                </>, 'more-card', i))}
            </div>
          </section> : null}

        {help.length ? <section aria-labelledby={`${id}-help-title`} className="faq-section" id={`${id}-help`}>
            <h2 id={`${id}-help-title`}>{helpTitle}</h2>
            {help.map((item, i) => <Details className="faq" id={item.id} key={i}><Summary>{item.q}</Summary><div className="answer">{rich(item.a)}</div></Details>)}
          </section> : null}

        <Footer className="footline">
          <div className="attribution">{attribution ? rich(attribution) : null}</div>
          <button className="reset" onClick={onReset} type="button">{labels.resetProgress}</button>
        </Footer>

        {sources ? <section className="source-section" id={`${id}-sources`}>
            <Details id={`${id}-sources-detail`}>
              <Summary>{labels.sourcesTitle}</Summary>
              <div className="source-content">
                {(sources.paragraphs || []).map((text, i) => <p key={i}>{rich(text)}</p>)}
                <div className="source-links">{(sources.links || []).map((item, i) => link(item.href, item.label, undefined, i))}</div>
              </div>
            </Details>
            <div className="dim">{labels.ownershipNotice}</div>
          </section> : null}
      </div>

      <Dialog aria-labelledby={`${id}-zoom-title`} className="zoom-dialog" onClick={closeOnBackdrop} ref={zoomRef}>
        <div className="dialog-header">
          <h2 id={`${id}-zoom-title`}>{zoom?.vendor ? labels.vendorScreenshot : labels.screenshot}</h2>
          <button aria-label={labels.closeImage} className="dialog-close" onClick={() => zoomRef.current?.close()} type="button">{icon('close')}</button>
        </div>
        <div className="zoom-content">
          {zoom ? <Img alt={zoom.alt} src={zoom.src} /> : null}
          {zoom?.creditHref ? link(zoom.creditHref, zoom.vendor ? labels.openOriginal : labels.aboutScreenshot) : null}
        </div>
      </Dialog>
      <div aria-live="polite" className="sr-only" role="status">{toast}</div>
      <div aria-hidden="true" className={`toast${toast ? ' show' : ''}`}>{toast}</div>
    </div>;
};

export const clientSetupLabelsHi = {
  appsTitle: 'पहले ऐप डाउनलोड करें।',
  stepsTitle: 'चरण दर चरण कनेक्ट करें।',
  helpTitle: 'आगे नहीं बढ़ पा रहे?',
  nextTitle: 'आगे क्या करें।',
  opensInNewTab: ' (नए टैब में खुलता है)',
  verifyRequired: 'हर बिंदु को खुद जाँचने के बाद उस पर निशान लगाएँ।',
  allDone: 'सभी चरण इस ब्राउज़र में पूरे के रूप में चिह्नित हैं।',
  remainingSteps: '{count} में से {done} चरण पूरे के रूप में चिह्नित हैं। बाकी को पूरा करने के लिए दूसरे टैब खोलें।',
  progressReset: 'इस ब्राउज़र में आपकी प्रगति रीसेट हो गई है।',
  vendorScreenshotTag: 'विक्रेता का स्क्रीनशॉट',
  kombifyScreenshotTag: 'KOMBIFY स्क्रीनशॉट',
  openVendorPage: 'विक्रेता का पेज खोलें',
  openScreenshot: 'स्क्रीनशॉट खोलें',
  vendorImageUnavailable: 'इसे लोड करने के लिए इंटरनेट कनेक्शन चाहिए।',
  imageUnavailable: 'तस्वीर लोड नहीं हो सकी।',
  enlargeScreenshot: 'स्क्रीनशॉट बड़ा करें: {description}',
  captured: '{date} को लिया गया',
  vendorGuideTag: 'विक्रेता की गाइड',
  printGuide: 'गाइड प्रिंट करें',
  requirementsTitle: 'आपको क्या चाहिए',
  officialApp: 'आधिकारिक · {vendor}',
  thirdPartyApp: 'थर्ड-पार्टी · {vendor}',
  setupSteps: 'सेटअप के चरण',
  stepPosition: 'चरण {current} / {count}',
  progress: '{count} में से {done} चरण पूरे हुए',
  back: 'वापस',
  finish: 'पूरा करें',
  next: 'हो गया · आगे',
  imageSources: 'तस्वीरों के स्रोत और तारीख',
  resetProgress: 'प्रगति रीसेट करें',
  sourcesTitle: 'तस्वीरों के स्रोत, जाँचे गए लिंक और तारीख',
  ownershipNotice: 'kombify की गाइड · उत्पादों के नाम, विक्रेता ऐप के स्क्रीनशॉट और ट्रेडमार्क उनके संबंधित स्वामियों के हैं।',
  vendorScreenshot: 'विक्रेता का स्क्रीनशॉट',
  screenshot: 'स्क्रीनशॉट',
  closeImage: 'तस्वीर बंद करें',
  openOriginal: 'विक्रेता के यहाँ मूल तस्वीर खोलें',
  aboutScreenshot: 'इस स्क्रीनशॉट के बारे में'
};

<ClientSetupGuide
  labels={clientSetupLabelsHi}
  locale="hi"
  id="kcg-passwords"
  meta={[
{ icon: "phone", text: "फ़ोन, ब्राउज़र और कंप्यूटर" },
{ icon: "steps", text: "6 छोटे चरण" },
{ icon: "book", text: "पहले से किसी जानकारी की ज़रूरत नहीं" },
]}
  requirements={[
"आपकी तिजोरी का पता, उदाहरण के लिए https://vault.home.test",
"आपके ईमेल पते के लिए एक आमंत्रण",
"हर डिवाइस को kombify सेट करने वाले व्यक्ति ने आपकी घरेलू तिजोरी के लिए तैयार किया हो",
"एक मास्टर पासवर्ड जो आपको याद रह सके",
]}
  requirementsHelp={{ label: "अभी तक आमंत्रण नहीं मिला?", target: "kcg-passwords-no-invite" }}
  appsTitle="सबसे पहले Bitwarden ऐप लें।"
  vendor={{ label: "Bitwarden से सभी डाउनलोड", href: "https://bitwarden.com/download/" }}
  apps={[
{ platform: "apple", label: "iPhone और iPad", detail: "Bitwarden Password Manager", store: "App Store में खोलें", href: "https://apps.apple.com/app/bitwarden-password-manager/id1137397744", vendor: "Bitwarden", official: true },
{ platform: "android", label: "Android", detail: "Bitwarden Password Manager", store: "Google Play में खोलें", href: "https://play.google.com/store/apps/details?id=com.x8bit.bitwarden", vendor: "Bitwarden", official: true },
{ platform: "browser", label: "ब्राउज़र एक्सटेंशन", detail: "Chrome, Firefox, Edge, Safari और अन्य", store: "Bitwarden डाउनलोड पेज खोलें", href: "https://bitwarden.com/download/", vendor: "Bitwarden", official: true },
{ platform: "desktop", label: "कंप्यूटर", detail: "Windows, macOS और Linux", store: "Bitwarden डाउनलोड पेज खोलें", href: "https://bitwarden.com/download/", vendor: "Bitwarden", official: true },
]}
  appsNote="ब्राउज़र स्टोर: [Chrome](https://chromewebstore.google.com/detail/bitwarden-password-manager/nngceckbapebfimnlniiiahkandclblb) · [Firefox](https://addons.mozilla.org/firefox/addon/bitwarden-password-manager/) · [Edge](https://microsoftedge.microsoft.com/addons/detail/bitwarden-password-manager/jbkfoedolllekgbhcbcoahefnbanhhlh) · [Safari (Mac App Store)](https://apps.apple.com/app/bitwarden/id1352778147)। आपकी तिजोरी Vaultwarden पर चलती है, जो इन आधिकारिक Bitwarden ऐप के साथ काम करता है। आपको अलग Vaultwarden ऐप की ज़रूरत नहीं।"
  stepsTitle="अपनी तिजोरी चरण-दर-चरण सेट करें।"
  steps={[
{
  tab: "तिजोरी खोलें",
  title: "अपनी तिजोरी ब्राउज़र में खोलें।",
  intro: "कंप्यूटर से शुरू करें। आपकी तिजोरी का अपना वेब पता है, किसी वेबसाइट जैसा जिसे केवल आपका घर उपयोग करता है।",
  clicks: [
    "ब्राउज़र की एड्रेस बार में अपनी तिजोरी का पता टाइप करें, उदाहरण के लिए **https://vault.home.test**, और Enter दबाएँ।",
    "लॉगिन बॉक्स के नीचे [[Create account]] पर क्लिक करें।",
  ],
  note: "इस गाइड का पता एक उदाहरण है। वही पता उपयोग करें जो आपको kombify सेट करने वाले व्यक्ति से मिला है।",
  faq: { q: "तिजोरी का पता क्या होता है?", a: "यह आपके घर की पासवर्ड तिजोरी का वेब पता है। यह आमतौर पर **https://vault.** से शुरू होता है और आपके घरेलू नेटवर्क के नाम पर समाप्त होता है। kombify सेट करने वाला व्यक्ति आपको सटीक पता बता सकता है।" },
  check: "आपको [[Create account]] फ़ॉर्म दिखता है।",
  screenshot: { src: "/images/guides/passwords/vaultwarden/web-01-open-vault.webp", width: 1088, height: 830, alt: "Vaultwarden लॉगिन पेज, जिसमें Create account लिंक चिह्नित है", caption: "तिजोरी का लॉगिन पेज", credit: "kombify स्क्रीनशॉट", creditHref: "#kcg-passwords-sources", version: "Vaultwarden 1.37.2 · वेब तिजोरी 2026.7.0", captured: "2026-09-24", annotations: [{ n: 2, top: 84.3, left: 38.3, width: 23.5, height: 7.2 }] },
},
{
  tab: "खाता बनाएँ",
  title: "अपना खाता बनाएँ।",
  intro: "आपकी तिजोरी केवल आमंत्रित ईमेल पते स्वीकार करती है। वही पता उपयोग करें जिस पर आमंत्रण गया था।",
  clicks: [
    "[[Email address]] में अपना आमंत्रित ईमेल पता दर्ज करें।",
    "[[Name]] में अपना नाम दर्ज करें। तिजोरी चलाने वाला व्यक्ति और जिनके साथ आप पासवर्ड साझा करते हैं, वे इसे देख सकते हैं।",
    "[[Continue]] पर क्लिक करें।",
  ],
  faq: { q: "क्या यह मेरा kombify खाता है?", a: "नहीं। यह खाता केवल आपकी पासवर्ड तिजोरी का है। इसका अपना ईमेल पता और अपना मास्टर पासवर्ड है।" },
  check: "पेज अब आपसे [[Set a strong password]] करने को कहता है।",
  screenshot: { src: "/images/guides/passwords/vaultwarden/web-02-create-account.webp", width: 1088, height: 718, alt: "Create account फ़ॉर्म, जिसमें ईमेल पता alex@example.com और नाम Alex Example है", caption: "खाता बनाएँ", credit: "kombify स्क्रीनशॉट", creditHref: "#kcg-passwords-sources", version: "Vaultwarden 1.37.2 · वेब तिजोरी 2026.7.0", captured: "2026-09-24", annotations: [{ n: 1, top: 37.6, left: 16.4, width: 65.1, height: 13.4 }, { n: 2, top: 61, left: 16.4, width: 65.1, height: 13.4 }, { n: 3, top: 76.3, left: 14, width: 72.1, height: 13.9 }] },
},
{
  tab: "मास्टर पासवर्ड",
  title: "अपना मास्टर पासवर्ड चुनें।",
  intro: "मास्टर पासवर्ड वह इकलौता पासवर्ड है जो आपको अब भी याद रखना है। यह बाकी सभी को खोलता है।",
  clicks: [
    "[[Master password]] में लंबा पासवर्ड दर्ज करें। चार या अधिक शब्दों का छोटा वाक्य अच्छा रहता है।",
    "वही पासवर्ड [[Confirm master password]] में दोबारा दर्ज करें।",
    "[[Create account]] पर क्लिक करें। यदि पेज ब्राउज़र एक्सटेंशन सुझाए, तो [[Add it later]] और फिर [[Skip to web app]] पर क्लिक करें। एक्सटेंशन आप चरण 5 में जोड़ेंगे।",
  ],
  note: "**भूला हुआ मास्टर पासवर्ड कोई रिकवर नहीं कर सकता**, तिजोरी चलाने वाला व्यक्ति भी नहीं। इसे लिख लें और नोट को तिजोरी के बाहर किसी सुरक्षित जगह रखें।",
  faq: { q: "स्ट्रेंथ बार का क्या मतलब है?", a: "यह अनुमान लगाता है कि आपका पासवर्ड अंदाज़ा लगाकर तोड़ना कितना कठिन है। **Strong** का लक्ष्य रखें। जटिल से ज़्यादा लंबा बेहतर है।" },
  check: "आपकी खाली तिजोरी [[All vaults]] शीर्षक के साथ खुलती है।",
  screenshot: { src: "/images/guides/passwords/vaultwarden/web-03-master-password.webp", width: 1088, height: 1310, alt: "Set a strong password पेज, जिसमें मास्टर पासवर्ड दो बार दर्ज है और Strong रेटिंग मिली है", caption: "Set a strong password", credit: "kombify स्क्रीनशॉट", creditHref: "#kcg-passwords-sources", version: "Vaultwarden 1.37.2 · वेब तिजोरी 2026.7.0", captured: "2026-09-24", annotations: [{ n: 1, top: 25.5, left: 16.4, width: 60.7, height: 7.3 }, { n: 2, top: 52.2, left: 16.4, width: 60.7, height: 7.3 }, { n: 3, top: 87, left: 14, width: 72.1, height: 7.6 }] },
},
{
  tab: "पहला पासवर्ड",
  title: "अपना पहला पासवर्ड सहेजें।",
  intro: "परीक्षण के लिए एक लॉगिन सहेजें। यह बाद में दिखाता है कि आपके ऐप आपकी तिजोरी से जुड़े हैं।",
  clicks: [
    "ऊपर दाईं ओर [[New]] पर क्लिक करें और [[Login]] चुनें। यदि पहले स्वागत विंडो आए, तो [[Skip]] पर क्लिक करें।",
    "[[Item name]] में ऐसा नाम दर्ज करें जिसे आप पहचानते हों, उदाहरण के लिए किसी दुकान का नाम।",
    "अपना [[Username]] दर्ज करें। [[Password]] के बगल में गोलाकार तीरों पर क्लिक करके पासवर्ड बनाएँ, फिर [[Use this password]] पर क्लिक करें।",
    "[[Save]] पर क्लिक करें।",
  ],
  note: "दुकान का वेब पता [[Website (URI)]] के नीचे जोड़ें। तब ब्राउज़र एक्सटेंशन उस वेबसाइट पर यह लॉगिन सुझाता है।",
  check: "संदेश [[Item added]] दिखता है और आपका लॉगिन सूची में दिखता है।",
  screenshot: { src: "/images/guides/passwords/vaultwarden/web-04-new-login.webp", width: 1472, height: 1664, alt: "New Login विंडो, जिसमें आइटम नाम Example Shop, एक यूज़रनेम और बनाया गया पासवर्ड है", caption: "New Login", credit: "kombify स्क्रीनशॉट", creditHref: "#kcg-passwords-sources", version: "Vaultwarden 1.37.2 · वेब तिजोरी 2026.7.0", captured: "2026-09-24", annotations: [{ n: 2, top: 12.1, left: 7.9, width: 82.6, height: 5.8 }, { n: 3, top: 41.8, left: 7.9, width: 79.3, height: 5.8 }, { n: 3, top: 52.3, left: 87.5, width: 5.7, height: 5 }, { n: 4, top: 92.1, left: 2.7, width: 10.4, height: 6 }] },
},
{
  tab: "ऐप जोड़ें",
  title: "Bitwarden ऐप जोड़ें।",
  intro: "हर Bitwarden ऐप पहले Bitwarden के अपने सर्वर से जुड़ता है। उसे एक बार बताएँ कि इसके बजाय आपकी तिजोरी उपयोग करे।",
  clicks: [
    "ऊपर की सूची से Bitwarden ऐप इंस्टॉल करें और उसे खोलें।",
    "लॉगिन स्क्रीन पर [[Logging in on]] मेनू खोलें और [[Self-hosted]] चुनें। कंप्यूटर ऐप में इस मेनू का नाम [[Accessing]] है।",
    "[[Server URL]] में शुरुआत में **https://** के साथ अपनी तिजोरी का पता दर्ज करें, फिर [[Save]] पर टैप करें।",
    "अपने ईमेल पते और मास्टर पासवर्ड से लॉग इन करें।",
  ],
  note: "ये चरण अपने हर फ़ोन, ब्राउज़र और कंप्यूटर पर दोहराएँ। हर एक को आपकी तिजोरी का पता एक बार चाहिए।",
  faq: { q: "यहाँ ऐप की तस्वीर क्यों नहीं है?", a: "Bitwarden की शर्तें उसकी तस्वीरें दोबारा उपयोग करने की अनुमति नहीं देतीं। उसकी अपनी गाइड हर स्क्रीन दिखाती है, और ऊपर के लेबल उससे मेल खाते हैं।" },
  check: "ऐप वह लॉगिन दिखाता है जो आपने चरण 4 में सहेजा था।",
  visual: {
    tag: "BITWARDEN गाइड",
    title: "Bitwarden हर स्क्रीन दिखाता है",
    text: "Bitwarden की गाइड में अपना डिवाइस चुनें। **सेल्फ-होस्टेड** सर्वर वाला सेक्शन खोजें।",
    links: [
      { label: "किसी ऐप को अपने सर्वर से जोड़ें", detail: "bitwarden.com · सभी डिवाइस", href: "https://bitwarden.com/help/change-client-environment/", icon: "server" },
      { label: "ब्राउज़र एक्सटेंशन के साथ शुरुआत", detail: "bitwarden.com", href: "https://bitwarden.com/help/getting-started-browserext/", icon: "browser" },
      { label: "मोबाइल ऐप के साथ शुरुआत", detail: "bitwarden.com", href: "https://bitwarden.com/help/getting-started-mobile/", icon: "phone" },
    ],
  },
},
{
  tab: "जाँचें",
  title: "क्या सब कुछ जुड़ गया?",
  intro: "इसे वेब तिजोरी में और एक ऐप में जाँचें। केवल उसी पर टिक करें जिसे आपने खुद जाँचा है।",
  verify: [
    "मैं अपनी तिजोरी का पता खोल सकता/सकती हूँ और लॉग इन कर सकता/सकती हूँ।",
    "मेरा सहेजा हुआ लॉगिन मेरे फ़ोन, ब्राउज़र या कंप्यूटर के Bitwarden ऐप में दिखता है।",
    "मेरा मास्टर पासवर्ड लिखा हुआ है और तिजोरी के बाहर रखा है।",
  ],
  note: "यह गाइड आपकी तिजोरी को नहीं पढ़ती। आपके टिक इसी ब्राउज़र में रहते हैं।",
  check: "अब आप अपने बाकी पासवर्ड तिजोरी में ले जा सकते हैं।",
  screenshot: { src: "/images/guides/passwords/vaultwarden/web-05-first-item.webp", width: 1430, height: 300, alt: "All vaults सूची, जिसमें सहेजा हुआ Example Shop लॉगिन दिख रहा है", caption: "तिजोरी में आपका पहला लॉगिन", credit: "kombify स्क्रीनशॉट", creditHref: "#kcg-passwords-sources", version: "Vaultwarden 1.37.2 · वेब तिजोरी 2026.7.0", captured: "2026-09-24", annotations: [{ n: null, top: 37.2, left: 1, width: 98, height: 58.1 }] },
},
]}
  nextTitle="आगे क्या।"
  next={[
{ icon: "shield", title: "टू-स्टेप लॉगिन चालू करें", text: "Bitwarden समझाता है कि दूसरा लॉगिन चरण कैसे जोड़ें।", href: "https://bitwarden.com/help/setup-two-step-login/" },
{ icon: "server", title: "तिजोरी का बैकअप लें", text: "kombify चलाने वाले व्यक्ति के लिए: तिजोरी के डेटा की सुरक्षा करें।", href: "/hi/guides/stackkits/back-up-and-restore" },
]}
  help={[
{ id: "kcg-passwords-no-invite", q: "मेरे पास अभी तक तिजोरी का पता या आमंत्रण नहीं है।", a: "अपने घर में kombify सेट करने वाले व्यक्ति से पूछें। वे Passwords सेवा जोड़ते हैं और आपके ईमेल पते को आमंत्रित करते हैं। [kombify के साथ Passwords कैसे काम करता है](/hi/guides/stackkits/use-cases/passwords) · [ओनर सेटअप](/hi/stackkits/apps/vaultwarden)।" },
{ q: "Create account “Registration not allowed or user already exists” बताता है।", a: "जाँचें कि आप ठीक वही आमंत्रित ईमेल पता उपयोग कर रहे हैं। यदि आपने अपना खाता पहले ही बना लिया है, तो वापस जाएँ और उसके बजाय लॉग इन करें। अन्यथा नया आमंत्रण माँगें।" },
{ q: "पता नहीं खुलता, या ब्राउज़र कनेक्शन के बारे में चेतावनी देता है।", a: "पहले पते को अपने घरेलू नेटवर्क के किसी डिवाइस पर आज़माएँ। यदि आपकी तिजोरी केवल घर पर चलती है, तो अपने घर के Wi-Fi से या आपको दिए गए घरेलू कनेक्शन ऐप से जुड़ें। हर डिवाइस को यह भी सेट होना चाहिए कि वह आपके घरेलू सर्वर पर भरोसा करे; यह kombify सेट करने वाला व्यक्ति करता है। यदि ब्राउज़र कहे कि कनेक्शन निजी नहीं है, तो वहीं रुक जाएँ और उनसे पूछें। चेतावनी को पार करके आगे न बढ़ें। [घरेलू पतों के बारे में](/hi/guides/stackkits/use-cases/network)।" },
{ q: "मैं अपना मास्टर पासवर्ड भूल गया/गई।", a: "इसे कोई रिकवर नहीं कर सकता। आपकी तिजोरी इसी से एन्क्रिप्टेड है। तिजोरी चलाने वाला व्यक्ति आपका खाता हटा सकता है ताकि आप फिर से शुरू कर सकें, पर उसमें सहेजे पासवर्ड खो जाते हैं। [मास्टर पासवर्ड पर Bitwarden](https://bitwarden.com/help/master-password/)।" },
{ q: "मेरे Android फ़ोन में Google Play नहीं है।", a: "Bitwarden अपनी F-Droid रिपॉज़िटरी चलाता है। पता [Bitwarden डाउनलोड पेज](https://bitwarden.com/download/) पर दिया गया है।" },
{ q: "यहाँ Vaultwarden और Bitwarden दोनों क्यों लिखा है?", a: "Vaultwarden वह प्रोग्राम है जो आपकी तिजोरी चलाता है। यह अनौपचारिक सर्वर है जो आधिकारिक Bitwarden ऐप के साथ काम करता है। Vaultwarden का Bitwarden, Inc. से कोई संबंध नहीं है। तस्वीरें अंग्रेज़ी में Vaultwarden 1.37.2 दिखाती हैं; नए संस्करण और अन्य भाषाएँ अलग दिख सकती हैं।" },
]}
  attribution="**Vaultwarden आपकी तिजोरी चलाता है, और Bitwarden ऐप उसे खोलते हैं। kombify उसे आपके लिए इंस्टॉल करता है।** kombify इनमें से कोई ऐप नहीं बनाता। [Vaultwarden](https://github.com/dani-garcia/vaultwarden) (AGPL-3.0) · वेब तिजोरी: [Vaultwarden के लिए बना Bitwarden वेब क्लाइंट](https://github.com/dani-garcia/bw_web_builds) (GPL-3.0) · [Bitwarden](https://bitwarden.com/)"
  sources={{
summary: "kombify के स्क्रीनशॉट, स्थानीय Vaultwarden इंस्टॉल से · काल्पनिक खाता · अंग्रेज़ी मेनू।",
paragraphs: [
  "**स्क्रीनशॉट · 24 सितंबर 2026।** kombify ने वेब तिजोरी की तस्वीरें स्थानीय रेफ़रेंस इंस्टॉल से लीं: Vaultwarden 1.37.2, वह इमेज जो StackKits कैटलॉग Passwords के लिए डिलीवर करता है, अपने साथ आई वेब तिजोरी 2026.7.0 (Bitwarden वेब क्लाइंट, GPL-3.0) के साथ। इंस्टॉल में उदाहरण पता https://vault.home.test और काल्पनिक खाता alex@example.com उपयोग हुआ। यह रेफ़रेंस इंस्टॉल है, StackKits रोलआउट परीक्षण नहीं। बैंगनी मार्कर इस गाइड ने जोड़े हैं।",
  "Bitwarden ऐप की स्क्रीन नहीं दिखाई गई हैं। [Bitwarden की शर्तें](https://bitwarden.com/terms/) उसकी सामग्री दोबारा उपयोग करने की अनुमति नहीं देतीं, इसलिए चरण 5 Bitwarden की अपनी गाइड से लिंक करता है।",
  "स्टोर लिंक और सहायता पेज 24 सितंबर 2026 को जाँचे गए। आपकी प्रगति इसी ब्राउज़र में रहती है। यह गाइड कोई खाता नहीं जोड़ती और कोई पासवर्ड नहीं माँगती।",
],
links: [
  { label: "Bitwarden: अलग-अलग ऐप जोड़ें", href: "https://bitwarden.com/help/change-client-environment/" },
  { label: "Bitwarden डाउनलोड", href: "https://bitwarden.com/download/" },
  { label: "Vaultwarden प्रोजेक्ट", href: "https://github.com/dani-garcia/vaultwarden" },
],
}}
/>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.