7b387762bd
* Add 3 step account creation * Add textarea with dropdown * Add OWASP and styles to PasswordStrength * Align the checkbox with other ui elements * Notification on mnemonic copy * Make confirmation label clickable * Do not shorten address in creation modal * Make address name not editable in header * Always show password strength meter * Always show password strength meter * Update tests to new account flow * Remove repeated dependency * Remove console.log from test * Update yarn.lock * Restore imports order. * Format div component according to style * Remove cursor styling for old browsers * Empty line * Organize imports. Configure StrengthTester once. Use color from theme. * wip on text area * TextArea styling * Checbox styling * Update repeated password validity on first password change * Simplify CopyButton notification code. * Change TextArea styling to more consistent * Make password strength indicator wider * Move external warning down and show on both steps * Inline TextArea subcomponents * Move mnemonic saved confirmation label closer to buttons * Add steps counter to header * Remove space Co-authored-by: Michał Ziętalak <michal.z@ethworks.io> Co-authored-by: Jaco Greeff <jacogr@gmail.com>
101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
// Copyright 2017-2020 @polkadot/react-components authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import React, { useCallback } from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
import { Labelled } from '.';
|
|
import { ThemeProps } from './types';
|
|
|
|
interface Props {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
help?: React.ReactNode;
|
|
isError?: boolean;
|
|
isReadOnly?: boolean;
|
|
label?: React.ReactNode;
|
|
onChange?: (arg: string) => void;
|
|
seed?: string;
|
|
withLabel?: boolean;
|
|
}
|
|
|
|
function TextArea ({ children, className, help, isError, isReadOnly, label, onChange, seed, withLabel }: Props): React.ReactElement<Props> {
|
|
const _onChange = useCallback(
|
|
({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>): void => {
|
|
onChange && onChange(value);
|
|
},
|
|
[onChange]
|
|
);
|
|
|
|
return (
|
|
<Labelled
|
|
className={className}
|
|
help={help}
|
|
label={label}
|
|
withLabel={withLabel}
|
|
>
|
|
<div className='TextAreaWithDropdown'>
|
|
<textarea
|
|
autoCapitalize='off'
|
|
autoCorrect='off'
|
|
autoFocus={false}
|
|
className={isError ? 'ui-textArea-withError' : ''}
|
|
onChange={_onChange}
|
|
readOnly={isReadOnly}
|
|
rows={2}
|
|
spellCheck={false}
|
|
value={seed}
|
|
/>
|
|
{children}
|
|
</div>
|
|
</Labelled>
|
|
);
|
|
}
|
|
|
|
export default React.memo(styled(TextArea)(({ theme }: ThemeProps) => `
|
|
.TextAreaWithDropdown {
|
|
display: flex;
|
|
textarea {
|
|
border-radius: 0.25rem 0 0 0.25rem;
|
|
border: 1px solid #DDE1EB;
|
|
border-right: none;
|
|
background: ${theme.bgInput};
|
|
box-sizing: border-box;
|
|
color: ${theme.color};
|
|
display: block;
|
|
outline: none;
|
|
padding: 1.75rem 3rem 0.75rem 1.5rem;
|
|
resize: none;
|
|
width: 100%;
|
|
|
|
&:read-only {
|
|
background: ${theme.bgInverse};
|
|
box-shadow: none;
|
|
outline: none;
|
|
|
|
~ .ui.buttons > .ui.selection.dropdown {
|
|
background: ${theme.bgInverse};
|
|
}
|
|
}
|
|
|
|
&.ui-textArea-withError {
|
|
background: ${theme.bgInputError};
|
|
color: ${theme.colorError};
|
|
}
|
|
}
|
|
|
|
& > .ui.buttons > .ui.button.floating.selection.dropdown {
|
|
border: 1px solid #DDE1EB;
|
|
border-left: none;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
& > .dropdown.icon {
|
|
top: 2rem;
|
|
}
|
|
}
|
|
}
|
|
`));
|