Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox should not look like radio button #4615

51 changes: 18 additions & 33 deletions src/modules/auth/components/SetPasswordForm/SetPasswordForm.js
Original file line number Diff line number Diff line change
@@ -38,13 +38,12 @@ function SetPasswordForm({ onSubmit, recoveryPhrase }) {
resolver: yupResolver(setPasswordFormSchema),
});
const formValues = watch();
const {
password, cPassword, accountName, hasAgreed,
} = formValues;
const { password, cPassword, hasAgreed } = formValues;

const isButtonDisabled = useMemo(() =>
!password?.length || !cPassword?.length || !hasAgreed,
[formValues.password, formValues.cPassword, formValues.hasAgreed]);
const isButtonDisabled = useMemo(
() => !password?.length || !cPassword?.length || !hasAgreed,
[formValues.password, formValues.cPassword, formValues.hasAgreed]
);

const onFormSubmit = async (values) => {
const { error, result } = await encryptAccount({
@@ -66,7 +65,9 @@ function SetPasswordForm({ onSubmit, recoveryPhrase }) {
<div className={`${styles.titleHolder} ${grid['col-xs-12']}`}>
<h1>{t('Set up device password')}</h1>
<p>
{t('This password is used to encrypt your secret recovery phrase, which will be used for managing your account.')}
{t(
'This password is used to encrypt your secret recovery phrase, which will be used for managing your account.'
)}
</p>
</div>
<form onSubmit={handleSubmit(onFormSubmit)}>
@@ -76,23 +77,18 @@ function SetPasswordForm({ onSubmit, recoveryPhrase }) {
secureTextEntry
feedback={errors.password?.message}
status={errors.password ? 'error' : undefined}
defaultValues=""
value={password}
label={(
label={
<span className="password-label-wrapper">
Enter Password
<Tooltip
position="right"
title={t('Requirements')}
>
<Tooltip position="right" title={t('Requirements')}>
<p>
{
t('Password should be a combination of uppercase and lowercase alpha numeric characters with length more than 8')
}
{t(
'Password should be a combination of uppercase and lowercase alpha numeric characters with length more than 8'
)}
</p>
</Tooltip>
</span>
)}
}
{...register('password')}
/>
</div>
@@ -103,8 +99,6 @@ function SetPasswordForm({ onSubmit, recoveryPhrase }) {
feedback={errors.cPassword?.message}
status={errors.cPassword ? 'error' : undefined}
label="Confirm your Password"
defaultValues=""
value={cPassword}
{...register('cPassword')}
/>
</div>
@@ -114,24 +108,15 @@ function SetPasswordForm({ onSubmit, recoveryPhrase }) {
feedback={errors.accountName?.message}
status={errors.accountName ? 'error' : undefined}
label="Account name (Optional)"
defaultValues=""
value={accountName}
{...register('accountName')}
/>
</div>
<div className={`${styles.checkBoxWrapper}`}>
<CheckBox
className={`${styles.checkbox}`}
{...register('hasAgreed')}
/>
<label className={`${styles.checkBoxWrapper}`}>
<CheckBox className={`${styles.checkbox}`} {...register('hasAgreed')} />
<span>{t('I agree to store my encrypted secret recovery phrase on this device.')}</span>
</div>
</label>
<div className={[styles.fieldWrapper, styles.submitWrapper]}>
<PrimaryButton
type="submit"
style={{ width: '100%' }}
disabled={isButtonDisabled}
>
<PrimaryButton type="submit" style={{ width: '100%' }} disabled={isButtonDisabled}>
{t('Save Account')}
</PrimaryButton>
</div>
Original file line number Diff line number Diff line change
@@ -3,21 +3,18 @@ import PropTypes from 'prop-types';
import CheckBox from 'src/theme/CheckBox';
import styles from './discreetModeToggle.css';

const DiscreetModeToggle = ({
className,
isDiscreetMode,
settingsUpdated,
t,
}) => (
<div className={`${styles.wrapper} ${className}`}>
const DiscreetModeToggle = ({ className, isDiscreetMode, settingsUpdated, t }) => (
<label className={`${styles.wrapper} ${className}`}>
<CheckBox
name="discreetMode"
className={`${styles.checkbox} discreetMode`}
checked={isDiscreetMode}
onChange={() => { settingsUpdated({ discreetMode: !isDiscreetMode }); }}
onChange={() => {
settingsUpdated({ discreetMode: !isDiscreetMode });
}}
/>
<span>{t('Enable discreet mode when signed in (optional)')}</span>
</div>
</label>
);

DiscreetModeToggle.defaultProps = {
Original file line number Diff line number Diff line change
@@ -18,9 +18,9 @@ describe('DiscreetModeToggle Component', () => {

it('Should render properly with className and disabled discreet Mode', () => {
wrapper = setup(props);
expect(wrapper).toContainMatchingElements(1, 'div');
expect(wrapper).toContainMatchingElements(1, 'label');
expect(wrapper).toContainMatchingElements(1, 'span');
expect(wrapper.find('div')).toHaveClassName('toggle');
expect(wrapper.find('label')).toHaveClassName('toggle');
expect(wrapper.find('span')).toHaveText('Enable discreet mode when signed in (optional)');
wrapper.find('.discreetMode').simulate('change', true);
expect(props.settingsUpdated).toBeCalledWith({ discreetMode: true });
@@ -30,9 +30,9 @@ describe('DiscreetModeToggle Component', () => {
it('Should render properly with className and enabled discreet Mode', () => {
const newProps = { ...props, iconPosition: 'right', isDiscreetMode: true };
wrapper = setup(newProps);
expect(wrapper).toContainMatchingElements(1, 'div');
expect(wrapper).toContainMatchingElements(1, 'label');
expect(wrapper).toContainMatchingElements(1, 'span');
expect(wrapper.find('div')).toHaveClassName('toggle');
expect(wrapper.find('label')).toHaveClassName('toggle');
expect(wrapper.find('span')).toHaveText('Enable discreet mode when signed in (optional)');
wrapper.find('.discreetMode').simulate('change', true);
expect(props.settingsUpdated).toBeCalledWith({ discreetMode: false });
6 changes: 4 additions & 2 deletions src/theme/CheckBox/checkBox.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.checkbox {
--border-radius: 4px;

display: inline-block;
width: 15px;
height: 15px;
@@ -12,7 +14,7 @@

& span {
color: var(--color-ultramarine-blue);
border-radius: var(--border-radius-standard);
border-radius: var(--border-radius);
display: block;
width: 15px;
height: 15px;
@@ -26,7 +28,7 @@

&.accent {
border: 1px solid var(--color-ultramarine-blue);
border-radius: calc(var(--border-radius-standard) + 1px);
border-radius: calc(var(--border-radius) + 1px);
box-shadow: 0 0 5px 0 var(--color-ultramarine-blue);
line-height: 15px !important;
}
42 changes: 22 additions & 20 deletions src/theme/CheckBox/index.js
Original file line number Diff line number Diff line change
@@ -2,31 +2,33 @@ import React, { forwardRef } from 'react';
import Icon from 'src/theme/Icon';
import styles from './checkBox.css';

const CheckBox = forwardRef(({
added, removed, onChange, accent, checked, className, name, readOnly, value,
}, ref) => (
<label className={`${styles.checkbox} ${className} ${checked ? 'checked' : 'unchecked'}`}>
<input
type="checkbox"
data-testid={name}
checked={checked ? !!checked : undefined}
ref={ref}
value={value}
name={name}
readOnly={readOnly}
onChange={onChange}
/>
<span className={`${(accent || added) ? styles.accent : ''} ${removed ? styles.removed : ''}`}>
<Icon name="checkboxFilled" />
</span>
</label>
));
const CheckBox = forwardRef(
({ added, removed, onChange, accent, checked, className, name, readOnly, value, onBlur }, ref) => (
<label className={`${styles.checkbox} ${className} ${checked ? 'checked' : 'unchecked'}`}>
<input
type="checkbox"
data-testid={name}
checked={checked}
ref={ref}
value={value}
name={name}
readOnly={readOnly}
onChange={onChange}
onBlur={onBlur}
/>
<span
className={`${accent || added ? styles.accent : ''} ${removed ? styles.removed : ''}`}
>
<Icon name="checkboxFilled" />
</span>
</label>
)
);

CheckBox.defaultProps = {
added: false,
removed: false,
accent: false,
checked: false,
className: '',
name: '',
};
7 changes: 5 additions & 2 deletions src/theme/Input/Input.js
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ const updateStatus = ({
if (isLoading) {
status = 'pending';
}
if (!value || readOnly) {
if ((!value || readOnly) && status !== 'error') {
status = undefined;
}
if (error) {
@@ -150,7 +150,10 @@ Input.propTypes = {
type: PropTypes.oneOf(['text', 'textarea', 'password']),
feedback: PropTypes.string,
dark: PropTypes.bool,
label: PropTypes.string,
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node
]),
onChange: PropTypes.func,
isMasked: PropTypes.bool,
};