-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #877 from ChainSafe/feat/tbaut-settings-security-846
Security settings
- Loading branch information
Showing
17 changed files
with
1,292 additions
and
668 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
174 changes: 174 additions & 0 deletions
174
packages/files-ui/src/Components/Elements/MnemonicForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| import React, { useCallback } from "react" | ||
| import { Button, CopySvg, Loading, Typography } from "@chainsafe/common-components" | ||
| import { useState } from "react" | ||
| import { createStyles, debounce, makeStyles } from "@chainsafe/common-theme" | ||
| import { CSFTheme } from "../../Themes/types" | ||
| import { t, Trans } from "@lingui/macro" | ||
| import { useThresholdKey } from "../../Contexts/ThresholdKeyContext" | ||
| import clsx from "clsx" | ||
|
|
||
| const useStyles = makeStyles(({ animation, constants, palette, zIndex }: CSFTheme) => | ||
| createStyles({ | ||
| phraseSpace: { | ||
| cursor: "pointer", | ||
| position: "relative", | ||
| display: "flex", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| flexDirection: "column", | ||
| minHeight: 123, | ||
| borderRadius: 10, | ||
| backgroundColor: constants.loginModule.itemBackground, | ||
| color: constants.loginModule.textColor, | ||
| padding: `${constants.generalUnit}px ${constants.generalUnit * 3}px`, | ||
| marginTop: constants.generalUnit * 3, | ||
| marginBottom: constants.generalUnit * 4 | ||
| }, | ||
| cta: { | ||
| textDecoration: "underline" | ||
| }, | ||
| copyArea: { | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| alignItems: "center", | ||
| justifyContent: "space-between", | ||
| "& > p": { | ||
| maxWidth: `calc(100% - (35px + ${constants.generalUnit * 3}px))` | ||
| } | ||
| }, | ||
| copiedFlag: { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| left: "50%", | ||
| top: 0, | ||
| position: "absolute", | ||
| transform: "translate(-50%, -50%)", | ||
| zIndex: zIndex?.layer1, | ||
| transitionDuration: `${animation.transform}ms`, | ||
| opacity: 0, | ||
| visibility: "hidden", | ||
| backgroundColor: constants.loginModule.flagBg, | ||
| color: constants.loginModule.flagText, | ||
| padding: `${constants.generalUnit / 2}px ${constants.generalUnit}px`, | ||
| borderRadius: 2, | ||
| "&:after": { | ||
| transitionDuration: `${animation.transform}ms`, | ||
| content: "''", | ||
| position: "absolute", | ||
| top: "100%", | ||
| left: "50%", | ||
| transform: "translate(-50%,0)", | ||
| width: 0, | ||
| height: 0, | ||
| borderLeft: "5px solid transparent", | ||
| borderRight: "5px solid transparent", | ||
| borderTop: `5px solid ${constants.loginModule.flagBg}` | ||
| }, | ||
| "&.active": { | ||
| opacity: 1, | ||
| visibility: "visible" | ||
| } | ||
| }, | ||
| copyIcon: { | ||
| transitionDuration: `${animation.transform}ms`, | ||
| fill: constants.loginModule.iconColor, | ||
| height: 35, | ||
| width: 35, | ||
| marginLeft: constants.generalUnit * 3, | ||
| "&.active": { | ||
| fill: palette.success.main | ||
| } | ||
| }, | ||
| loader: { | ||
| display: "flex", | ||
| alignItems: "center", | ||
| "& svg": { | ||
| marginRight: constants.generalUnit | ||
| } | ||
| } | ||
| }) | ||
| ) | ||
|
|
||
| interface Props { | ||
| buttonLabel?: string | ||
| onComplete: () => void | ||
| } | ||
|
|
||
| const MnemonicForm = ({ buttonLabel, onComplete }: Props) => { | ||
| const classes = useStyles() | ||
| const displayButtonLabel = buttonLabel || t`Continue` | ||
| const [isLoading, setIsLoading] = useState(false) | ||
| const { addMnemonicShare, hasMnemonicShare } = useThresholdKey() | ||
| const [mnemonic, setMnemonic] = useState("") | ||
| const [copied, setCopied] = useState(false) | ||
| const debouncedSwitchCopied = debounce(() => setCopied(false), 3000) | ||
|
|
||
| const onSectionClick = useCallback(async () => { | ||
| if (mnemonic.length === 0) { | ||
| if (!hasMnemonicShare) { | ||
| setIsLoading(true) | ||
| const newMnemonic = await addMnemonicShare() | ||
| setMnemonic(newMnemonic) | ||
| setIsLoading(false) | ||
| } | ||
| } else { | ||
| try { | ||
| await navigator.clipboard.writeText(mnemonic) | ||
| setCopied(true) | ||
| debouncedSwitchCopied() | ||
| } catch (err) { | ||
| console.error(err) | ||
| } | ||
| } | ||
| }, [mnemonic, hasMnemonicShare, setIsLoading, addMnemonicShare, debouncedSwitchCopied]) | ||
|
|
||
| return ( | ||
| <> | ||
| <section className={clsx(classes.phraseSpace, "phraseSection")} onClick={onSectionClick}> | ||
| { isLoading | ||
| ? ( | ||
| <Typography component="p" className={classes.loader}> | ||
| <Loading type="inherit" size={16} /> | ||
| <Trans> | ||
| Generating... | ||
| </Trans> | ||
| </Typography> | ||
| ) | ||
| : ( | ||
| mnemonic.length === 0 | ||
| ? ( | ||
| <Typography className={classes.cta} component="p"> | ||
| <Trans> | ||
| Generate phrase | ||
| </Trans> | ||
| </Typography> | ||
| ) | ||
| : ( | ||
| <div className={classes.copyArea}> | ||
| <div className={clsx(classes.copiedFlag, { "active": copied })}> | ||
| <span> | ||
| <Trans> | ||
| Copied! | ||
| </Trans> | ||
| </span> | ||
| </div> | ||
| <Typography component="p"> | ||
| {mnemonic} | ||
| </Typography> | ||
| <CopySvg className={clsx(classes.copyIcon, { "active": copied })} /> | ||
| </div> | ||
| ) | ||
| )} | ||
| </section> | ||
| {!!mnemonic.length && ( | ||
| <Button onClick={onComplete}> | ||
| {displayButtonLabel} | ||
| </Button> | ||
| )} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default MnemonicForm |
128 changes: 128 additions & 0 deletions
128
packages/files-ui/src/Components/Elements/PasswordForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import React, { useCallback, useMemo } from "react" | ||
| import { Button, FormikTextInput } from "@chainsafe/common-components" | ||
| import { Form, Formik } from "formik" | ||
| import { useState } from "react" | ||
| import * as yup from "yup" | ||
| import { createStyles, makeStyles } from "@chainsafe/common-theme" | ||
| import { CSFTheme } from "../../Themes/types" | ||
| import zxcvbn from "zxcvbn" | ||
| import { t } from "@lingui/macro" | ||
| import StrengthIndicator from "../Modules/MasterKeySequence/SequenceSlides/StrengthIndicator" | ||
| import clsx from "clsx" | ||
|
|
||
| const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => | ||
| createStyles({ | ||
| input: { | ||
| margin: 0, | ||
| width: "100%", | ||
| marginBottom: constants.generalUnit * 1.5 | ||
| }, | ||
| inputLabel: { | ||
| fontSize: "16px", | ||
| lineHeight: "24px", | ||
| marginBottom: constants.generalUnit | ||
| }, | ||
| button: { | ||
| [breakpoints.up("md")]: { | ||
| marginTop: constants.generalUnit * 10 | ||
| }, | ||
| [breakpoints.down("md")]: { | ||
| marginTop: constants.generalUnit | ||
| } | ||
| } | ||
| }) | ||
| ) | ||
|
|
||
| interface Props { | ||
| buttonLabel?: string | ||
| setPassword: (password: string) => Promise<void> | ||
| } | ||
|
|
||
| const PasswordForm = ({ buttonLabel, setPassword }: Props) => { | ||
| const [loading, setLoading] = useState(false) | ||
| const classes = useStyles() | ||
| const displayLabel = buttonLabel || t`Set Password` | ||
| const passwordValidation = useMemo(() => yup.object().shape({ | ||
| password: yup | ||
| .string() | ||
| .test( | ||
| "Complexity", | ||
| t`Password needs to be more complex`, | ||
| async (val: string | null | undefined | object) => { | ||
| if (val === undefined) { | ||
| return false | ||
| } | ||
|
|
||
| const complexity = zxcvbn(`${val}`) | ||
| if (complexity.score >= 2) { | ||
| return true | ||
| } | ||
| return false | ||
| } | ||
| ) | ||
| .required(t`Please provide a password`), | ||
| confirmPassword: yup | ||
| .string() | ||
| .oneOf( | ||
| [yup.ref("password"), undefined], | ||
| t`Passwords must match` | ||
| ) | ||
| .required(t`Password confirmation is required`) | ||
| }) | ||
| , []) | ||
|
|
||
| const onSubmit = useCallback((values, helpers) => { | ||
| helpers.setSubmitting(true) | ||
| setLoading(true) | ||
| setPassword(values.password) | ||
| .then(() => { | ||
| setLoading(false) | ||
| helpers.setSubmitting(false) | ||
| }) | ||
| .catch ((e) => { | ||
| setLoading(false) | ||
| helpers.setSubmitting(false) | ||
| console.error(e) | ||
| }) | ||
| }, [setPassword]) | ||
|
|
||
| return ( | ||
| <Formik | ||
| initialValues={{ | ||
| password: "", | ||
| confirmPassword: "" | ||
| }} | ||
| validationSchema={passwordValidation} | ||
| onSubmit={onSubmit} | ||
| > | ||
| <Form> | ||
| <FormikTextInput | ||
| type="password" | ||
| className={classes.input} | ||
| name="password" | ||
| label={t`Password:`} | ||
| labelClassName={classes.inputLabel} | ||
| captionMessage={<StrengthIndicator fieldName="password" />} | ||
| /> | ||
| <FormikTextInput | ||
| type="password" | ||
| className={classes.input} | ||
| name="confirmPassword" | ||
| label={t`Confirm Password:`} | ||
| labelClassName={classes.inputLabel} | ||
| /> | ||
| <Button | ||
| className={clsx(classes.button, "passwordFormButton")} | ||
| fullsize | ||
| type="submit" | ||
| loading={loading} | ||
| disabled={loading} | ||
| > | ||
| {displayLabel} | ||
| </Button> | ||
| </Form> | ||
| </Formik> | ||
| ) | ||
| } | ||
|
|
||
| export default PasswordForm |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.