Commit 3df878cf authored by Thomas's avatar Thomas
Browse files

form

parent 979020d6
......@@ -83,6 +83,7 @@ const style = StyleSheet.create ({
shadowOpacity: 0.58 ,
shadowRadius: 16,
elevation: 24,
marginTop: 3
},
transparancyText: {
textAlign: 'center',
......
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
//view for the requestform
export default function RequestForm() {
const [Name, onChangeName] = React.useState("")
const [Mail, onChangeMail] = React.useState("")
const [Motivation, onChangeMotivation] = React.useState("")
const checkTextInput = () => {
//Check for the Name TextInput
if (Name == "") {
alert('Please enter a company name');
return;
}
//Check for the Email TextInput
let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
if (reg.test(Mail) === false ) {
alert('Please enter a correct e-mail adress');
return;
}
if (Motivation == "") {
alert('Please enter your motivation');
return;
}
//Checked Successfully
alert(Mail + " filled in " + Name + " because " + Motivation);
onChangeName('');
onChangeMail('');
onChangeMotivation('')
};
var ButtonColor;
if (Name == '') {
ButtonColor = '#E5E5E5';
var buttonDisabled = true
} else if (Mail == '') {
ButtonColor = '#E5E5E5';
var buttonDisabled = true
} else if (Motivation == '') {
ButtonColor = '#E5E5E5';
var buttonDisabled = true
} else {
ButtonColor = '#A5D6AA'
var buttonDisabled = false
}
return (
<View style={style.container}>
<Text>Brand Request Form!</Text>
</View>
<SafeAreaView style={style.container}>
<View style={style.FormHeader}>
<Text style={style.HeaderText}>Brand Request Form</Text>
<TouchableOpacity style={style.Icons} onPress={() => alert("You clicked on help")}>
<MaterialCommunityIcons name="help-circle-outline" size={30}/>
</TouchableOpacity>
</View>
<View style={style.Form}>
<View style={style.InputComponent}>
<Text style={style.InputText}>Company Name *</Text>
<TextInput
style={style.input}
onChangeText={onChangeName}
value={Name}
placeholder="ex. TraCloSo"
/>
</View>
<View style={style.InputComponent}>
<View>
<Text style={style.InputText}>Your email (on which we can contact you) *</Text>
</View>
<TextInput
style={style.input}
onChangeText={onChangeMail}
value={Mail}
placeholder="example@domain.com"
autoCompleteType='email'
textContentType='emailAddress'
/>
</View>
<View style={style.InputComponent}>
<Text style={style.InputText}>Why do you want this brand to be researched? *</Text>
<TextInput
style={[style.input, {borderWidth: 1, textAlignVertical: 'top', paddingTop: 5, height: 150}]}
onChangeText={onChangeMotivation}
value={Motivation}
placeholder="Your explanation..."
multiline= {true}
/>
</View>
<View style={{alignItems: 'center',}}>
<TouchableOpacity onPress={checkTextInput} style={[style.SubmitButton, {backgroundColor: ButtonColor}]} disabled={buttonDisabled}>
<Text style={style.ButtonText}>Send</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
}
const style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff'
},
FormHeader: {
backgroundColor: '#A5D6AA',
height: 65,
flexDirection: 'row',
justifyContent: 'space-between',
},
HeaderText: {
fontSize: 24,
paddingLeft: '2%',
...Platform.select({
ios: {
marginTop: 25,
},
android: {
marginTop: 20,
}
})
},
Icons: {
marginTop: 25,
marginRight: '3%'
},
Form: {
justifyContent: 'center',
},
input: {
borderBottomWidth: 1,
borderColor: '#C6C6C9',
width: '90%',
marginLeft: '5%',
paddingLeft: 3,
height: 35
},
InputComponent: {
marginTop: 25,
},
InputText: {
marginLeft: 10,
fontSize: 14,
},
SubmitButton: {
marginTop: 30,
borderRadius: 13,
height: 55,
width: '80%',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
alignItems: 'center',
justifyContent: 'center',
},
ButtonText: {
textAlign: 'center',
fontSize: 18
}
})
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment