diff options
Diffstat (limited to 'App.tsx')
| -rw-r--r-- | App.tsx | 240 |
1 files changed, 0 insertions, 240 deletions
diff --git a/App.tsx b/App.tsx deleted file mode 100644 index a5fd3040..00000000 --- a/App.tsx +++ /dev/null @@ -1,240 +0,0 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * Generated with the TypeScript template - * https://github.com/react-native-community/react-native-template-typescript - * - * @format - */ - -import React, { useRef } from 'react'; -import { - SafeAreaView, - StyleSheet, - ScrollView, - View, - Text, - StatusBar, - Image, - TextInput, - Button, - Alert, - TouchableOpacity, -} from 'react-native'; - -import { - Header, - LearnMoreLinks, - Colors, - DebugInstructions, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; - -import LinearGradient from 'react-native-linear-gradient'; - -declare const global: {HermesInternal: null | {}}; - -const App = () => { - - const passwordInput = useRef(); - const [data, setData] = React.useState({ - username: '', - password: '', - isValidUser: true, - isValidPassword: true, - }) - - /* - Updates the state of username. Also verifies the input of the Username field. - */ - const handleUsernameUpdate = (val:string) => { - var validLength:boolean = val.trim().length >= 6 - - if (validLength) { - setData({ - ...data, - username: val, - isValidUser: true - }) - } - else { - setData({ - ...data, - username: val, - isValidUser: false - }) - } - } - - /* - Updates the state of password. Also verifies the input of the Password field. - */ - const handlePasswordUpdate = (val:string) => { - var validLength:boolean = val.trim().length >= 8 - - if (validLength) { - setData({ - ...data, - password: val, - isValidPassword: true - }) - } - else { - setData({ - ...data, - password: val, - isValidPassword: false - }) - } - } - - /* - Handler for the Let's Start button or the Go button on the keyboard. - */ - const handleLogin = () => { - if (data.isValidUser && data.isValidPassword) { - Alert.alert(`My favorite Girl Scout Cookies are taggalongs! What are yours ${data.username}?`) - } - } - - return ( - <> - <StatusBar - barStyle='light-content' - /> - <View style={styles.container}> - <LinearGradient - colors={['#8F00FF', '#6EE7E7']} - style={styles.linearGradient} - useAngle={true} - angle={154.72} - angleCenter={{x:0.5,y:0.5}}> - <Image - source={require('./src/assets/sign_in_logo.png')} - style={styles.logo} - /> - <TextInput - accessibilityLabel="Username text entry box" - accessibilityHint="Enter your tagg username here" - style={styles.credentials} - placeholder="Username" - placeholderTextColor='#FFFFFF' - autoCompleteType='username' - textContentType='username' - returnKeyType='next' - keyboardType='ascii-capable' - onChangeText={user => handleUsernameUpdate(user)} - defaultValue={data.username} - onSubmitEditing={() => {passwordInput.current.focus()}} - blurOnSubmit={false} - /> - { data.isValidUser ? null : - <Text style={styles.invalidCredentials}>Username must be at least 6 characters long.</Text> - } - <TextInput - accessibilityLabel="Password text entry box" - accessibilityHint="Enter your tagg password here" - style={styles.credentials} - placeholder="Password" - placeholderTextColor='#FFFFFF' - autoCompleteType='password' - textContentType='password' - returnKeyType='go' - onChangeText={pass => handlePasswordUpdate(pass)} - defaultValue={data.password} - onSubmitEditing={() => handleLogin()} - ref={passwordInput} - secureTextEntry={true} - /> - { data.isValidPassword ? null : - <Text style={styles.invalidCredentials}>Password must be at least 8 characters long.</Text> - } - <TouchableOpacity - accessibilityLabel="Forgot password button" - accessibilityHint="Select this if you forgot your tagg password" - style={styles.forgotPassword} - onPress={() => Alert.alert("tagg! You're it!")}> - <Text style={styles.forgotPasswordText}>Forgot password</Text> - </TouchableOpacity> - <TouchableOpacity - accessibilityLabel="Let's start button" - accessibilityHint="Select this after entering your tagg username and password" - style={styles.start} - onPress={() => handleLogin()}> - <Text style={styles.startText}>Let's Start!</Text> - </TouchableOpacity> - <Text accessible={true} accessibilityLabel="New to tagg?" style={styles.newUser}> - New to tagg? <Text accessible={true} accessibilityLabel="Get started" accessibilityHint="Select this if you do not have a tagg account" style={styles.getStarted} onPress={() => Alert.alert("I get the tagg flip it and tumble it.")}>Get started!</Text> - </Text> - </LinearGradient> - </View> - </> - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: 'transparent', - }, - linearGradient: { - flex: 1, - alignItems: 'center', - }, - logo: { - top: 165, - width: 215, - height: 149, - }, - credentials: { - top: 190, - width: 248, - height: 40, - fontSize: 20, - color: '#FFFFFF', - borderColor: '#FFFDFD', - borderWidth: 2, - borderRadius: 20, - paddingLeft: 13, - marginVertical: 15, - }, - forgotPassword: { - top: 190, - left: -60, - }, - forgotPasswordText: { - fontSize: 15, - color: '#FFFFFF', - textDecorationLine: 'underline', - }, - start: { - top: 195, - width: 144, - height: 36, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#FFFFFF', - borderRadius: 20, - marginTop: 15 - }, - startText: { - fontSize: 15, - color: '#78A0EF', - fontWeight: 'bold', - }, - getStarted: { - color: '#FFFFFF', - textDecorationLine: 'underline' - }, - newUser: { - top: 240, - color: '#F4DDFF', - }, - invalidCredentials: { - top: 180, - color: '#F4DDFF' - } -}); - -export default App; |