tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

EmbeddedFxBackupOptIn.jsx (3148B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
      4 
      5 import React, { useEffect, useRef } from "react";
      6 
      7 export const EmbeddedFxBackupOptIn = ({
      8  handleAction,
      9  isEncryptedBackup,
     10  options,
     11 }) => {
     12  const backupRef = useRef(null);
     13  const {
     14    // hide_password_input means it is the file chooser screen
     15    hide_password_input,
     16    hide_secondary_button,
     17    file_path_label,
     18    turn_on_backup_header,
     19    create_password_label,
     20    turn_on_backup_confirm_btn_label,
     21    turn_on_backup_cancel_btn_label,
     22  } = options || {};
     23 
     24  useEffect(() => {
     25    const { current } = backupRef;
     26    const handleEnableScheduledBackups = () => {
     27      handleAction({
     28        currentTarget: { value: "tile_button" },
     29        action: { navigate: true },
     30        source: "backup_enabled",
     31      });
     32    };
     33 
     34    const handleAdvanceScreens = () => {
     35      handleAction({
     36        currentTarget: { value: "tile_button" },
     37        action: { navigate: true },
     38        source: "advance_screens",
     39      });
     40    };
     41 
     42    const handleStateUpdate = ({ detail: { state } }) => {
     43      if (!current || !state) {
     44        return;
     45      }
     46      let { fileName, path, iconURL } = state.defaultParent;
     47      current.setAttribute("defaultlabel", fileName);
     48      current.setAttribute("defaultpath", path);
     49      current.setAttribute("defaulticonurl", iconURL);
     50      current.supportBaseLink = state.supportBaseLink;
     51    };
     52 
     53    current?.addEventListener("BackupUI:StateWasUpdated", handleStateUpdate);
     54    current?.addEventListener(
     55      "BackupUI:EnableScheduledBackups",
     56      handleEnableScheduledBackups
     57    );
     58    current?.addEventListener(
     59      "SpotlightOnboardingAdvanceScreens",
     60      handleAdvanceScreens
     61    );
     62 
     63    return () => {
     64      current?.removeEventListener(
     65        "BackupUI:EnableScheduledBackups",
     66        handleEnableScheduledBackups
     67      );
     68      current?.removeEventListener(
     69        "BackupUI:StateWasUpdated",
     70        handleStateUpdate
     71      );
     72      current?.removeEventListener(
     73        "SpotlightOnboardingAdvanceScreens",
     74        handleAdvanceScreens
     75      );
     76    };
     77  }, []); // eslint-disable-line react-hooks/exhaustive-deps
     78 
     79  return (
     80    <turn-on-scheduled-backups
     81      ref={backupRef}
     82      hide-headers={""}
     83      hide-password-input={
     84        !isEncryptedBackup || hide_password_input ? "" : undefined
     85      }
     86      hide-secondary-button={
     87        !isEncryptedBackup || hide_secondary_button ? "" : undefined
     88      }
     89      hide-file-path-chooser={
     90        isEncryptedBackup && !hide_password_input ? "" : undefined
     91      }
     92      embedded-fx-backup-opt-in={""}
     93      backup-is-encrypted={isEncryptedBackup ? "" : undefined}
     94      file-path-label-l10n-id={file_path_label}
     95      turn-on-backup-header-l10n-id={turn_on_backup_header}
     96      create-password-label-l10n-id={create_password_label}
     97      turn-on-backup-confirm-btn-l10n-id={turn_on_backup_confirm_btn_label}
     98      turn-on-backup-cancel-btn-l10n-id={turn_on_backup_cancel_btn_label}
     99    ></turn-on-scheduled-backups>
    100  );
    101 };