diff --git a/packages/blockchain-info-components/src/Form/PasswordInput.js b/packages/blockchain-info-components/src/Form/PasswordInput.js
index 2970b3d1c23..8d49dd88cda 100644
--- a/packages/blockchain-info-components/src/Form/PasswordInput.js
+++ b/packages/blockchain-info-components/src/Form/PasswordInput.js
@@ -17,7 +17,6 @@ const BasePasswordInput = styled.input.attrs((props) => ({
display: block;
width: 100%;
height: 48px;
- min-height: 48px;
font-family: ${({ isPasswordVisible }) =>
isPasswordVisible
? "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif"
@@ -31,15 +30,19 @@ const BasePasswordInput = styled.input.attrs((props) => ({
background-image: none;
outline-width: 0;
user-select: text;
- border-radius: 8px;
+ border-radius: 8px 0 0 8px;
border: ${({ borderColor, theme }) => `1px solid ${theme[borderColor]}`};
+ border-right: none;
&:focus {
border: 1px solid ${({ focusedBorderColor, theme }) => theme[focusedBorderColor]};
+ border-right: none;
}
+
&:focus::placeholder {
opacity: 0.25;
}
+
&::placeholder {
color: ${(props) => props.theme.grey400};
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
@@ -47,6 +50,7 @@ const BasePasswordInput = styled.input.attrs((props) => ({
font-size: 14px;
font-weight: 500;
}
+
&:disabled {
cursor: not-allowed;
background-color: ${(props) => props.theme.grey100};
@@ -55,26 +59,54 @@ const BasePasswordInput = styled.input.attrs((props) => ({
`
const Wrapper = styled.div`
- display: inline-block;
+ display: flex;
width: 100%;
height: 48px;
`
const ToggleVisibilityWrapper = styled.div`
- float: right;
- position: relative;
- bottom: 36px;
- right: 12px;
+ display: flex;
+ align-items: center;
+ height: 46px;
+ padding-right: 8px;
+ border-radius: 0 8px 8px 0;
+ border: ${({ borderColor, focusedBorderColor, isFocused, theme }) =>
+ `1px solid ${theme[isFocused ? focusedBorderColor : borderColor]}`};
+ border-left: none;
cursor: pointer;
z-index: 99;
+
+ &:disabled {
+ cursor: not-allowed;
+ background-color: ${(props) => props.theme.grey100};
+ border: 1px solid transparent;
+ border-left: none;
+ }
`
class PasswordInput extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = { focused: false }
+ this.onBlur = this.onBlur.bind(this)
+ this.onFocus = this.onFocus.bind(this)
+ }
+
componentDidUpdate(prevProps) {
if (this.props.active && !prevProps.active && this.input) {
this.input.focus()
}
}
+ onFocus = (e) => {
+ this.setState({ focused: true })
+ this.props.onFocus(e)
+ }
+
+ onBlur = (e) => {
+ this.setState({ focused: false })
+ this.props.onBlur(e)
+ }
+
refInput = (input) => {
this.input = input
}
@@ -85,7 +117,6 @@ class PasswordInput extends React.Component {
isPasswordVisible,
noLastPass,
setPasswordVisible,
- showVisibilityToggle,
value,
...rest
} = this.props
@@ -101,18 +132,23 @@ class PasswordInput extends React.Component {
ref={this.refInput}
value={value}
{...rest}
+ onFocus={this.onFocus}
+ onBlur={this.onBlur}
/>
- {showVisibilityToggle ? (
- setPasswordVisible(!isPasswordVisible)}>
-
- {isPasswordVisible ? : }
-
-
- ) : null}
+ setPasswordVisible(!isPasswordVisible)}
+ borderColor={selectBorderColor(errorState)}
+ focusedBorderColor={selectFocusBorderColor(errorState)}
+ isFocused={this.state.focused}
+ >
+
+ {isPasswordVisible ? : }
+
+
)
}
diff --git a/packages/blockchain-info-components/src/Form/__snapshots__/PasswordInput.spec.js.snap b/packages/blockchain-info-components/src/Form/__snapshots__/PasswordInput.spec.js.snap
index 74e91089b04..e29a1ab3a56 100644
--- a/packages/blockchain-info-components/src/Form/__snapshots__/PasswordInput.spec.js.snap
+++ b/packages/blockchain-info-components/src/Form/__snapshots__/PasswordInput.spec.js.snap
@@ -1,8 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PasswordInput component default renders correctly 1`] = `
-
+
+
+
+
+
+
+
+
`;
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SignupForm/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SignupForm/index.tsx
index 6b697909cfa..5fc16b225ad 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SignupForm/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SignupForm/index.tsx
@@ -87,6 +87,7 @@ const SignupForm = (props: Props) => {
component={TextBox}
data-e2e='signupEmail'
name='email'
+ noLastPass
placeholder='Enter Email Address'
validate={[required, validEmail]}
/>
@@ -103,7 +104,6 @@ const SignupForm = (props: Props) => {
data-e2e='signupPassword'
name='password'
placeholder='Enter Password'
- showVisibilityToggle
validate={[required, validStrongPassword]}
/>
@@ -172,9 +172,7 @@ const SignupForm = (props: Props) => {
component={PasswordBox}
data-e2e='signupConfirmPassword'
name='confirmationPassword'
- noLastPass
placeholder='Reenter Password'
- showVisibilityToggle
validate={[required, validatePasswordConfirmation]}
/>