Feature/authentication #3
Conversation
…om react navigation 4 to 5
…ixed eslint errors
src/views/authentication/Login.js
Outdated
| <Form | ||
| title={formProps.title} | ||
| fields={formProps.fields} | ||
| onSubmit={formProps.onSubmit} | ||
| loading={formProps.loading} | ||
| > |
There was a problem hiding this comment.
Przy wpisywaniu loginu znika pole z hasłem i dość dziwnie to wygląda (analogiczna sytuacja z wpisywaniem hasła, znika button "Login")
Screen z symulatora:
There was a problem hiding this comment.
U mnie się tak nie dzieje ale mam pewne podejrzenie. Jesteś w stanie sprawdzić czy wysuwająca się klawiatura nie ma nad sobą pewnego białego obszaru ? Jeśli tak to pewnie on zasłania to co jest pod
There was a problem hiding this comment.
Sprawdziłam, rzeczywiście jest to biały obszar nad wysuwającą się klawiaturą. Gorzej że na Androidzie na moim telefonie występuje ten sam problem
| const [error, setError] = useState(null); | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
| const fields = [{ name: "email", label: "Email Address", required: true }]; |
There was a problem hiding this comment.
przydałaby się walidacja wpisanej wartości do pola email. Formik ma łatwą obsługę walidacji jbc
src/modules/navigation/auth.js
Outdated
| const AuthStack = createStackNavigator(); | ||
|
|
||
| const AuthStackScreen = () => ( | ||
| <AuthStack.Navigator> |
There was a problem hiding this comment.
Tutaj potrzeba zmiany flow, bo nie może być tak, że cofamy się do widoku AuthLoading z jakiegoś innego ekranu. Nie wiem jak to zrobić teraz, bo api się react navigation bardzo się zmieniło. Jeśli nie widziałeś jeszcze to może przejrzyj dokumentację od nich link.
Coś co mi przyszło do głowy to schowanie headera, ale i tak nie pomaga, bo dalej możemy cofać przyciskiem/gestami. Zamieszczam jako ciekawostkę.
<AppStack.Navigator
screenOptions={{
headerShown: false,
}}
>
<AppStack.Screen name="Loading" component={AuthLoading} />
<AppStack.Screen name="Home" component={HomeScreen} />
<AppStack.Screen name="Auth" component={AuthStack} />
</AppStack.Navigator> <AuthStack.Navigator>
<AuthStack.Screen
options={{ headerShown: false }}
name="Login"
component={LoginScreen}
/>
<AuthStack.Screen name="Register" component={RegisterScreen} />
<AuthStack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
</AuthStack.Navigator>There was a problem hiding this comment.
Tego byłem świadom właśnie, próbowałem coś dziobać zgodnie z tym linkiem wcześniej ale nie poszło. Jeszcze do tego wrócę
|
Nie zmieniłem jeszcze flow oraz nie ogarnąłem tej walidacji emailem. Prawdopodobnie zrobię to dopiero po powrocie :) |
…th styles. TODO same for Login.js and ForgotPassword.js
…ssword view, added ActivitiIndicator to buttons, hard coded fix for Login button touch range
pectom
force-pushed
the
feature/authentication
branch
from
04d223e to
8fa265c
Compare
There was a problem hiding this comment.
Super, że to flow już działa, ale pasuje zrobić kilka poprawek przed domergowaniem do mastera. Zerknij na te komentarze i daj znać na kiedy byś mógł to zrobić. Szczególnie zwróć uwagę na te nieużywane rzeczy, bo pewnie nie wychwyciłem wszystkiego. Raczej są to małe poprawki. Z większych rzeczy, których nie ująłem zrobiłem taski na trello i to już wrzucimy w kolejnym PR'ach.
- podpięcie bazy danych do procesu uwierzytelniania
- poprawa stylu ekranów uwierzytelniania (falka na dole)
src/views/authentication/Login.js
Outdated
|
|
||
| // check if username is null | ||
| const username = response.user.username !== null; | ||
| if (username); |
There was a problem hiding this comment.
Brakuje jakiejś akcji jeśli warunek jest prawdziwy
src/views/authentication/Login.js
Outdated
| if (username); | ||
| else navigation.replace("Username"); | ||
| } catch (err) { | ||
| Alert.alert("Login Unsuccessful", err.message); |
src/components/authentication/CTA.js
Outdated
| onPress: PropTypes.func, | ||
| style: ViewPropTypes.style, | ||
| titleStyle: ViewPropTypes.style, | ||
| ctaStyle: ViewPropTypes.style.Text, |
There was a problem hiding this comment.
Coś jest nie tak z tym typem. Dostaję tutaj warning
src/views/authentication/Register.js
Outdated
| const { navigation } = props; | ||
|
|
||
| // 1 - DECLARE VARIABLES | ||
| const [setError] = useState(null); |
There was a problem hiding this comment.
Wywala błąd setError is not a function. W tablicy musi być podana wartość i funkcja, która ma ją zmieniać.
| const { navigation } = props; | ||
|
|
||
| // 1 - DECLARE VARIABLES | ||
| const [setError] = useState(null); |
There was a problem hiding this comment.
Błędne użycie useState, podobnie jak w rejestracji.
…onents from Shared.js
Basic working authentication, to be reviewed and merged. Works on a demo API which provides user registration, authorization and email recovery.