All files / app/features/auth/verification StrongVerification.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Link, Typography } from "@material-ui/core";
import Button from "components/Button";
import { Trans, useTranslation } from "i18n";
import { AUTH } from "i18n/namespaces";
import { GetAccountInfoRes } from "proto/account_pb";
 
const STRONG_VERIFICATION_URL =
  process.env.NEXT_PUBLIC_CONSOLE_BASE_URL + "/strong-verification";
 
type ChangePhoneProps = {
  accountInfo: GetAccountInfoRes.AsObject;
  className?: string;
};
 
export default function StrongVerification({
  className,
  accountInfo,
}: ChangePhoneProps) {
  const { t } = useTranslation(AUTH);
 
  return (
    <div className={className}>
      <Typography variant="h2">{t("strong_verification.title")}</Typography>
      <Typography variant="body1">
        <Trans
          t={t}
          i18nKey={
            accountInfo.hasStrongVerification
              ? "strong_verification.status.enabled_message"
              : "strong_verification.status.disabled_message"
          }
        >
          You <strong>are currently</strong> verified with Strong Verification.
        </Trans>
      </Typography>
      <Typography variant="body1">
        <Trans t={t} i18nKey="strong_verification.complete_in_console">
          You can complete Strong Verification{" "}
          <Link href={STRONG_VERIFICATION_URL}>on this page</Link>. We are
          working on improving the flow and implementing it fully in the
          platform.
        </Trans>
      </Typography>
      <Button href={STRONG_VERIFICATION_URL}>
        {t("strong_verification.go_to_button")}
      </Button>
    </div>
  );
}