diff --git a/src/components/NewPasswordInput/NewPasswordInput.less b/src/components/NewPasswordInput/NewPasswordInput.less index c64b5e1d..571ef2b1 100644 --- a/src/components/NewPasswordInput/NewPasswordInput.less +++ b/src/components/NewPasswordInput/NewPasswordInput.less @@ -5,13 +5,27 @@ .password-input { .form-group { + position: relative; align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; + .toggle span, .label-form { + position: absolute; + top: .15em; + user-select: none; + } + + @icon-distance: .25em; + + .label-form { + left: @icon-distance; + } + .toggle span { - position: relative; + right: @icon-distance; + cursor: pointer; } input { diff --git a/src/components/NewPasswordInput/NewPasswordInput.tsx b/src/components/NewPasswordInput/NewPasswordInput.tsx index c8ebb1e3..b83bf33d 100644 --- a/src/components/NewPasswordInput/NewPasswordInput.tsx +++ b/src/components/NewPasswordInput/NewPasswordInput.tsx @@ -13,9 +13,6 @@ interface NewPasswordInputProps { const NewPasswordInput: React.FC = ({ password, setPassword, valid, setValid }) => { - const [showPassword, setShowPassword] = useState(false); - const [showPasswordRepeat, setShowPasswordRepeat] = useState(false); - const [passwordRepeat, setPasswordRepeat] = useState("") const [validPasswordEquality, setValidPasswordEquality] = useState(false); @@ -39,55 +36,22 @@ const NewPasswordInput: React.FC = ({ password, setPasswo }, [password, passwordRepeat]); - function toggleShowPassword(){ - setShowPassword(!showPassword) - } - - function toggleShowPasswordRepeat(){ - setShowPasswordRepeat(!showPasswordRepeat) - } return (
-
-
- lock -
- setPassword(e.target.value)} - placeholder="Insira sua nova senha" - required - /> - - - {showPassword ? "visibility" : "visibility_off"} - - -
-
-
-
- lock -
- setPasswordRepeat(e.target.value)} - placeholder="Confirme sua nova senha" - required - /> - - - {showPasswordRepeat ? "visibility" : "visibility_off"} - - -
+ +
+
@@ -108,8 +72,36 @@ const NewPasswordInput: React.FC = ({ password, setPasswo
); +} +function PasswordInputGroup( props: Readonly ) { + const { password, placeholder, inputName, onChange } = props; + const [ showPassword, setShowPassword ] = useState( false ); + + return
+ lock + onChange( e.target.value ) } + placeholder={ placeholder } + required + /> + setShowPassword( s => !s ) }> + + { showPassword ? "visibility" : "visibility_off" } + + +
+} +type PasswordInputGroupProps = { + password: string; + placeholder: string; + inputName?: string; + onChange( password: string ): unknown; } -export default NewPasswordInput; \ No newline at end of file +export default NewPasswordInput; diff --git a/src/pages/SignUp/SignUpModal/SignUpModal.less b/src/pages/SignUp/SignUpModal/SignUpModal.less index f073c7a9..07a293d1 100644 --- a/src/pages/SignUp/SignUpModal/SignUpModal.less +++ b/src/pages/SignUp/SignUpModal/SignUpModal.less @@ -4,11 +4,11 @@ #sign-up-modal { - width: 75vw; - height: fit-content; - + max-width: min(75vw, 1000px); + max-height: min(fit-content, 80vh); + border-radius: 1.25rem; - overflow: hidden; + overflow: auto; background: @card-background-color; @@ -16,8 +16,6 @@ background: @primary-color; display: flex; - // grid-template-columns: 1fr auto 1fr; - // align-items: center; flex-direction: row; justify-content: space-between; align-content: center;