forked from fr/deguapp
Added biome for formatting, code formatted
This commit is contained in:
@@ -4,19 +4,19 @@ import { useAuth } from "../context/AuthContext";
|
||||
import { View, Text } from "react-native";
|
||||
|
||||
export default function AppLayout() {
|
||||
const { authState } = useAuth();
|
||||
const { authState } = useAuth();
|
||||
|
||||
if (authState.authenticated === null) {
|
||||
// micro loading co neni skoro videt ale get the fuck out se uz neloguje
|
||||
return (
|
||||
<View>
|
||||
<Text>Loading...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
if (!authState.authenticated) {
|
||||
console.log("get the fuck out");
|
||||
return <Redirect href="/login" />;
|
||||
}
|
||||
return <Stack />;
|
||||
if (authState.authenticated === null) {
|
||||
// micro loading co neni skoro videt ale get the fuck out se uz neloguje
|
||||
return (
|
||||
<View>
|
||||
<Text>Loading...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
if (!authState.authenticated) {
|
||||
console.log("get the fuck out");
|
||||
return <Redirect href="/login" />;
|
||||
}
|
||||
return <Stack />;
|
||||
}
|
||||
|
||||
@@ -3,21 +3,21 @@ import { Text, View } from "react-native";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export default function Index() {
|
||||
const { onLogout, authState } = useAuth();
|
||||
const { onLogout, authState } = useAuth();
|
||||
|
||||
const user = authState.user;
|
||||
const user = authState.user;
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
|
||||
<Text>Welcome {user.username}</Text>
|
||||
<Text
|
||||
onPress={() => {
|
||||
// The `app/(app)/_layout.tsx` will redirect to the sign-in screen.
|
||||
onLogout();
|
||||
}}
|
||||
>
|
||||
Sign Out
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
|
||||
<Text>Welcome {user.username}</Text>
|
||||
<Text
|
||||
onPress={() => {
|
||||
// The `app/(app)/_layout.tsx` will redirect to the sign-in screen.
|
||||
onLogout();
|
||||
}}
|
||||
>
|
||||
Sign Out
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,10 +3,10 @@ import { StatusBar } from "expo-status-bar";
|
||||
import { AuthProvider } from "./context/AuthContext";
|
||||
|
||||
export default function Root() {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<StatusBar style="light" />
|
||||
<Slot />
|
||||
</AuthProvider>
|
||||
);
|
||||
return (
|
||||
<AuthProvider>
|
||||
<StatusBar style="light" />
|
||||
<Slot />
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,134 +6,134 @@ export const API_URL = "http://10.69.1.137:6060/api/v1";
|
||||
const AuthContext = createContext(null);
|
||||
|
||||
export function useAuth() {
|
||||
const authContext = useContext(AuthContext);
|
||||
if (authContext === undefined) {
|
||||
throw new Error("Context is outside of provider");
|
||||
}
|
||||
return authContext;
|
||||
const authContext = useContext(AuthContext);
|
||||
if (authContext === undefined) {
|
||||
throw new Error("Context is outside of provider");
|
||||
}
|
||||
return authContext;
|
||||
}
|
||||
|
||||
export function AuthProvider({ children }) {
|
||||
const [authState, setAuthState] = useState({
|
||||
token: null,
|
||||
authenticated: null,
|
||||
});
|
||||
const [authState, setAuthState] = useState({
|
||||
token: null,
|
||||
authenticated: null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// tohle se zavola jen poprve pri startu appky
|
||||
async function loadToken() {
|
||||
const token = await storageUtil.getItem(TOKEN_KEY);
|
||||
console.log(`stored: ${token}`);
|
||||
useEffect(() => {
|
||||
// tohle se zavola jen poprve pri startu appky
|
||||
async function loadToken() {
|
||||
const token = await storageUtil.getItem(TOKEN_KEY);
|
||||
console.log(`stored: ${token}`);
|
||||
|
||||
const resUser = await fetch(`${API_URL}/auth/status`, {
|
||||
credentials: "include",
|
||||
});
|
||||
const resUser = await fetch(`${API_URL}/auth/status`, {
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
const userData = await resUser.json();
|
||||
const userData = await resUser.json();
|
||||
|
||||
if (token && resUser.status == 200) {
|
||||
setAuthState({
|
||||
token: token,
|
||||
authenticated: true,
|
||||
user: userData.data,
|
||||
});
|
||||
if (token && resUser.status == 200) {
|
||||
setAuthState({
|
||||
token: token,
|
||||
authenticated: true,
|
||||
user: userData.data,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
setAuthState({
|
||||
authenticated: false,
|
||||
token: null,
|
||||
user: null,
|
||||
});
|
||||
}
|
||||
loadToken();
|
||||
}, []);
|
||||
return;
|
||||
}
|
||||
setAuthState({
|
||||
authenticated: false,
|
||||
token: null,
|
||||
user: null,
|
||||
});
|
||||
}
|
||||
loadToken();
|
||||
}, []);
|
||||
|
||||
async function register(username, email, password) {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/auth/signup`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username,
|
||||
email,
|
||||
password
|
||||
})
|
||||
})
|
||||
return res;
|
||||
} catch (err) {
|
||||
return { error: true, msg: err.response.data };
|
||||
}
|
||||
}
|
||||
async function register(username, email, password) {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/auth/signup`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username,
|
||||
email,
|
||||
password,
|
||||
}),
|
||||
});
|
||||
return res;
|
||||
} catch (err) {
|
||||
return { error: true, msg: err.response.data };
|
||||
}
|
||||
}
|
||||
|
||||
async function login(email, password) {
|
||||
try {
|
||||
const resLogin = await fetch(`${API_URL}/auth/signin`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
password,
|
||||
}),
|
||||
});
|
||||
async function login(email, password) {
|
||||
try {
|
||||
const resLogin = await fetch(`${API_URL}/auth/signin`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
password,
|
||||
}),
|
||||
});
|
||||
|
||||
const loginData = await resLogin.json();
|
||||
const loginData = await resLogin.json();
|
||||
|
||||
const resUser = await fetch(`${API_URL}/auth/status`, {
|
||||
credentials: "include",
|
||||
});
|
||||
const resUser = await fetch(`${API_URL}/auth/status`, {
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (resUser.status != 200) {
|
||||
throw Error("user does not have user data");
|
||||
}
|
||||
if (resUser.status != 200) {
|
||||
throw Error("user does not have user data");
|
||||
}
|
||||
|
||||
const userData = await resUser.json();
|
||||
const userData = await resUser.json();
|
||||
|
||||
setAuthState({
|
||||
token: loginData.data.jwt,
|
||||
authenticated: true,
|
||||
user: userData.data,
|
||||
});
|
||||
setAuthState({
|
||||
token: loginData.data.jwt,
|
||||
authenticated: true,
|
||||
user: userData.data,
|
||||
});
|
||||
|
||||
await storageUtil.setItem(TOKEN_KEY, loginData.data.jwt);
|
||||
} catch (err) {
|
||||
console.error("Failed to log in", err)
|
||||
return { error: true, msg: err.res };
|
||||
}
|
||||
}
|
||||
await storageUtil.setItem(TOKEN_KEY, loginData.data.jwt);
|
||||
} catch (err) {
|
||||
console.error("Failed to log in", err);
|
||||
return { error: true, msg: err.res };
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
let res = await fetch(`${API_URL}/auth/logout`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
res = await res.json();
|
||||
async function logout() {
|
||||
let res = await fetch(`${API_URL}/auth/logout`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
res = await res.json();
|
||||
|
||||
await storageUtil.delItem(TOKEN_KEY);
|
||||
await storageUtil.delItem(TOKEN_KEY);
|
||||
|
||||
setAuthState({
|
||||
token: null,
|
||||
authenticated: false,
|
||||
user: null,
|
||||
});
|
||||
}
|
||||
setAuthState({
|
||||
token: null,
|
||||
authenticated: false,
|
||||
user: null,
|
||||
});
|
||||
}
|
||||
|
||||
const value = {
|
||||
onSignin: register,
|
||||
onLogin: login,
|
||||
onLogout: logout,
|
||||
authState,
|
||||
};
|
||||
const value = {
|
||||
onSignin: register,
|
||||
onLogin: login,
|
||||
onLogout: logout,
|
||||
authState,
|
||||
};
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
}
|
||||
|
||||
@@ -3,32 +3,32 @@ import { Platform } from "react-native";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
|
||||
const storageUtil = {
|
||||
setItem: async (k, v) => {
|
||||
if (Platform.OS === "web") {
|
||||
// web
|
||||
await AsyncStorage.setItem(k, v);
|
||||
} else {
|
||||
// mobile
|
||||
await SecureStore.setItemAsync(k, v.toString()); // v must be string,
|
||||
}
|
||||
},
|
||||
getItem: async (k) => {
|
||||
if (Platform.OS === "web") {
|
||||
// web
|
||||
return await AsyncStorage.getItem(k);
|
||||
} else {
|
||||
// mobile
|
||||
return await SecureStore.getItemAsync(k);
|
||||
}
|
||||
},
|
||||
delItem: async (k) => {
|
||||
if (Platform.OS === "web") {
|
||||
// web
|
||||
await AsyncStorage.removeItem(k);
|
||||
} else {
|
||||
// mobile
|
||||
await SecureStore.deleteItemAsync(k);
|
||||
}
|
||||
},
|
||||
setItem: async (k, v) => {
|
||||
if (Platform.OS === "web") {
|
||||
// web
|
||||
await AsyncStorage.setItem(k, v);
|
||||
} else {
|
||||
// mobile
|
||||
await SecureStore.setItemAsync(k, v.toString()); // v must be string,
|
||||
}
|
||||
},
|
||||
getItem: async (k) => {
|
||||
if (Platform.OS === "web") {
|
||||
// web
|
||||
return await AsyncStorage.getItem(k);
|
||||
} else {
|
||||
// mobile
|
||||
return await SecureStore.getItemAsync(k);
|
||||
}
|
||||
},
|
||||
delItem: async (k) => {
|
||||
if (Platform.OS === "web") {
|
||||
// web
|
||||
await AsyncStorage.removeItem(k);
|
||||
} else {
|
||||
// mobile
|
||||
await SecureStore.deleteItemAsync(k);
|
||||
}
|
||||
},
|
||||
};
|
||||
export default storageUtil;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export function useIsAutheticated() {
|
||||
const { authState } = useAuth();
|
||||
return authState.authenticated
|
||||
const { authState } = useAuth();
|
||||
return authState.authenticated;
|
||||
}
|
||||
|
||||
@@ -7,111 +7,111 @@ import { colors } from "../components/style";
|
||||
import { useAuth } from "./context/AuthContext";
|
||||
|
||||
function LoginPage() {
|
||||
const [pass, setPass] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const { onLogin, authState } = useAuth();
|
||||
const [pass, setPass] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const { onLogin, authState } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
if (authState.authenticated) {
|
||||
router.replace("/");
|
||||
}
|
||||
}, [authState.authenticated]);
|
||||
useEffect(() => {
|
||||
if (authState.authenticated) {
|
||||
router.replace("/");
|
||||
}
|
||||
}, [authState.authenticated]);
|
||||
|
||||
function login() {
|
||||
onLogin(email, pass);
|
||||
}
|
||||
function login() {
|
||||
onLogin(email, pass);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Image
|
||||
source={require("../assets/deguapp_logo.png")}
|
||||
style={styles.logo}
|
||||
/>
|
||||
<Text style={styles.h1}>Please Log In</Text>
|
||||
</View>
|
||||
<View style={styles.form}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your email"
|
||||
autoCapitalize="none"
|
||||
autoCompleteType="email"
|
||||
textContentType="emailAddress"
|
||||
keyboardType="email-address"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="next"
|
||||
value={email}
|
||||
onChangeText={(text) => setEmail(text)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
secureTextEntry={true}
|
||||
placeholder="Enter your password"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="done"
|
||||
value={pass}
|
||||
onChangeText={(text) => setPass(text)}
|
||||
/>
|
||||
<View style={styles.btnContainer}>
|
||||
<Button
|
||||
style={styles.button}
|
||||
title="Sign Up"
|
||||
color={colors.charcoal}
|
||||
onPress={() => router.replace("/signup")}
|
||||
/>
|
||||
<Button
|
||||
style={styles.button}
|
||||
title="Log In"
|
||||
color={colors.gold}
|
||||
onPress={login}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Image
|
||||
source={require("../assets/deguapp_logo.png")}
|
||||
style={styles.logo}
|
||||
/>
|
||||
<Text style={styles.h1}>Please Log In</Text>
|
||||
</View>
|
||||
<View style={styles.form}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your email"
|
||||
autoCapitalize="none"
|
||||
autoCompleteType="email"
|
||||
textContentType="emailAddress"
|
||||
keyboardType="email-address"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="next"
|
||||
value={email}
|
||||
onChangeText={(text) => setEmail(text)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
secureTextEntry={true}
|
||||
placeholder="Enter your password"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="done"
|
||||
value={pass}
|
||||
onChangeText={(text) => setPass(text)}
|
||||
/>
|
||||
<View style={styles.btnContainer}>
|
||||
<Button
|
||||
style={styles.button}
|
||||
title="Sign Up"
|
||||
color={colors.charcoal}
|
||||
onPress={() => router.replace("/signup")}
|
||||
/>
|
||||
<Button
|
||||
style={styles.button}
|
||||
title="Log In"
|
||||
color={colors.gold}
|
||||
onPress={login}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: colors.dark,
|
||||
},
|
||||
form: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
paddingTop: "10%",
|
||||
width: "100%",
|
||||
gap: 15,
|
||||
},
|
||||
h1: {
|
||||
color: "#FFF",
|
||||
fontSize: 30,
|
||||
textAlign: "center",
|
||||
paddingTop: "20%",
|
||||
},
|
||||
logo: {
|
||||
width: "80%",
|
||||
resizeMode: "contain",
|
||||
},
|
||||
header: {
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
paddingTop: "20%",
|
||||
},
|
||||
input: {
|
||||
height: "auto",
|
||||
width: "60%",
|
||||
borderColor: "gray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
btnContainer: {
|
||||
flexDirection: "row",
|
||||
gap: 5,
|
||||
},
|
||||
container: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: colors.dark,
|
||||
},
|
||||
form: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
paddingTop: "10%",
|
||||
width: "100%",
|
||||
gap: 15,
|
||||
},
|
||||
h1: {
|
||||
color: "#FFF",
|
||||
fontSize: 30,
|
||||
textAlign: "center",
|
||||
paddingTop: "20%",
|
||||
},
|
||||
logo: {
|
||||
width: "80%",
|
||||
resizeMode: "contain",
|
||||
},
|
||||
header: {
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
paddingTop: "20%",
|
||||
},
|
||||
input: {
|
||||
height: "auto",
|
||||
width: "60%",
|
||||
borderColor: "gray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
btnContainer: {
|
||||
flexDirection: "row",
|
||||
gap: 5,
|
||||
},
|
||||
});
|
||||
|
||||
export default LoginPage;
|
||||
|
||||
@@ -7,142 +7,142 @@ import { Link, router } from "expo-router";
|
||||
import { useAuth } from "./context/AuthContext";
|
||||
|
||||
function SignupPage() {
|
||||
const [pass1, setPass1] = useState("");
|
||||
const [pass2, setPass2] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const { onSignin } = useAuth();
|
||||
const [pass1, setPass1] = useState("");
|
||||
const [pass2, setPass2] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const { onSignin } = useAuth();
|
||||
|
||||
async function signin() {
|
||||
if (pass1 == pass2) {
|
||||
const res = await onSignin(username, email, pass1);
|
||||
if (res.error) {
|
||||
if(res.msg.message == "validation error") {
|
||||
alert(res.msg.data.message);
|
||||
} else {
|
||||
alert(res.msg.message)
|
||||
}
|
||||
}
|
||||
if (!res.error) {
|
||||
alert("You have been successfully registered. Please Log In");
|
||||
router.replace("/login");
|
||||
}
|
||||
return;
|
||||
}
|
||||
async function signin() {
|
||||
if (pass1 == pass2) {
|
||||
const res = await onSignin(username, email, pass1);
|
||||
if (res.error) {
|
||||
if (res.msg.message == "validation error") {
|
||||
alert(res.msg.data.message);
|
||||
} else {
|
||||
alert(res.msg.message);
|
||||
}
|
||||
}
|
||||
if (!res.error) {
|
||||
alert("You have been successfully registered. Please Log In");
|
||||
router.replace("/login");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
alert("Passwords are not same!");
|
||||
}
|
||||
alert("Passwords are not same!");
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Image
|
||||
source={require("../assets/deguapp_logo.png")}
|
||||
style={styles.logo}
|
||||
/>
|
||||
<Text style={styles.h1}>Please Sign Up</Text>
|
||||
</View>
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Image
|
||||
source={require("../assets/deguapp_logo.png")}
|
||||
style={styles.logo}
|
||||
/>
|
||||
<Text style={styles.h1}>Please Sign Up</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.form}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your username"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="done"
|
||||
value={username}
|
||||
onChangeText={(username) => setUsername(username)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your email"
|
||||
autoCapitalize="none"
|
||||
autoCompleteType="email"
|
||||
textContentType="emailAddress"
|
||||
keyboardType="email-address"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="next"
|
||||
value={email}
|
||||
onChangeText={(email) => setEmail(email)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
secureTextEntry={true}
|
||||
placeholder="Enter your password"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="done"
|
||||
value={pass1}
|
||||
onChangeText={(pass1) => setPass1(pass1)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
secureTextEntry={true}
|
||||
placeholder="Enter your password"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="done"
|
||||
value={pass2}
|
||||
onChangeText={(pass2) => setPass2(pass2)}
|
||||
/>
|
||||
<Button
|
||||
style={styles.button}
|
||||
title="Sign Up"
|
||||
color={colors.gold}
|
||||
onPress={signin}
|
||||
/>
|
||||
<Link href="/login" style={styles.a}>
|
||||
Already have an account? Log In!
|
||||
</Link>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
<View style={styles.form}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your username"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="done"
|
||||
value={username}
|
||||
onChangeText={(username) => setUsername(username)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your email"
|
||||
autoCapitalize="none"
|
||||
autoCompleteType="email"
|
||||
textContentType="emailAddress"
|
||||
keyboardType="email-address"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="next"
|
||||
value={email}
|
||||
onChangeText={(email) => setEmail(email)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
secureTextEntry={true}
|
||||
placeholder="Enter your password"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="done"
|
||||
value={pass1}
|
||||
onChangeText={(pass1) => setPass1(pass1)}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
secureTextEntry={true}
|
||||
placeholder="Enter your password"
|
||||
placeholderTextColor={"#aaaaaa"}
|
||||
returnKeyType="done"
|
||||
value={pass2}
|
||||
onChangeText={(pass2) => setPass2(pass2)}
|
||||
/>
|
||||
<Button
|
||||
style={styles.button}
|
||||
title="Sign Up"
|
||||
color={colors.gold}
|
||||
onPress={signin}
|
||||
/>
|
||||
<Link href="/login" style={styles.a}>
|
||||
Already have an account? Log In!
|
||||
</Link>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: colors.dark,
|
||||
},
|
||||
form: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
paddingTop: "10%",
|
||||
width: "100%",
|
||||
gap: 15,
|
||||
},
|
||||
h1: {
|
||||
color: "#FFF",
|
||||
fontSize: 30,
|
||||
textAlign: "center",
|
||||
paddingTop: "20%",
|
||||
},
|
||||
a: {
|
||||
color: "#FFF",
|
||||
fontSize: 12,
|
||||
fontStyle: "italic",
|
||||
textDecorationLine: "underline",
|
||||
},
|
||||
logo: {
|
||||
width: "80%",
|
||||
resizeMode: "contain",
|
||||
},
|
||||
header: {
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
paddingTop: "20%",
|
||||
},
|
||||
input: {
|
||||
height: "auto",
|
||||
width: "60%",
|
||||
borderColor: "gray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
btnContainer: {
|
||||
flexDirection: "row",
|
||||
gap: 5,
|
||||
},
|
||||
container: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: colors.dark,
|
||||
},
|
||||
form: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
paddingTop: "10%",
|
||||
width: "100%",
|
||||
gap: 15,
|
||||
},
|
||||
h1: {
|
||||
color: "#FFF",
|
||||
fontSize: 30,
|
||||
textAlign: "center",
|
||||
paddingTop: "20%",
|
||||
},
|
||||
a: {
|
||||
color: "#FFF",
|
||||
fontSize: 12,
|
||||
fontStyle: "italic",
|
||||
textDecorationLine: "underline",
|
||||
},
|
||||
logo: {
|
||||
width: "80%",
|
||||
resizeMode: "contain",
|
||||
},
|
||||
header: {
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
paddingTop: "20%",
|
||||
},
|
||||
input: {
|
||||
height: "auto",
|
||||
width: "60%",
|
||||
borderColor: "gray",
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
btnContainer: {
|
||||
flexDirection: "row",
|
||||
gap: 5,
|
||||
},
|
||||
});
|
||||
|
||||
export default SignupPage;
|
||||
|
||||
Reference in New Issue
Block a user