committed by
GitHub
6 changed files with 4 additions and 173 deletions
@ -1,49 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import styles from './NewAezeedPassword.scss' |
|||
|
|||
const NewAezeedPassword = ({ |
|||
aezeedPassword, |
|||
aezeedPasswordConfirmation, |
|||
showAezeedPasswordConfirmationError, |
|||
updateAezeedPassword, |
|||
updateAezeedPasswordConfirmation |
|||
}) => ( |
|||
<div className={styles.container}> |
|||
<section className={styles.input}> |
|||
<input |
|||
type="password" |
|||
placeholder="Password" |
|||
className={styles.password} |
|||
value={aezeedPassword} |
|||
onChange={event => updateAezeedPassword(event.target.value)} |
|||
/> |
|||
</section> |
|||
|
|||
<section className={styles.input}> |
|||
<input |
|||
type="password" |
|||
placeholder="Confirm Password" |
|||
className={`${styles.password} ${showAezeedPasswordConfirmationError && styles.error}`} |
|||
value={aezeedPasswordConfirmation} |
|||
onChange={event => updateAezeedPasswordConfirmation(event.target.value)} |
|||
/> |
|||
<p |
|||
className={`${styles.errorMessage} ${showAezeedPasswordConfirmationError && |
|||
styles.visible}`}
|
|||
> |
|||
Passwords do not match |
|||
</p> |
|||
</section> |
|||
</div> |
|||
) |
|||
|
|||
NewAezeedPassword.propTypes = { |
|||
aezeedPassword: PropTypes.string.isRequired, |
|||
aezeedPasswordConfirmation: PropTypes.string.isRequired, |
|||
showAezeedPasswordConfirmationError: PropTypes.bool.isRequired, |
|||
updateAezeedPassword: PropTypes.func.isRequired, |
|||
updateAezeedPasswordConfirmation: PropTypes.func.isRequired |
|||
} |
|||
|
|||
export default NewAezeedPassword |
@ -1,37 +0,0 @@ |
|||
@import '../../styles/variables.scss'; |
|||
|
|||
.input:nth-child(2) { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.password { |
|||
background: transparent; |
|||
outline: none; |
|||
border: 1px solid #404040; |
|||
border-radius: 4px; |
|||
padding: 15px; |
|||
color: $gold; |
|||
-webkit-text-fill-color: $white; |
|||
font-size: 22px; |
|||
transition: all 0.25s; |
|||
|
|||
&.error { |
|||
border: 1px solid $red; |
|||
} |
|||
} |
|||
|
|||
.password::-webkit-input-placeholder { |
|||
text-shadow: none; |
|||
-webkit-text-fill-color: initial; |
|||
} |
|||
|
|||
.errorMessage { |
|||
color: $red; |
|||
margin-top: 10px; |
|||
font-size: 10px; |
|||
visibility: hidden; |
|||
|
|||
&.visible { |
|||
visibility: visible; |
|||
} |
|||
} |
Loading…
Reference in new issue