Browse Source

Adding scroll view to change password screens

master
GabrielTrettel 3 years ago
parent
commit
de94d72999
  1. 91
      src/app/screens/PasswordRecoveryChangePswdScreen.js
  2. 105
      src/app/screens/PasswordRecoveryScreen.js

91
src/app/screens/PasswordRecoveryChangePswdScreen.js

@ -8,6 +8,7 @@ import { dimensions } from "../config/dimensions";
import PasswordFormField from "../components/forms/PasswordFormField"; import PasswordFormField from "../components/forms/PasswordFormField";
import ConfirmationModal from "../components/ConfirmationModal"; import ConfirmationModal from "../components/ConfirmationModal";
import { updatePassword } from "../api/auth"; import { updatePassword } from "../api/auth";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
password: Yup.string() password: Yup.string()
@ -81,54 +82,56 @@ export default function PasswordRecoveryChangePswd({ navigation, route }) {
}} }}
/> />
<Form
validationSchema={validationSchema}
initialValues={{
password: "",
confirmPassword: "",
}}
onSubmit={(form, actions) => {
const psw_not_match = comparePassword(
form.password,
form.confirmPassword
);
if (psw_not_match) {
actions.setFieldError(
"confirmPassword",
"As senhas não correspondem"
<KeyboardAwareScrollView>
<Form
validationSchema={validationSchema}
initialValues={{
password: "",
confirmPassword: "",
}}
onSubmit={(form, actions) => {
const psw_not_match = comparePassword(
form.password,
form.confirmPassword
); );
} else {
handleSubmit(form.password);
}
}}
>
<View style={{ padding: 16 }}>
<Text style={styles.textHeader}>Redefinir sua senha</Text>
<Text style={styles.textSubtitle}>
Digite uma nova senha nos campos abaixo para redefini-la
</Text>
</View>
if (psw_not_match) {
actions.setFieldError(
"confirmPassword",
"As senhas não correspondem"
);
} else {
handleSubmit(form.password);
}
}}
>
<View style={{ padding: 16 }}>
<Text style={styles.textHeader}>Redefinir sua senha</Text>
<Text style={styles.textSubtitle}>
Digite uma nova senha nos campos abaixo para redefini-la
</Text>
</View>
<View>
<Text style={styles.labelStyle}>Nova senha*:</Text>
<PasswordFormField
maxLength={20}
name="password"
placeholder="Digite a nova senha"
/>
</View>
<View>
<Text style={styles.labelStyle}>Nova senha*:</Text>
<PasswordFormField
maxLength={20}
name="password"
placeholder="Digite a nova senha"
/>
</View>
<View style={{ marginVertical: 24 }}>
<Text style={styles.labelStyle}>Confirmar a senha</Text>
<PasswordFormField
maxLength={20}
name="confirmPassword"
placeholder="Digite novamente a senha"
/>
</View>
<View style={{ marginVertical: 24 }}>
<Text style={styles.labelStyle}>Confirmar a senha</Text>
<PasswordFormField
maxLength={20}
name="confirmPassword"
placeholder="Digite novamente a senha"
/>
</View>
<SubmitButton title="confirmar" backgroundColor={colors.primary} />
</Form>
<SubmitButton title="confirmar" backgroundColor={colors.primary} />
</Form>
</KeyboardAwareScrollView>
</View> </View>
); );
} }

105
src/app/screens/PasswordRecoveryScreen.js

@ -9,6 +9,7 @@ import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
import SearchablePicker from "../components/SearchablePicker"; import SearchablePicker from "../components/SearchablePicker";
import ConfirmationModal from "../components/ConfirmationModal"; import ConfirmationModal from "../components/ConfirmationModal";
import { loginByUsernamAnswers, existUsername } from "../api/auth"; import { loginByUsernamAnswers, existUsername } from "../api/auth";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
function SecQuestionPicker({ name }) { function SecQuestionPicker({ name }) {
const [items, setItems] = useState([ const [items, setItems] = useState([
@ -67,7 +68,6 @@ const validationSchema = Yup.object().shape({
export default function PasswordRecovery({ navigation, route }) { export default function PasswordRecovery({ navigation, route }) {
const user = route.params.user; const user = route.params.user;
console.log(user)
const [showLoading, setShowLoading] = useState(false); const [showLoading, setShowLoading] = useState(false);
const [confirmatioModalData, setConfirmatioModalData] = useState({ const [confirmatioModalData, setConfirmatioModalData] = useState({
@ -78,11 +78,11 @@ export default function PasswordRecovery({ navigation, route }) {
const handleSubmit = async (number, answer, secQuestion) => { const handleSubmit = async (number, answer, secQuestion) => {
setShowLoading(true); setShowLoading(true);
setTimeout(() => { setTimeout(() => {
console.log("to rodando", showLoading)
showLoading && setConfirmatioModalData({
message: "Validando informações",
show: true,
});
showLoading &&
setConfirmatioModalData({
message: "Validando informações",
show: true,
});
}, 2000); }, 2000);
const userExists = await existUsername(number); const userExists = await existUsername(number);
@ -104,7 +104,6 @@ export default function PasswordRecovery({ navigation, route }) {
switch (apiResponse.status) { switch (apiResponse.status) {
case 200: case 200:
console.log("ir pra proxima tela....");
navigation.navigate("PasswordRecoveryChangePswd", { navigation.navigate("PasswordRecoveryChangePswd", {
authToken: apiResponse.data, authToken: apiResponse.data,
username: number, username: number,
@ -142,51 +141,53 @@ export default function PasswordRecovery({ navigation, route }) {
} }
/> />
<Form
validationSchema={validationSchema}
initialValues={{
number: user.username || "",
answer: "",
secQuestion: "",
}}
onSubmit={({ number, answer, secQuestion }) => {
handleSubmit(number, answer, secQuestion);
}}
>
<View style={{ padding: 16 }}>
<Text style={styles.textHeader}>Recuperação de senha</Text>
<Text style={styles.textSubtitle}>
Responda à pergunta de segurança, isso ajuda a mostrar que essa
conta realmente pertence a você
</Text>
</View>
<View>
<Text style={styles.labelStyle}>Número de telefone*:</Text>
<PhoneNumberFormField
name="number"
maxLength={11}
placeholder={"(DDD) XXXXX-XXXX"}
editable={user.username == null}
/>
</View>
<View style={{ marginTop: 24 }}>
<Text style={styles.labelStyle}>Pergunta*:</Text>
<SecQuestionPicker name="secQuestion" />
</View>
<View style={{ marginVertical: 24 }}>
<Text style={styles.labelStyle}>Resposta*:</Text>
<FormField
name="answer"
maxLength={255}
placeholder={"Digite a resposta à pergunta"}
/>
</View>
<SubmitButton title="próximo" backgroundColor={colors.primary} />
</Form>
<KeyboardAwareScrollView>
<Form
validationSchema={validationSchema}
initialValues={{
number: user.username || "",
answer: "",
secQuestion: "",
}}
onSubmit={({ number, answer, secQuestion }) => {
handleSubmit(number, answer, secQuestion);
}}
>
<View style={{ padding: 16 }}>
<Text style={styles.textHeader}>Recuperação de senha</Text>
<Text style={styles.textSubtitle}>
Responda à pergunta de segurança, isso ajuda a mostrar que essa
conta realmente pertence a você
</Text>
</View>
<View>
<Text style={styles.labelStyle}>Número de telefone*:</Text>
<PhoneNumberFormField
name="number"
maxLength={11}
placeholder={"(DDD) XXXXX-XXXX"}
editable={user.username == null}
/>
</View>
<View style={{ marginTop: 24 }}>
<Text style={styles.labelStyle}>Pergunta*:</Text>
<SecQuestionPicker name="secQuestion" />
</View>
<View style={{ marginVertical: 24 }}>
<Text style={styles.labelStyle}>Resposta*:</Text>
<FormField
name="answer"
maxLength={255}
placeholder={"Digite a resposta à pergunta"}
/>
</View>
<SubmitButton title="próximo" backgroundColor={colors.primary} />
</Form>
</KeyboardAwareScrollView>
</View> </View>
); );
} }

Loading…
Cancel
Save