mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2025-07-06 04:14:06 +08:00
Added functional registration
This commit is contained in:
parent
dfc20753b3
commit
26b3db25f0
23 changed files with 679 additions and 57 deletions
|
|
@ -1,20 +1,87 @@
|
|||
import * as React from "react";
|
||||
import styles from "../../styles";
|
||||
import { font_sizes } from "../../styles";
|
||||
import { View, Text } from "react-native";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
NativeSyntheticEvent,
|
||||
TextInputChangeEventData,
|
||||
} from "react-native";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { RootState } from "../../features/redux/Store/Store";
|
||||
import {
|
||||
setUser,
|
||||
clear,
|
||||
} from "../../features/redux/slices/AuthSlice/AuthSlice";
|
||||
import { colors } from "../../styles";
|
||||
import { useState } from "react";
|
||||
import LoginIcon from "../../icons/LoginIcon/LoginIcon";
|
||||
import Button from "../../components/Button/Button";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { RootDrawerParamList } from "../../interfaces/Interfaces";
|
||||
|
||||
export default function Login() {
|
||||
const navigation = useNavigation<RootDrawerParamList>();
|
||||
// const dispatch = useDispatch();
|
||||
// const creds = useSelector((state: RootState) => state.auth.creds);
|
||||
const [user, setUser] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
error: "",
|
||||
});
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: font_sizes.large,
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Template Login Page
|
||||
</Text>
|
||||
<View style={styles.container}>
|
||||
<View
|
||||
style={{
|
||||
paddingVertical: 4,
|
||||
marginBottom: 16,
|
||||
borderRadius: 4,
|
||||
width: "90%",
|
||||
backgroundColor: colors.blue_1,
|
||||
}}
|
||||
/>
|
||||
<View style={styles.flex_row}>
|
||||
<LoginIcon size={32} />
|
||||
<Text style={styles.text_white_large}>Student Login</Text>
|
||||
</View>
|
||||
|
||||
<View style={{ paddingVertical: 8 }} />
|
||||
<TextInput
|
||||
style={styles.text_input}
|
||||
placeholder="Email"
|
||||
placeholderTextColor="white"
|
||||
value={user.email}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, email: e.nativeEvent.text });
|
||||
}}
|
||||
/>
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<TextInput
|
||||
style={styles.text_input}
|
||||
placeholder="Password"
|
||||
placeholderTextColor="white"
|
||||
secureTextEntry={true}
|
||||
value={user.password}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, password: e.nativeEvent.text });
|
||||
}}
|
||||
/>
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<Button onPress={() => console.log("heh")} color={colors.blue_3}>
|
||||
<Text style={styles.text_white_small}>Login</Text>
|
||||
</Button>
|
||||
<Button
|
||||
onPress={() => navigation.navigate("Register")}
|
||||
color={colors.blue_3}
|
||||
>
|
||||
<Text style={styles.text_white_small}>Register</Text>
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,173 @@
|
|||
import * as React from "react";
|
||||
import styles from "../../styles";
|
||||
import { font_sizes } from "../../styles";
|
||||
import { View, Text } from "react-native";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
NativeSyntheticEvent,
|
||||
TextInputChangeEventData,
|
||||
} from "react-native";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { colors } from "../../styles";
|
||||
import { useState } from "react";
|
||||
import Button from "../../components/Button/Button";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { RootDrawerParamList } from "../../interfaces/Interfaces";
|
||||
import SignupIcon from "../../icons/SignupIcon/SignupIcon";
|
||||
import { UserRegister } from "../../components/Api/Api";
|
||||
import IsNumber from "../../components/IsNumber/IsNumber";
|
||||
import ParseError from "../../components/ParseError/ParseError";
|
||||
|
||||
export default function Register() {
|
||||
const navigation = useNavigation<RootDrawerParamList>();
|
||||
// const dispatch = useDispatch();
|
||||
// const creds = useSelector((state: RootState) => state.auth.creds);
|
||||
const [user, setUser] = useState({
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
student_id_number: "",
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
feedback: "",
|
||||
});
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: font_sizes.large,
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Template Register Page
|
||||
</Text>
|
||||
<View style={styles.container}>
|
||||
<View
|
||||
style={{
|
||||
paddingVertical: 4,
|
||||
marginBottom: 16,
|
||||
borderRadius: 4,
|
||||
width: "90%",
|
||||
backgroundColor: colors.blue_1,
|
||||
}}
|
||||
/>
|
||||
<View style={styles.flex_row}>
|
||||
<SignupIcon size={32} />
|
||||
<Text style={styles.text_white_large}>Student Signup</Text>
|
||||
<View style={{ paddingVertical: 8 }} />
|
||||
</View>
|
||||
<TextInput
|
||||
style={styles.text_input}
|
||||
placeholder="First Name"
|
||||
placeholderTextColor="white"
|
||||
value={user.first_name}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, first_name: e.nativeEvent.text });
|
||||
}}
|
||||
/>
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<TextInput
|
||||
style={styles.text_input}
|
||||
placeholder="Last Name"
|
||||
placeholderTextColor="white"
|
||||
value={user.last_name}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, last_name: e.nativeEvent.text });
|
||||
}}
|
||||
/>
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<TextInput
|
||||
style={styles.text_input}
|
||||
placeholder="USTP ID Number"
|
||||
placeholderTextColor="white"
|
||||
value={user.student_id_number}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
if (IsNumber(e.nativeEvent.text)) {
|
||||
setUser({ ...user, student_id_number: e.nativeEvent.text });
|
||||
} else if (!e.nativeEvent.text) {
|
||||
setUser({ ...user, student_id_number: "" });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<TextInput
|
||||
style={styles.text_input}
|
||||
placeholder="Username"
|
||||
placeholderTextColor="white"
|
||||
autoCapitalize={"none"}
|
||||
value={user.username}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, username: e.nativeEvent.text });
|
||||
}}
|
||||
/>
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<TextInput
|
||||
style={styles.text_input}
|
||||
placeholder="Email"
|
||||
placeholderTextColor="white"
|
||||
autoCapitalize={"none"}
|
||||
value={user.email}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, email: e.nativeEvent.text });
|
||||
}}
|
||||
/>
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<TextInput
|
||||
style={styles.text_input}
|
||||
placeholder="Password"
|
||||
placeholderTextColor="white"
|
||||
secureTextEntry={true}
|
||||
value={user.password}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, password: e.nativeEvent.text });
|
||||
}}
|
||||
/>
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<Text style={styles.text_white_small}>{user.feedback}</Text>
|
||||
<View style={{ paddingVertical: 4 }} />
|
||||
<Button
|
||||
onPress={async () => {
|
||||
await UserRegister({
|
||||
username: user.username,
|
||||
email: user.email,
|
||||
password: user.password,
|
||||
student_id_number: user.student_id_number,
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
}).then((result) => {
|
||||
console.log(result);
|
||||
try {
|
||||
setUser({
|
||||
...user,
|
||||
feedback: ParseError(JSON.stringify(result[1])),
|
||||
});
|
||||
} catch {
|
||||
setUser({
|
||||
...user,
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
student_id_number: "",
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
feedback:
|
||||
"Success! An email has been sent to activate your account",
|
||||
});
|
||||
}
|
||||
});
|
||||
{
|
||||
}
|
||||
}}
|
||||
color={colors.blue_3}
|
||||
>
|
||||
<Text style={styles.text_white_small}>Register</Text>
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue