Browse Source

[in-process] user autentication

master
GabrielTrettel 3 years ago
parent
commit
afc1cd1809
  1. 31
      src/app/api/auth.js
  2. 2
      src/app/screens/AccountScreen.js
  3. 71
      src/app/screens/ActivateInstitutionCode.js
  4. 4
      src/app/screens/LoginScreen.js
  5. 38
      src/app/screens/RegisterScreen.js

31
src/app/api/auth.js

@ -1,5 +1,6 @@
import { create } from "apisauce"; import { create } from "apisauce";
import authClient from "../auth/authClient"; import authClient from "../auth/authClient";
import authStorage from "../auth/storage";
function login(name, password) { function login(name, password) {
return authClient.post(`/login?username=${name}&password=${password}`); return authClient.post(`/login?username=${name}&password=${password}`);
@ -18,6 +19,7 @@ function signup({
secQuestion, secQuestion,
secQuestionAns, secQuestionAns,
consent, consent,
role,
}) { }) {
const body = { const body = {
username: number, username: number,
@ -32,22 +34,37 @@ function signup({
securityquestion: secQuestion, securityquestion: secQuestion,
securityanswer: secQuestionAns, securityanswer: secQuestionAns,
termsofusage: consent, termsofusage: consent,
roles: ["ROLE_CLIENT"],
roles: role !== "" ? [role] : ["ROLE_CLIENT"],
}; };
// Object.entries(body).forEach(([key, value]) => {
// value == "" && delete body[key];
// });
Object.entries(body).forEach(([key, value]) => {
value === "" && delete body[key];
});
return authClient.post(`/signup`, body); return authClient.post(`/signup`, body);
} }
function userPersonalData(token) {
async function userPersonalData() {
const authToken = await authStorage.getToken()
const localClient = create({ const localClient = create({
baseURL: "http://wpd.brazilsouth.cloudapp.azure.com:8080/users", baseURL: "http://wpd.brazilsouth.cloudapp.azure.com:8080/users",
}); });
localClient.setHeader("Authorization", `Bearer ${token}`);
localClient.setHeader("Authorization", `Bearer ${authToken}`);
return localClient.get(`/me`); return localClient.get(`/me`);
} }
export { login, signup, userPersonalData };
async function userActivation(code) {
const { username } = await authStorage.getUser();
const authToken = await authStorage.getToken()
const localClient = create({
baseURL: "http://wpd.brazilsouth.cloudapp.azure.com:8080/users",
});
localClient.setHeader("Authorization", `Bearer ${authToken}`);
return localClient.post(`/activate?activationkey=${code}&username=${username}`);
}
export { login, signup, userPersonalData, userActivation };

2
src/app/screens/AccountScreen.js

@ -95,7 +95,7 @@ function AccountScreen(props) {
IconProvider: FontAwesome, IconProvider: FontAwesome,
title: "ATIVAR INSTITUIÇÃO", title: "ATIVAR INSTITUIÇÃO",
onPress: () => { onPress: () => {
props.navigation.navigate("ActivateInstitution");
props.navigation.navigate("ActivateInstitutionCode");
}, },
}, },
{ {

71
src/app/screens/ActivateInstitutionCode.js

@ -7,8 +7,6 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
import { AuthContext } from "../auth/context"; import { AuthContext } from "../auth/context";
import authStorage from "../auth/storage"; import authStorage from "../auth/storage";
import { import {
Form, Form,
SubmitButton, SubmitButton,
@ -17,7 +15,7 @@ import {
} from "../components/forms"; } from "../components/forms";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import ConfirmationModal from "../components/ConfirmationModal"; import ConfirmationModal from "../components/ConfirmationModal";
import {userPersonalData} from "../api/auth";
import { userActivation } from "../api/auth";
function Header() { function Header() {
return ( return (
@ -43,20 +41,27 @@ function Header() {
} }
function Institution({ user, institutionRole }) { function Institution({ user, institutionRole }) {
var institutionMap = {
const institutionMap = {
E: "Escola", E: "Escola",
D: "Defesa Civil", D: "Defesa Civil",
N: "Não governamental", N: "Não governamental",
O: "Outra", O: "Outra",
N: "Nenhuma"
N: "Nenhuma",
}; };
const roleMap = {
ROLE_CLIENT: "Não responsável",
ROLE_INSTITUTION: "Responsável",
}
return ( return (
<View style={{ marginTop: 24, marginBottom: 24 }}> <View style={{ marginTop: 24, marginBottom: 24 }}>
<Text style={styles.label}>Tippo de instituição: </Text> <Text style={styles.label}>Tippo de instituição: </Text>
<View style={{ flexDirection: "row" }}> <View style={{ flexDirection: "row" }}>
<MaterialCommunityIcons name="bank" size={30} color={colors.primary} /> <MaterialCommunityIcons name="bank" size={30} color={colors.primary} />
<Text style={styles.subText}>{institutionMap[user.institutiontype]}</Text>
<Text style={styles.subText}>
{institutionMap[user.institutiontype]}
</Text>
</View> </View>
<Text style={[styles.label, { marginTop: 24 }]}> <Text style={[styles.label, { marginTop: 24 }]}>
@ -76,19 +81,24 @@ function Institution({ user, institutionRole }) {
size={30} size={30}
color={colors.primary} color={colors.primary}
/> />
<Text style={styles.subText}>{institutionRole}</Text>
<Text style={styles.subText}>{roleMap[user.role]}</Text>
</View> </View>
</View> </View>
); );
} }
function ValidateCode({ institutionRole, user }) {
// 950ebd56-7acc-4b45-9366-23a0f814f3f2
// 1199990987
function ValidateCode({ user }) {
return ( return (
<View flex={1} padding={16} width="100%"> <View flex={1} padding={16} width="100%">
<Header /> <Header />
<Institution user={user} institutionRole={institutionRole} />
<Institution user={user} />
<Text style={[styles.label]}>Código de ativação:</Text>
<View style={styles.iconField}> <View style={styles.iconField}>
<MaterialCommunityIcons <MaterialCommunityIcons
name="key" name="key"
@ -101,7 +111,7 @@ function ValidateCode({ institutionRole, user }) {
<FormField <FormField
paddingRight={2} paddingRight={2}
flex={1} flex={1}
maxLength={12}
maxLength={36}
name="code" name="code"
numberOfLines={2} numberOfLines={2}
placeholder="Digite o código de ativação" placeholder="Digite o código de ativação"
@ -113,33 +123,34 @@ function ValidateCode({ institutionRole, user }) {
); );
} }
function verifyCode(code) {
return true;
}
function processOnSubmit(navigation, form, instRole, setShowLog) {
async function processOnSubmit(navigation, form, instRole, setShowLog) {
const response = await userActivation(form.code);
console.log(response)
if (instRole == "Não responsável") { if (instRole == "Não responsável") {
if (verifyCode(form.code)) {
setShowLog({show: true, message: true});
if (response.ok) {
setShowLog({ show: true, message: true });
} else { } else {
setShowLog({show: true, message: false});
setShowLog({ show: true, message: false });
} }
} else if (verifyCode(form.code)) {
navigation.navigate("ActivateInstitutionShowCode", { code: form.code });
} else if (response.ok) {
navigation.navigate("ActivateInstitutionShowCode", { code: response.data });
} else { } else {
setShowLog({show: true, message: false});
setShowLog({ show: true, message: false });
} }
// navigation.navigate("ActivateInstitutionShowCode", { code: form.code }); // navigation.navigate("ActivateInstitutionShowCode", { code: form.code });
} }
export default function ActivateInstitutionCode({ route, navigation }) {
const { instRole } = route.params;
export default function ActivateInstitutionCode({ navigation }) {
const { user, _ } = useContext(AuthContext); const { user, _ } = useContext(AuthContext);
// FIXME: wpdAuth has errors while giving /me data for ROLE_INSTITUTION
user.role = "ROLE_CLIENT"
const initialState = {show: false, message: true}
const initialState = { show: false, message: true };
const [showLog, setShowLog] = useState(initialState); const [showLog, setShowLog] = useState(initialState);
return ( return (
@ -149,19 +160,23 @@ export default function ActivateInstitutionCode({ route, navigation }) {
}} }}
onSubmit={(form) => { onSubmit={(form) => {
console.log("Forms values: \n" + JSON.stringify(form)); console.log("Forms values: \n" + JSON.stringify(form));
processOnSubmit(navigation, form, instRole, setShowLog);
processOnSubmit(navigation, form, user.role, setShowLog);
}} }}
> >
<ConfirmationModal <ConfirmationModal
show={showLog.show} show={showLog.show}
description={showLog.message ? "O código de ativação foi validado com sucesso." : "O código de ativação informado não coincide com o código do responsável pela instituição no Cemaden Educação."}
description={
showLog.message
? "O código de ativação foi validado com sucesso."
: "O código de ativação informado não coincide com o código do responsável pela instituição no Cemaden Educação."
}
confirmationLabel="OK" confirmationLabel="OK"
onConfirm={() => setShowLog(initialState)} onConfirm={() => setShowLog(initialState)}
onDecline={() => setShowLog(initialState)} onDecline={() => setShowLog(initialState)}
/> />
<KeyboardAwareScrollView> <KeyboardAwareScrollView>
<ValidateCode user={user} institutionRole={instRole} />
<ValidateCode user={user} />
</KeyboardAwareScrollView> </KeyboardAwareScrollView>
</Form> </Form>
); );

4
src/app/screens/LoginScreen.js

@ -79,10 +79,10 @@ export default function LoginScreen(props) {
const result = await login(name, password); const result = await login(name, password);
if (!result.ok) return setLoginFailed(true); if (!result.ok) return setLoginFailed(true);
authStorage.setToken(result.data);
await authStorage.setToken(result.data);
setLoginFailed(false); setLoginFailed(false);
const user = await userPersonalData(result.data);
const user = await userPersonalData();
user.ok && authContext.setUser(user.data); user.ok && authContext.setUser(user.data);
}; };

38
src/app/screens/RegisterScreen.js

@ -51,6 +51,7 @@ const validationSchema = Yup.object().shape({
.required("A resposta da pergunta de segurança é obrigatória") .required("A resposta da pergunta de segurança é obrigatória")
.max(255), .max(255),
consent: Yup.bool().equals([true], "Este campo é obrigatório"), consent: Yup.bool().equals([true], "Este campo é obrigatório"),
role: Yup.string(),
}); });
function LocalDatePicker({ date, setDate, _moment }) { function LocalDatePicker({ date, setDate, _moment }) {
@ -218,6 +219,24 @@ function SecQuestionPicker({ name }) {
); );
} }
function RolePicker({ name }) {
const [items, setItems] = useState([
{ value: "ROLE_INSTITUTION", label: "Responsável" },
{ value: "ROLE_CLIENT", label: "Não responsável" },
]);
return (
<SearchablePicker
name={name}
items={items}
setItems={setItems}
formPlaceholder={"Selecione o vínculo institucional"}
searchPlaceholder={"Busca..."}
/>
);
}
function MaterialCommunityIconsCustom({ function MaterialCommunityIconsCustom({
name, name,
color = colors.primary, color = colors.primary,
@ -249,7 +268,7 @@ export default function RegisterScreen(props) {
if (!result.ok) return; if (!result.ok) return;
authStorage.setToken(result.data); authStorage.setToken(result.data);
const user = await userPersonalData(result.data);
const user = await userPersonalData();
user.ok && authContext.setUser(user.data); user.ok && authContext.setUser(user.data);
} }
@ -258,6 +277,8 @@ export default function RegisterScreen(props) {
const formDate = date.format("DD/MM/yyyy") === moment().format("DD/MM/yyyy") ? "" : date; const formDate = date.format("DD/MM/yyyy") === moment().format("DD/MM/yyyy") ? "" : date;
const result = await signup({...form, dateofborn: formDate}) const result = await signup({...form, dateofborn: formDate})
console.log(result)
switch (result.status) { switch (result.status) {
case 200: case 200:
automaticLogin(form) automaticLogin(form)
@ -285,13 +306,12 @@ export default function RegisterScreen(props) {
institution: "", institution: "",
secQuestion: "", secQuestion: "",
secQuestionAns: "", secQuestionAns: "",
role: "",
consent: false, consent: false,
}} }}
onSubmit={(form) => { onSubmit={(form) => {
comparePassword(form.password, form.confirmPassword); comparePassword(form.password, form.confirmPassword);
handleSubmit(form) handleSubmit(form)
// console.log("cadastro ainda não implementado");
// console.log("Forms values: \n" + JSON.stringify(form));
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
> >
@ -316,7 +336,7 @@ export default function RegisterScreen(props) {
<FormField <FormField
paddingRight={2} paddingRight={2}
flex={1} flex={1}
maxLength={12}
maxLength={40}
name="name" name="name"
numberOfLines={2} numberOfLines={2}
placeholder="Digite o apelido de usuário" placeholder="Digite o apelido de usuário"
@ -409,6 +429,16 @@ export default function RegisterScreen(props) {
paddingRight={2} paddingRight={2}
/> />
</View> </View>
<Text style={styles.labelStyle}>Vínculo institucional:</Text>
<View style={[styles.iconField]}>
<MaterialCommunityIconsCustom name="bank" />
<RolePicker name="role"/>
</View>
<Text style={styles.labelStyle}>Pergunta de segurança*:</Text> <Text style={styles.labelStyle}>Pergunta de segurança*:</Text>
<View <View
style={{ style={{

Loading…
Cancel
Save