Compare commits

...

2 Commits

23 changed files with 1298 additions and 97 deletions

View File

@ -11,7 +11,7 @@ services:
image: mongo-express
restart: always
ports:
- 8081:8081
- 8091:8081
environment:
ME_CONFIG_MONGODB_ADMINUSERNAME: root
ME_CONFIG_MONGODB_ADMINPASSWORD: root

View File

@ -23,6 +23,7 @@
"bcrypt": "^5.1.1",
"colors": "1.4.0",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"dotenv": "^16.4.5",
"express": "^4.19.2",
"fs-extra": "^10.0.0",
@ -41,6 +42,7 @@
"@types/bcrypt": "^5.0.2",
"@types/chai": "^4.2.22",
"@types/cookie-parser": "^1.4.7",
"@types/cors": "^2.8.17",
"@types/express": "^4.17.21",
"@types/fs-extra": "^9.0.13",
"@types/inquirer": "^8.1.3",

View File

@ -1,29 +1,29 @@
import express from "express";
import morgan from "morgan";
import path from 'path'
//import cors from 'cors'
import cors from 'cors'
import cookieParser from 'cookie-parser'
import { router as routes } from "./routes";
//import { router as middlewares } from './middlewares'
//import env from './config/environment'
import env from './config/environment'
//export let corsWhitelist: Array<string>
//if (env.CORS_WHITELIST != 'undefined') {
// corsWhitelist = [...['http://localhost:8080', 'http://localhost:6040'], ...env.CORS_WHITELIST.split(';')]
//} else {
// corsWhitelist = ['http://localhost:8080', 'http://localhost:6040']
//}
//const corsOptions = {
// origin: function (origin: any, callback: any) {
// if (!origin || corsWhitelist.indexOf(origin) !== -1) {
// callback(null, true)
// } else {
// callback(new Error('Not allowed by CORS'))
// }
// },
// optionsSuccessStatus: 200,
// credentials: true
//}
export let corsWhitelist: Array<string>
if (env.CORS_WHITELIST != 'undefined') {
corsWhitelist = [...['http://localhost:8080', 'http://localhost:6040'], ...env.CORS_WHITELIST.split(';')]
} else {
corsWhitelist = ['http://localhost:8080', 'http://localhost:6040']
}
const corsOptions = {
origin: function (origin: any, callback: any) {
if (!origin || corsWhitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error('Not allowed by CORS'))
}
},
optionsSuccessStatus: 200,
credentials: true
}
export const app = express();
@ -31,7 +31,7 @@ export const app = express();
//app.use(middlewares)
//app.set('view engine', 'ejs')
//app.set('views', path.join(__dirname, 'views'))
//app.use(cors(corsOptions))
app.use(cors(corsOptions))
app.use(morgan("dev"));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

View File

@ -52,7 +52,7 @@ export async function signin_post(req: Request, res: Response) {
res.cookie('jwt', token, { httpOnly: true, maxAge: maxAge * 1000 });
res.cookie('auth', true, { httpOnly: false, maxAge: maxAge * 1000 });
res.json(Log.info(200, 'user is logged in'));
res.json(Log.info(200, 'user is logged in', {jwt: token}));
return;
}

View File

@ -18,6 +18,7 @@ router.get('/', docsController.docs_get);
router.post("/auth/signup",validate(AuthVal.signup) , authController.signup_post);
router.post("/auth/signin",validate(AuthVal.signin) , authController.signin_post);
router.options("/auth/signin",validate(AuthVal.signin) , authController.signin_post);
router.post("/auth/logout", requireAuth, authController.logout_post);
router.get("/auth/status", requireAuth, authController.status_get);

View File

@ -2,5 +2,5 @@ import * as shell from 'shelljs';
// Copy all the view templates
//shell.cp('-R', 'src/views', 'dist/')
//shell.cp('-R', 'src/public', 'dist/');
shell.cp('-u', 'src/.env', 'dist/');
shell.cp('-R', 'src/public', 'dist/');
shell.cp('-u', 'src/.env', 'dist/');

View File

@ -2,6 +2,7 @@
"expo": {
"name": "deguapp",
"slug": "deguapp",
"scheme": "deguapp",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
@ -25,6 +26,9 @@
},
"web": {
"favicon": "./assets/favicon.png"
}
},
"plugins": [
"expo-router"
]
}
}

View File

@ -0,0 +1,22 @@
import { Redirect, Stack } from "expo-router";
import { useAuth } from "../context/AuthContext";
import { View, Text } from "react-native";
export default function AppLayout() {
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 />;
}

View File

@ -0,0 +1,21 @@
import { Text, View } from "react-native";
import { useAuth } from "../context/AuthContext";
export default function Index() {
const { onLogout } = useAuth();
const user = "debil"
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Welcome {user}</Text>
<Text
onPress={() => {
// The `app/(app)/_layout.tsx` will redirect to the sign-in screen.
onLogout();
}}
>
Sign Out
</Text>
</View>
);
}

10
frontend/app/_layout.js Normal file
View File

@ -0,0 +1,10 @@
import { Slot } from "expo-router";
import { AuthProvider } from "./context/AuthContext";
export default function Root() {
return (
<AuthProvider>
<Slot />
</AuthProvider>
);
}

View File

@ -0,0 +1,103 @@
import { createContext, useContext, useEffect, useState } from "react";
import axios from "axios";
import storageUtil from "./storage";
const TOKEN_KEY = "my-jwt";
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;
}
export function AuthProvider({ children }) {
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}`);
if (token) {
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
setAuthState({
token: token,
authenticated: true,
});
return;
}
setAuthState({
authenticated: false,
token: null,
});
}
loadToken();
}, []);
async function register(username, email, password) {
try {
const res = await axios.post(`${API_URL}/auth/signup`, {
username,
email,
password,
});
return res
} catch (err) {
return { error: true, msg: err.response.data};
}
}
async function login(email, password) {
try {
const res = await axios.post(`${API_URL}/auth/signin`, {
email,
password,
});
setAuthState({
token: res.data.data.jwt,
authenticated: true,
});
//axios.defaults.headers.common[
// "Authorization"
//] = `Bearer ${res.data.data.jwt}`;
await storageUtil.setItem(TOKEN_KEY, res.data.data.jwt);
return res
} catch (err) {
return { error: true, msg: err.res };
}
}
async function logout() {
await storageUtil.delItem(TOKEN_KEY);
axios.defaults.headers.common["Authorization"] = "";
setAuthState({
token: null,
authenticated: false,
});
}
const value = {
onSignin: register,
onLogin: login,
onLogout: logout,
authState,
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

View File

@ -0,0 +1,34 @@
import * as SecureStore from "expo-secure-store";
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);
}
},
};
export default storageUtil;

View File

@ -0,0 +1,6 @@
import { useAuth } from "../context/AuthContext";
export function useIsAutheticated() {
const { authState } = useAuth();
return authState.authenticated
}

View File

@ -0,0 +1,9 @@
import { Redirect, Link } from "expo-router";
import { Text, View } from "react-native";
import { AuthProvider } from "./context/AuthContext";
function HomePage() {
return <Redirect href="/login" />;
}
export default HomePage;

117
frontend/app/login.js Normal file
View File

@ -0,0 +1,117 @@
import { StyleSheet, TextInput, View, Text, Image } from "react-native";
import { useEffect, useState } from "react";
import { router } from "expo-router";
import Button from "../components/Button";
import { colors } from "../components/style";
import { useAuth } from "./context/AuthContext";
function LoginPage() {
const [pass, setPass] = useState("");
const [email, setEmail] = useState("");
const { onLogin, authState } = useAuth();
useEffect(() => {
if (authState.authenticated) {
router.replace("/");
}
}, [authState.authenticated]);
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>
);
}
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,
},
});
export default LoginPage;

148
frontend/app/signup.js Normal file
View File

@ -0,0 +1,148 @@
import { StyleSheet, TextInput, View, Text, Image } from "react-native";
import { useState } from "react";
import Button from "../components/Button";
import { colors } from "../components/style";
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();
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!");
}
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>
);
}
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,
},
});
export default SignupPage;

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

View File

@ -5,7 +5,16 @@ export default function Button(props) {
const { onPress, title = "Save", color = "black" } = props;
return (
<Pressable
style={[styles.button, { backgroundColor: color }]}
style={({ pressed }) => [
{
backgroundColor: pressed
? "rgb(210, 230, 255 )"
: color
? color
: "black",
},
styles.button,
]}
onPress={onPress}
>
<Text style={styles.text}>{title}</Text>
@ -21,7 +30,6 @@ const styles = StyleSheet.create({
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: "black",
},
text: {
fontSize: 16,

View File

@ -1,5 +1,6 @@
export const colors = {
gold: "#FFD700ff",
gold: "#ffa500",
brown: "#8B4513ff",
green: "#228B22ff",
charcoal: "#2C3E50ff",

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,7 @@
{
"name": "deguapp",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"main": "expo-router/entry",
"scripts": {
"start": "expo start",
"android": "expo start --android",
@ -9,13 +9,22 @@
"web": "expo start --web"
},
"dependencies": {
"@expo/metro-runtime": "~3.1.3",
"@react-native-async-storage/async-storage": "^1.23.1",
"@types/react": "~18.2.45",
"axios": "^1.6.8",
"expo": "~50.0.17",
"expo-constants": "~15.4.6",
"expo-linking": "~6.2.2",
"expo-router": "~3.4.10",
"expo-secure-store": "^12.8.1",
"expo-status-bar": "~1.11.1",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-web": "~0.19.6",
"react-dom": "18.2.0",
"@expo/metro-runtime": "~3.1.3"
"react-native": "0.73.6",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"react-native-web": "~0.19.6"
},
"devDependencies": {
"@babel/core": "^7.20.0"

View File

@ -1,66 +0,0 @@
import {
StyleSheet,
TouchableOpacity,
TextInput,
View,
Text,
} from "react-native";
import Button from "../components/Button";
import { colors } from "../components/style";
export function LoginForm() {
return (
<View style={styles.container}>
<Text style={styles.header}>Please Log In</Text>
<TextInput
style={styles.input}
placeholder="Enter your email"
autoCapitalize="none"
autoCompleteType="email"
textContentType="emailAddress"
keyboardType="email-address"
placeholderTextColor={"#aaaaaa"}
returnKeyType="next"
/>
<TextInput
style={styles.input}
secureTextEntry={true}
placeholder="Enter your password"
placeholderTextColor={"#aaaaaa"}
returnKeyType="done"
/>
<View style={styles.btnContainer}>
<Button style={styles.button} title="Sign Up" color={colors.charcoal} />
<Button style={styles.button} title="Log In" color={colors.green} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: colors.dark,
flex: 1,
gap: 15,
alignItems: "center",
justifyContent: "center",
width: "100%",
},
header: {
color: "#FFF",
fontSize: 22,
},
input: {
height: "auto",
width: "60%",
borderColor: "gray",
borderWidth: 1,
borderRadius: 5,
padding: 10,
},
button: {},
btnContainer: {
flexDirection: "row",
gap: 10,
},
});