generate.tsx 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. import log from "@/next/log";
  2. import { putAttributes } from "@ente/accounts/api/user";
  3. import { logoutUser } from "@ente/accounts/services/logout";
  4. import { configureSRP } from "@ente/accounts/services/srp";
  5. import { generateKeyAndSRPAttributes } from "@ente/accounts/utils/srp";
  6. import {
  7. generateAndSaveIntermediateKeyAttributes,
  8. saveKeyInSessionStore,
  9. } from "@ente/shared/crypto/helpers";
  10. import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
  11. import { SESSION_KEYS, getKey } from "@ente/shared/storage/sessionStorage";
  12. import { t } from "i18next";
  13. import { useEffect, useState } from "react";
  14. import SetPasswordForm from "@ente/accounts/components/SetPasswordForm";
  15. import { PAGES } from "@ente/accounts/constants/pages";
  16. import { APP_HOMES } from "@ente/shared/apps/constants";
  17. import { PageProps } from "@ente/shared/apps/types";
  18. import { VerticallyCentered } from "@ente/shared/components/Container";
  19. import EnteSpinner from "@ente/shared/components/EnteSpinner";
  20. import FormPaper from "@ente/shared/components/Form/FormPaper";
  21. import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
  22. import FormTitle from "@ente/shared/components/Form/FormPaper/Title";
  23. import LinkButton from "@ente/shared/components/LinkButton";
  24. import RecoveryKey from "@ente/shared/components/RecoveryKey";
  25. import {
  26. justSignedUp,
  27. setJustSignedUp,
  28. } from "@ente/shared/storage/localStorage/helpers";
  29. import { KeyAttributes, User } from "@ente/shared/user/types";
  30. import { useRouter } from "next/router";
  31. export default function Generate({ appContext, appName }: PageProps) {
  32. const [token, setToken] = useState<string>();
  33. const [user, setUser] = useState<User>();
  34. const [recoverModalView, setRecoveryModalView] = useState(false);
  35. const [loading, setLoading] = useState(true);
  36. const router = useRouter();
  37. useEffect(() => {
  38. const main = async () => {
  39. const key: string = getKey(SESSION_KEYS.ENCRYPTION_KEY);
  40. const keyAttributes: KeyAttributes = getData(
  41. LS_KEYS.ORIGINAL_KEY_ATTRIBUTES,
  42. );
  43. const user: User = getData(LS_KEYS.USER);
  44. setUser(user);
  45. if (!user?.token) {
  46. router.push(PAGES.ROOT);
  47. } else if (key) {
  48. if (justSignedUp()) {
  49. setRecoveryModalView(true);
  50. setLoading(false);
  51. } else {
  52. router.push(APP_HOMES.get(appName));
  53. }
  54. } else if (keyAttributes?.encryptedKey) {
  55. router.push(PAGES.CREDENTIALS);
  56. } else {
  57. setToken(user.token);
  58. setLoading(false);
  59. }
  60. };
  61. main();
  62. appContext.showNavBar(true);
  63. }, []);
  64. const onSubmit = async (passphrase, setFieldError) => {
  65. try {
  66. const { keyAttributes, masterKey, srpSetupAttributes } =
  67. await generateKeyAndSRPAttributes(passphrase);
  68. await putAttributes(token, keyAttributes);
  69. await configureSRP(srpSetupAttributes);
  70. await generateAndSaveIntermediateKeyAttributes(
  71. passphrase,
  72. keyAttributes,
  73. masterKey,
  74. );
  75. await saveKeyInSessionStore(SESSION_KEYS.ENCRYPTION_KEY, masterKey);
  76. setJustSignedUp(true);
  77. setRecoveryModalView(true);
  78. } catch (e) {
  79. log.error("failed to generate password", e);
  80. setFieldError("passphrase", t("PASSWORD_GENERATION_FAILED"));
  81. }
  82. };
  83. return (
  84. <>
  85. {loading ? (
  86. <VerticallyCentered>
  87. <EnteSpinner />
  88. </VerticallyCentered>
  89. ) : recoverModalView ? (
  90. <RecoveryKey
  91. appContext={appContext}
  92. show={recoverModalView}
  93. onHide={() => {
  94. setRecoveryModalView(false);
  95. router.push(APP_HOMES.get(appName));
  96. }}
  97. somethingWentWrong={() => null}
  98. />
  99. ) : (
  100. <VerticallyCentered>
  101. <FormPaper>
  102. <FormTitle>{t("SET_PASSPHRASE")}</FormTitle>
  103. <SetPasswordForm
  104. userEmail={user?.email}
  105. callback={onSubmit}
  106. buttonText={t("SET_PASSPHRASE")}
  107. />
  108. <FormPaperFooter>
  109. <LinkButton onClick={logoutUser}>
  110. {t("GO_BACK")}
  111. </LinkButton>
  112. </FormPaperFooter>
  113. </FormPaper>
  114. </VerticallyCentered>
  115. )}
  116. </>
  117. );
  118. }