first commit

services/web/frontend/js/features/compromised-password/components/compromised-password-root.tsx

@@ -0,0 +1,39 @@
+import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import { Trans, useTranslation } from 'react-i18next'
+import { Interstitial } from '@/shared/components/interstitial'
+
+export function CompromisedPasswordCard() {
+  const { t } = useTranslation()
+  const { isReady } = useWaitForI18n()
+
+  if (!isReady) {
+    return null
+  }
+
+  return (
+    <Interstitial
+      contentClassName="compromised-password-content"
+      showLogo={false}
+      title={t('compromised_password')}
+    >
+      <p>
+        <Trans
+          i18nKey="your_password_was_detected"
+          components={[
+            /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+            <a
+              href="https://haveibeenpwned.com/passwords"
+              target="_blank"
+              rel="noreferrer"
+            />,
+          ]}
+        />
+      </p>
+
+      <OLButton className="btn-primary" href="/user/settings">
+        {t('change_password_in_account_settings')}
+      </OLButton>
+    </Interstitial>
+  )
+}