Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 23:19:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix login page

Browse Source
This commit is contained in:
ammarahm-ed
2020-09-19 16:02:21 +05:00
parent c3a5f173db
commit 678227c640
1 changed files with 125 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
apps/mobile/src/components/LoginDialog/index.js
View File

@@ -1,29 +1,29 @@
import CheckBox from '@react-native-community/checkbox'; import CheckBox from '@react-native-community/checkbox';
import React, { createRef, useEffect, useState } from 'react'; import React, {createRef, useEffect, useState} from 'react';
import { Clipboard, Modal, Text, TouchableOpacity, View } from 'react-native'; import {Clipboard, Modal, Text, TouchableOpacity, View} from 'react-native';
import { TextInput } from 'react-native-gesture-handler'; import {TextInput} from 'react-native-gesture-handler';
import QRCode from 'react-native-qrcode-generator'; import QRCode from 'react-native-qrcode-generator';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { opacity, ph, pv, SIZE, WEIGHT } from '../../common/common'; import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
import { Button } from '../../components/Button'; import {Button} from '../../components/Button';
import Seperator from '../../components/Seperator'; import Seperator from '../../components/Seperator';
import { Toast } from '../../components/Toast'; import {Toast} from '../../components/Toast';
import { ACTIONS } from '../../provider/actions'; import {ACTIONS} from '../../provider/actions';
import { useTracked } from '../../provider/index'; import {useTracked} from '../../provider/index';
import { import {
eSendEvent, eSendEvent,
eSubscribeEvent, eSubscribeEvent,
eUnSubscribeEvent eUnSubscribeEvent,
} from '../../services/eventManager'; } from '../../services/eventManager';
import { eCloseLoginDialog, eOpenLoginDialog } from '../../services/events'; import {eCloseLoginDialog, eOpenLoginDialog, eStartSyncer, refreshNotesPage} from '../../services/events';
import { import {
validateEmail, validateEmail,
validatePass, validatePass,
validateUsername validateUsername,
} from '../../services/validation'; } from '../../services/validation';
import { db, DDS, getElevation, ToastEvent } from '../../utils/utils'; import {db, DDS, getElevation, ToastEvent} from '../../utils/utils';
import { Loading } from '../Loading'; import {Loading} from '../Loading';
const LoginDialog = () => { const LoginDialog = () => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
@@ -394,48 +394,132 @@ const LoginDialog = () => {
</Text> </Text>
</View> </View>
<>
<TextInput
ref={_username}
onFocus={() => {
if (!invalidUsername) {
_username.current.setNativeProps({
style: {
borderColor: colors.accent,
},
});
}
}}
defaultValue={username}
onBlur={() => {
if (!validateUsername(username) && username?.length > 0) {
setInvalidUsername(true);
_username.current.setNativeProps({
style: {
color: colors.errorText,
borderColor: colors.errorText,
},
});
} else {
setInvalidUsername(false);
_username.current.setNativeProps({
style: {
borderColor: colors.nav,
},
});
}
}}
textContentType="username"
onChangeText={(value) => {
setUsername(value);
if (invalidUsername && validateUsername(username)) {
setInvalidUsername(false);
_username.current.setNativeProps({
style: {
color: colors.pri,
borderColor: colors.accent,
},
});
}
}}
onSubmitEditing={() => {
if (!validateUsername(username)) {
setInvalidUsername(true);
_username.current.setNativeProps({
style: {
color: colors.errorText,
},
});
}
}}
style={{
paddingHorizontal: pv,
height: 50,
borderWidth: 1.5,
borderColor: colors.nav,
borderRadius: 5,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}
placeholder="Username (a-z _- 0-9)"
placeholderTextColor={colors.icon}
/>
{invalidUsername ? (
<Text
style={{
textAlign: 'right',
fontFamily: WEIGHT.regular,
textAlignVertical: 'bottom',
fontSize: SIZE.xs,
marginTop: 2.5,
}}>
<Icon
name="alert-circle-outline"
size={SIZE.xs}
color={colors.errorText}
/>{' '}
Username is invalid
</Text>
) : null}
</>
<Seperator />
{login ? null : ( {login ? null : (
<> <>
<TextInput <TextInput
ref={_username} ref={_email}
onFocus={() => { onFocus={() => {
if (!invalidUsername) { if (!invalidEmail) {
_username.current.setNativeProps({ _email.current.setNativeProps({
style: { style: {
borderColor: colors.accent, borderColor: colors.accent,
}, },
}); });
} }
}} }}
defaultValue={username} defaultValue={email}
onBlur={() => { onBlur={() => {
if ( if (!validateEmail(email) && email?.length > 0) {
!validateUsername(username) && setInvalidEmail(true);
username?.length > 0 _email.current.setNativeProps({
) {
setInvalidUsername(true);
_username.current.setNativeProps({
style: { style: {
color: colors.errorText, color: colors.errorText,
borderColor: colors.errorText, borderColor: colors.errorText,
}, },
}); });
} else { } else {
setInvalidUsername(false); setInvalidEmail(false);
_username.current.setNativeProps({ _email.current.setNativeProps({
style: { style: {
borderColor: colors.nav, borderColor: colors.nav,
}, },
}); });
} }
}} }}
textContentType="username" textContentType="emailAddress"
onChangeText={(value) => { onChangeText={(value) => {
setUsername(value); setEmail(value);
if (invalidEmail && validateEmail(email)) {
if (invalidUsername && validateUsername(username)) { setInvalidEmail(false);
setInvalidUsername(false); _email.current.setNativeProps({
_username.current.setNativeProps({
style: { style: {
color: colors.pri, color: colors.pri,
borderColor: colors.accent, borderColor: colors.accent,
@@ -444,9 +528,9 @@ const LoginDialog = () => {
} }
}} }}
onSubmitEditing={() => { onSubmitEditing={() => {
if (!validateUsername(username)) { if (!validateEmail(email)) {
setInvalidUsername(true); setInvalidEmail(true);
_username.current.setNativeProps({ _email.current.setNativeProps({
style: { style: {
color: colors.errorText, color: colors.errorText,
}, },
@@ -462,10 +546,11 @@ const LoginDialog = () => {
fontSize: SIZE.sm, fontSize: SIZE.sm,
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
}} }}
placeholder="Username (a-z _- 0-9)" placeholder="Email"
placeholderTextColor={colors.icon} placeholderTextColor={colors.icon}
/> />
{invalidUsername ? (
{invalidEmail ? (
<Text <Text
style={{ style={{
textAlign: 'right', textAlign: 'right',
@@ -479,99 +564,14 @@ const LoginDialog = () => {
size={SIZE.xs} size={SIZE.xs}
color={colors.errorText} color={colors.errorText}
/>{' '} />{' '}
Username is invalid Email is invalid
</Text> </Text>
) : null} ) : null}
<Seperator />
</> </>
)} )}
<Seperator />
<TextInput
ref={_email}
onFocus={() => {
if (!invalidEmail) {
_email.current.setNativeProps({
style: {
borderColor: colors.accent,
},
});
}
}}
defaultValue={email}
onBlur={() => {
if (!validateEmail(email) && email?.length > 0) {
setInvalidEmail(true);
_email.current.setNativeProps({
style: {
color: colors.errorText,
borderColor: colors.errorText,
},
});
} else {
setInvalidEmail(false);
_email.current.setNativeProps({
style: {
borderColor: colors.nav,
},
});
}
}}
textContentType="emailAddress"
onChangeText={(value) => {
setEmail(value);
if (invalidEmail && validateEmail(email)) {
setInvalidEmail(false);
_email.current.setNativeProps({
style: {
color: colors.pri,
borderColor: colors.accent,
},
});
}
}}
onSubmitEditing={() => {
if (!validateEmail(email)) {
setInvalidEmail(true);
_email.current.setNativeProps({
style: {
color: colors.errorText,
},
});
}
}}
style={{
paddingHorizontal: pv,
height: 50,
borderWidth: 1.5,
borderColor: colors.nav,
borderRadius: 5,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}
placeholder="Email"
placeholderTextColor={colors.icon}
/>
{invalidEmail ? (
<Text
style={{
textAlign: 'right',
fontFamily: WEIGHT.regular,
textAlignVertical: 'bottom',
fontSize: SIZE.xs,
marginTop: 2.5,
}}>
<Icon
name="alert-circle-outline"
size={SIZE.xs}
color={colors.errorText}
/>{' '}
Password is invalid
</Text>
) : null}
<Seperator />
<View <View
ref={_passContainer} ref={_passContainer}