Rewind from a user account system. Not necessary.
This commit is contained in:
parent
640f81a79f
commit
0ea172d6ad
22 changed files with 8 additions and 3032 deletions
22
backend/.env
22
backend/.env
|
|
@ -1,22 +0,0 @@
|
|||
# Environment
|
||||
NODE_ENV=development # Change to 'production' for live environment
|
||||
|
||||
# Database Configuration - development localhost
|
||||
DB_USER=postgres
|
||||
DB_PASSWORD=postgres
|
||||
DB_NAME=tower_test
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
|
||||
# Live Database Configuration (used only in production)
|
||||
DB_USER_PROD=your_live_database_user
|
||||
DB_PASSWORD_PROD=your_live_database_password
|
||||
DB_NAME_PROD=your_database_name_live
|
||||
DB_HOST_PROD=your_live_database_host
|
||||
DB_PORT_PROD=5432
|
||||
|
||||
# JWT Secret
|
||||
JWT_SECRET=your_jwt_secret
|
||||
|
||||
# Server Configuration
|
||||
PORT=3000
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import bcrypt from "bcrypt";
|
||||
import jwt from "jsonwebtoken";
|
||||
import { Pool } from "pg";
|
||||
|
||||
const pool = new Pool();
|
||||
|
||||
const JWT_SECRET = process.env.JWT_SECRET || "your_jwt_secret";
|
||||
|
||||
export const register = async (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
|
||||
if (!username || !password) {
|
||||
return res.status(400).json({ message: "Username and password are required" });
|
||||
}
|
||||
|
||||
try {
|
||||
const hashedPassword = await bcrypt.hash(password, 10);
|
||||
await pool.query(
|
||||
"INSERT INTO users (username, password) VALUES ($1, $2)",
|
||||
[username, hashedPassword]
|
||||
);
|
||||
res.status(201).json({ message: "User registered successfully" });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error registering user" });
|
||||
}
|
||||
};
|
||||
|
||||
export const login = async (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
|
||||
if (!username || !password) {
|
||||
return res.status(400).json({ message: "Username and password are required" });
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await pool.query("SELECT * FROM users WHERE username = $1", [username]);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return res.status(401).json({ message: "Invalid username or password" });
|
||||
}
|
||||
|
||||
const user = result.rows[0];
|
||||
const isPasswordValid = await bcrypt.compare(password, user.password);
|
||||
|
||||
if (!isPasswordValid) {
|
||||
return res.status(401).json({ message: "Invalid username or password" });
|
||||
}
|
||||
|
||||
const token = jwt.sign({ id: user.id, username: user.username }, JWT_SECRET, {
|
||||
expiresIn: "1h",
|
||||
});
|
||||
|
||||
res.json({ token });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error logging in" });
|
||||
}
|
||||
};
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { Pool } from "pg";
|
||||
|
||||
const pool = new Pool();
|
||||
|
||||
export const getAllRecipes = async (req, res) => {
|
||||
try {
|
||||
const result = await pool.query("SELECT * FROM recipes");
|
||||
res.json(result.rows);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error fetching recipes" });
|
||||
}
|
||||
};
|
||||
|
||||
export const addRecipe = async (req, res) => {
|
||||
const { title, description, ingredients, tags, image_url } = req.body;
|
||||
|
||||
if (!title || !description || !ingredients) {
|
||||
return res.status(400).json({ message: "Title, description, and ingredients are required" });
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await pool.query(
|
||||
"INSERT INTO recipes (title, description, ingredients, tags, image_url) VALUES ($1, $2, $3, $4, $5) RETURNING *",
|
||||
[title, description, ingredients, tags, image_url]
|
||||
);
|
||||
res.status(201).json(result.rows[0]);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error adding recipe" });
|
||||
}
|
||||
};
|
||||
|
||||
export const searchRecipesByIngredient = async (req, res) => {
|
||||
const { ingredient } = req.query;
|
||||
|
||||
try {
|
||||
const result = await pool.query(
|
||||
"SELECT * FROM recipes WHERE $1 = ANY (ingredients)",
|
||||
[ingredient]
|
||||
);
|
||||
res.json(result.rows);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error searching recipes" });
|
||||
}
|
||||
};
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { Pool } from "pg";
|
||||
|
||||
const pool = new Pool();
|
||||
|
||||
export const getAllUsers = async (req, res) => {
|
||||
try {
|
||||
const result = await pool.query("SELECT id, username FROM users");
|
||||
res.json(result.rows);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error fetching users" });
|
||||
}
|
||||
};
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import jwt from "jsonwebtoken";
|
||||
|
||||
const JWT_SECRET = process.env.JWT_SECRET || "your_jwt_secret";
|
||||
|
||||
export const authenticateToken = (req, res, next) => {
|
||||
const token = req.headers.authorization?.split(" ")[1];
|
||||
if (!token) {
|
||||
return res.status(401).json({ message: "Unauthorized" });
|
||||
}
|
||||
|
||||
try {
|
||||
const user = jwt.verify(token, JWT_SECRET);
|
||||
req.user = user;
|
||||
next();
|
||||
} catch (error) {
|
||||
console.error("Invalid token:", error.message); // Log the error for debugging
|
||||
res.status(403).json({ message: "Invalid token" });
|
||||
}
|
||||
};
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import { Sequelize } from "sequelize";
|
||||
|
||||
const isProduction = process.env.NODE_ENV === "production";
|
||||
|
||||
const sequelize = new Sequelize(
|
||||
isProduction ? process.env.DB_NAME_PROD : process.env.DB_NAME,
|
||||
isProduction ? process.env.DB_USER_PROD : process.env.DB_USER,
|
||||
isProduction ? process.env.DB_PASSWORD_PROD : process.env.DB_PASSWORD,
|
||||
{
|
||||
host: isProduction ? process.env.DB_HOST_PROD : process.env.DB_HOST,
|
||||
dialect: "postgres",
|
||||
port: isProduction ? process.env.DB_PORT_PROD : process.env.DB_PORT,
|
||||
logging: false, // Disable logging for cleaner output
|
||||
}
|
||||
);
|
||||
|
||||
const testConnection = async () => {
|
||||
try {
|
||||
await sequelize.authenticate();
|
||||
console.log("Connection to the database has been established successfully.");
|
||||
} catch (error) {
|
||||
console.error("Unable to connect to the database:", error);
|
||||
}
|
||||
};
|
||||
|
||||
testConnection();
|
||||
|
||||
export default sequelize;
|
||||
2175
backend/package-lock.json
generated
2175
backend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"name": "hub-site-backend",
|
||||
"version": "1.0.0",
|
||||
"description": "Backend for the Hub-Site project",
|
||||
"main": "server.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"dev": "nodemon server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"bcrypt": "^5.1.0",
|
||||
"body-parser": "2.0.2",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^16.0.3",
|
||||
"express": "5.0.1",
|
||||
"jsonwebtoken": "^9.0.0",
|
||||
"pg": "^8.10.0",
|
||||
"pg-hstore": "^2.3.4",
|
||||
"sequelize": "^6.32.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.7"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import { Router } from "express";
|
||||
import bcrypt from "bcrypt";
|
||||
import jwt from "jsonwebtoken";
|
||||
import pkg from "pg"; // Importing the whole CommonJS module
|
||||
|
||||
const { Pool } = pkg; // Destructuring Pool from the imported CommonJS module
|
||||
|
||||
const router = Router();
|
||||
const pool = new Pool({
|
||||
user: process.env.DB_USER,
|
||||
host: process.env.DB_HOST,
|
||||
database: process.env.DB_NAME,
|
||||
password: process.env.DB_PASSWORD,
|
||||
port: process.env.DB_PORT,
|
||||
});
|
||||
|
||||
const JWT_SECRET = process.env.JWT_SECRET || "your_jwt_secret";
|
||||
|
||||
// Register
|
||||
router.post("/register", async (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
|
||||
try {
|
||||
const hashedPassword = await bcrypt.hash(password, 10);
|
||||
await pool.query(
|
||||
"INSERT INTO users (username, password) VALUES ($1, $2)",
|
||||
[username, hashedPassword]
|
||||
);
|
||||
res.status(201).json({ message: "User registered successfully" });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error registering user" });
|
||||
}
|
||||
});
|
||||
|
||||
// Login
|
||||
router.post("/login", async (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
|
||||
try {
|
||||
const result = await pool.query("SELECT * FROM users WHERE username = $1", [
|
||||
username,
|
||||
]);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return res.status(401).json({ message: "Invalid username or password" });
|
||||
}
|
||||
|
||||
const user = result.rows[0];
|
||||
const isPasswordValid = await bcrypt.compare(password, user.password);
|
||||
|
||||
if (!isPasswordValid) {
|
||||
return res.status(401).json({ message: "Invalid username or password" });
|
||||
}
|
||||
|
||||
const token = jwt.sign({ id: user.id, username: user.username }, JWT_SECRET, {
|
||||
expiresIn: "1h",
|
||||
});
|
||||
|
||||
res.json({ token });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error logging in" });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import express from "express";
|
||||
import pkg from "pg";
|
||||
|
||||
const { Pool } = pkg; // Destructure the Pool object from the CommonJS module
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
const pool = new Pool({
|
||||
user: process.env.DB_USER,
|
||||
host: process.env.DB_HOST,
|
||||
database: process.env.DB_NAME,
|
||||
password: process.env.DB_PASSWORD,
|
||||
port: process.env.DB_PORT,
|
||||
});
|
||||
|
||||
// Get all recipes
|
||||
router.get("/", async (req, res) => {
|
||||
try {
|
||||
const result = await pool.query("SELECT * FROM recipes");
|
||||
res.json(result.rows);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error fetching recipes" });
|
||||
}
|
||||
});
|
||||
|
||||
// Add a new recipe
|
||||
router.post("/", async (req, res) => {
|
||||
const { title, description, ingredients, tags, image_url } = req.body;
|
||||
|
||||
try {
|
||||
const result = await pool.query(
|
||||
"INSERT INTO recipes (title, description, ingredients, tags, image_url) VALUES ($1, $2, $3, $4, $5) RETURNING *",
|
||||
[title, description, ingredients, tags, image_url]
|
||||
);
|
||||
res.status(201).json(result.rows[0]);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error adding recipe" });
|
||||
}
|
||||
});
|
||||
|
||||
// Search recipes by ingredients
|
||||
router.get("/search", async (req, res) => {
|
||||
const { ingredient } = req.query;
|
||||
|
||||
try {
|
||||
const result = await pool.query(
|
||||
"SELECT * FROM recipes WHERE $1 = ANY (ingredients)",
|
||||
[ingredient]
|
||||
);
|
||||
res.json(result.rows);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error searching recipes" });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import express from "express";
|
||||
import pkg from "pg";
|
||||
|
||||
const { Pool } = pkg; // Destructure Pool from the CommonJS module
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
const pool = new Pool({
|
||||
user: process.env.DB_USER,
|
||||
host: process.env.DB_HOST,
|
||||
database: process.env.DB_NAME,
|
||||
password: process.env.DB_PASSWORD,
|
||||
port: process.env.DB_PORT,
|
||||
});
|
||||
|
||||
// Get all users (Admin-only functionality)
|
||||
router.get("/", async (req, res) => {
|
||||
try {
|
||||
const result = await pool.query("SELECT id, username FROM users");
|
||||
res.json(result.rows);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
res.status(500).json({ message: "Error fetching users" });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import dotenv from "dotenv";
|
||||
import express from "express";
|
||||
import cors from "cors";
|
||||
|
||||
import authRoutes from "./routes/auth.js";
|
||||
import recipeRoutes from "./routes/recipes.js";
|
||||
import userRoutes from "./routes/users.js";
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
// Middleware
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
|
||||
// Routes
|
||||
app.use("/auth", authRoutes);
|
||||
app.use("/recipes", recipeRoutes);
|
||||
app.use("/users", userRoutes);
|
||||
|
||||
// Fallback Route
|
||||
app.get("/", (req, res) => {
|
||||
res.send("Welcome to the Hub-Site backend API!");
|
||||
});
|
||||
|
||||
// Server
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server running on http://localhost:${PORT}`);
|
||||
});
|
||||
|
||||
|
|
@ -14,9 +14,7 @@
|
|||
"type-check": "vue-tsc --build --force",
|
||||
"lint": "eslint . --fix",
|
||||
"format": "prettier --write src/",
|
||||
"start:backend": "cd backend && npm run dev",
|
||||
"start:frontend": "cd ./ && npm run dev --host",
|
||||
"dev-all": "concurrently \"npm run start:backend\" \"npm run start:frontend\""
|
||||
"start": "npm run dev --host"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tsparticles/slim": "^3.5.0",
|
||||
|
|
|
|||
45
src/App.vue
45
src/App.vue
|
|
@ -2,10 +2,6 @@
|
|||
import { RouterLink, RouterView } from 'vue-router';
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// Authentication state
|
||||
const isAuthenticated = ref(false);
|
||||
const username = ref("");
|
||||
|
||||
// Theme state and available themes
|
||||
const theme = ref(localStorage.getItem("theme") || "mocha");
|
||||
const availableThemes = [
|
||||
|
|
@ -23,24 +19,11 @@ const availableThemes = [
|
|||
"daydreamer",
|
||||
];
|
||||
|
||||
// Apply theme and check authentication state
|
||||
// Apply theme
|
||||
onMounted(() => {
|
||||
const token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
isAuthenticated.value = true;
|
||||
username.value = localStorage.getItem("username") || "";
|
||||
}
|
||||
document.documentElement.setAttribute("data-theme", theme.value);
|
||||
});
|
||||
|
||||
// Logout function
|
||||
const logout = () => {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("username");
|
||||
isAuthenticated.value = false;
|
||||
window.location.href = "/";
|
||||
};
|
||||
|
||||
// Change theme function
|
||||
const changeTheme = (newTheme: string) => {
|
||||
theme.value = newTheme;
|
||||
|
|
@ -57,37 +40,21 @@ const changeTheme = (newTheme: string) => {
|
|||
<div class="nav-links">
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/servers">Servers</RouterLink>
|
||||
<RouterLink to="/projects">Projects</RouterLink>
|
||||
<RouterLink v-if="isAuthenticated" to="/recipes">Recipes</RouterLink>
|
||||
<RouterLink v-if="isAuthenticated" to="/calendar">Calendar</RouterLink>
|
||||
<RouterLink v-if="isAuthenticated" to="/gallery">Gallery</RouterLink>
|
||||
<RouterLink to="/projects">Projects</RouterLink>"
|
||||
<a href="https://foundryvtt.example.com" target="_blank">Foundry VTT</a>
|
||||
<a href="https://oekaki.smgames.club" target="_blank">Oekaki</a>
|
||||
<a href="https://social.smgames.club/" target="_blank">Social</a>
|
||||
<a href="https://madstar.studio" target="_blank">Shop</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Authentication & Theme Controls -->
|
||||
<section class="controls">
|
||||
<div class="theme-selector">
|
||||
<!-- Theme Selector -->
|
||||
<div class="theme-selector">
|
||||
<label for="theme-switcher">Theme:</label>
|
||||
<select id="theme-switcher" v-model="theme" @change="changeTheme(theme)">
|
||||
<option v-for="t in availableThemes" :key="t" :value="t">{{ t }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="auth-controls">
|
||||
<span v-if="isAuthenticated">
|
||||
Welcome, {{ username }}!
|
||||
<button @click="logout" class="logout-button">Logout</button>
|
||||
</span>
|
||||
<span v-else>
|
||||
<RouterLink to="/login">Login</RouterLink> |
|
||||
<RouterLink to="/register">Register</RouterLink>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -19,31 +19,6 @@ const router = createRouter({
|
|||
name: 'projects',
|
||||
component: () => import('../views/ProjectsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('../views/LoginView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'register',
|
||||
component: () => import('../views/RegisterView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/gallery',
|
||||
name: 'gallery',
|
||||
component: () => import('../views/GalleryView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/calendar',
|
||||
name: 'calendar',
|
||||
component: () => import('../views/CalendarView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/recipes',
|
||||
name: 'recipes',
|
||||
component: () => import('../views/RecipesView.vue'),
|
||||
},
|
||||
// Example for adding a new page
|
||||
/*
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<div class="landing-page">
|
||||
<header class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Welcome to the Server Tower</h1>
|
||||
<p>
|
||||
Explore our hosted tools, services, and projects for personal use, family, and creative endeavors.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="sections">
|
||||
<!-- Family Content -->
|
||||
|
|
@ -19,37 +11,11 @@
|
|||
<h3>Sharkey</h3>
|
||||
<p>
|
||||
Twitter alternative without a flood of Nazis.<br /><br />
|
||||
We manually approve all members + verify them outside of the net, too.<br /><br />
|
||||
Fam & friends only to make an account in our space, but you can use any Sharkey/Mastodon/etc instance to register elsewhere and talk to us.
|
||||
We manually approve all members + verify them outside of the net, too. Fam & friends only to make an account in our space, but you can use any Sharkey/Mastodon/etc instance to register elsewhere and talk to us.
|
||||
</p>
|
||||
<a href="https://social.smgames.club/" class="link">Go to Platform</a>
|
||||
</div>
|
||||
|
||||
<!-- Conditional Sections (Visible only if logged in) -->
|
||||
<div v-if="isAuthenticated" class="card">
|
||||
<h3>Discord</h3>
|
||||
<p>
|
||||
Connect with others on our private Discord... which is by invite only!<br /><br />
|
||||
Sorry, you won't actually find the link here! If you're related to Starr, ask her about it.
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="isAuthenticated" class="card">
|
||||
<h3>Photo Gallery</h3>
|
||||
<p>Explore our collection of family photos, preserved for generations.</p>
|
||||
<a href="/gallery" class="link">View Photos</a>
|
||||
</div>
|
||||
<div v-if="isAuthenticated" class="card">
|
||||
<h3>Recipe Collection</h3>
|
||||
<p>Browse our curated family recipes, shared across generations.</p>
|
||||
<a href="/recipes" class="link">Explore Recipes</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gaming Content -->
|
||||
<div class="section-box">
|
||||
<h2>Gaming</h2>
|
||||
<div class="section-content">
|
||||
<div class="card">
|
||||
<h3>Game Servers</h3>
|
||||
<p>
|
||||
|
|
@ -82,10 +48,3 @@
|
|||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
// Authentication state from App.vue
|
||||
const isAuthenticated = ref(false); // Replace this with a global state or a store (e.g., Pinia/Vuex) if necessary
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<div class="login">
|
||||
<h1>Login</h1>
|
||||
<form @submit.prevent="handleLogin">
|
||||
<div class="form-group">
|
||||
<input v-model="username" type="text" placeholder="Username" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input v-model="password" type="password" placeholder="Password" required />
|
||||
</div>
|
||||
<button type="submit" class="btn-login">Login</button>
|
||||
</form>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p class="register-link">
|
||||
Don't have an account? <router-link to="/register">Register here</router-link>.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { login } from "@/authService"; // Matches the renamed file
|
||||
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
username: "",
|
||||
password: "",
|
||||
error: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async handleLogin() {
|
||||
try {
|
||||
await login(this.username, this.password);
|
||||
this.$router.push("/protected"); // Redirect to protected route
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.error = "Invalid username or password";
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,253 +0,0 @@
|
|||
<template>
|
||||
<div class="recipes">
|
||||
<h1>Recipes</h1>
|
||||
<div class="filter-bar">
|
||||
<div class="filter-group">
|
||||
<label for="type">Filter by Type:</label>
|
||||
<select v-model="selectedType" @change="filterRecipes">
|
||||
<option value="">All</option>
|
||||
<option value="appetizer">Appetizers</option>
|
||||
<option value="drink">Drinks</option>
|
||||
<option value="alcoholic">Alcoholic Drinks</option>
|
||||
<option value="non-alcoholic">Non-Alcoholic Drinks</option>
|
||||
<option value="found">Found Recipes</option>
|
||||
<option value="user">User Recipes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-group">
|
||||
<input
|
||||
type="text"
|
||||
v-model="searchQuery"
|
||||
placeholder="Search recipes..."
|
||||
@input="filterRecipes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recipes-grid">
|
||||
<div
|
||||
v-for="recipe in filteredRecipes"
|
||||
:key="recipe.id"
|
||||
class="recipe-card"
|
||||
>
|
||||
<img v-if="recipe.image" :src="recipe.image" alt="Recipe Image" />
|
||||
<h3>{{ recipe.name }}</h3>
|
||||
<p><strong>Type:</strong> {{ recipe.type }}</p>
|
||||
<p><strong>Made By:</strong> {{ recipe.madeBy }}</p>
|
||||
<p>{{ recipe.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Recipe Modal -->
|
||||
<div v-if="showAddModal" class="modal-overlay" @click="closeModal">
|
||||
<div class="modal-content" @click.stop>
|
||||
<h2>Add Recipe</h2>
|
||||
<form @submit.prevent="addRecipe">
|
||||
<input v-model="newRecipe.name" type="text" placeholder="Recipe Name" required />
|
||||
<textarea
|
||||
v-model="newRecipe.description"
|
||||
placeholder="Recipe Description"
|
||||
required
|
||||
></textarea>
|
||||
<select v-model="newRecipe.type" required>
|
||||
<option value="">Select Type</option>
|
||||
<option value="appetizer">Appetizer</option>
|
||||
<option value="drink">Drink</option>
|
||||
<option value="alcoholic">Alcoholic Drink</option>
|
||||
<option value="non-alcoholic">Non-Alcoholic Drink</option>
|
||||
<option value="found">Found Recipe</option>
|
||||
<option value="user">User Recipe</option>
|
||||
</select>
|
||||
<input
|
||||
v-model="newRecipe.madeBy"
|
||||
type="text"
|
||||
placeholder="Made By (or Found)"
|
||||
/>
|
||||
<input type="file" @change="onFileChange" />
|
||||
<button type="submit">Add Recipe</button>
|
||||
</form>
|
||||
<button @click="closeModal" class="close-button">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Recipe Button -->
|
||||
<button v-if="canAddRecipe" @click="showAddModal = true" class="add-button">
|
||||
Add Recipe
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { getRecipes, addRecipeToDb } from "@/recipeService"; // Replace with actual service paths
|
||||
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
recipes: [],
|
||||
filteredRecipes: [],
|
||||
selectedType: "",
|
||||
searchQuery: "",
|
||||
showAddModal: false,
|
||||
newRecipe: {
|
||||
name: "",
|
||||
description: "",
|
||||
type: "",
|
||||
madeBy: "",
|
||||
image: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canAddRecipe() {
|
||||
// Replace with actual permission check logic
|
||||
return localStorage.getItem("token"); // Simple check if the user is logged in
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async fetchRecipes() {
|
||||
try {
|
||||
const response = await getRecipes();
|
||||
this.recipes = response.data;
|
||||
this.filteredRecipes = this.recipes;
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch recipes:", err);
|
||||
}
|
||||
},
|
||||
filterRecipes() {
|
||||
this.filteredRecipes = this.recipes.filter((recipe) => {
|
||||
const matchesType =
|
||||
!this.selectedType || recipe.type === this.selectedType;
|
||||
const matchesSearch =
|
||||
!this.searchQuery ||
|
||||
recipe.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
|
||||
recipe.description
|
||||
.toLowerCase()
|
||||
.includes(this.searchQuery.toLowerCase());
|
||||
return matchesType && matchesSearch;
|
||||
});
|
||||
},
|
||||
onFileChange(event: Event) {
|
||||
const file = (event.target as HTMLInputElement).files?.[0];
|
||||
if (file) {
|
||||
this.newRecipe.image = file;
|
||||
}
|
||||
},
|
||||
async addRecipe() {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("name", this.newRecipe.name);
|
||||
formData.append("description", this.newRecipe.description);
|
||||
formData.append("type", this.newRecipe.type);
|
||||
formData.append("madeBy", this.newRecipe.madeBy || "Unknown");
|
||||
if (this.newRecipe.image) {
|
||||
formData.append("image", this.newRecipe.image);
|
||||
}
|
||||
await addRecipeToDb(formData);
|
||||
this.showAddModal = false;
|
||||
this.newRecipe = {
|
||||
name: "",
|
||||
description: "",
|
||||
type: "",
|
||||
madeBy: "",
|
||||
image: null,
|
||||
};
|
||||
await this.fetchRecipes();
|
||||
} catch (err) {
|
||||
console.error("Failed to add recipe:", err);
|
||||
}
|
||||
},
|
||||
closeModal() {
|
||||
this.showAddModal = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchRecipes();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.recipes {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-group select {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.search-group input {
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.recipes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.recipe-card {
|
||||
background: #313244;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.recipe-card img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #1e1e2e;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
background: #89b4fa;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
background: #74a8e0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
<template>
|
||||
<div class="register">
|
||||
<h1>Register</h1>
|
||||
<form @submit.prevent="handleRegister">
|
||||
<input v-model="username" type="text" placeholder="Username" required />
|
||||
<input v-model="password" type="password" placeholder="Password" required />
|
||||
<input v-model="confirmPassword" type="password" placeholder="Confirm Password" required />
|
||||
<button type="submit">Register</button>
|
||||
</form>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-if="success" class="success">{{ success }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { register } from "@/authService";
|
||||
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
username: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
error: "",
|
||||
success: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async handleRegister() {
|
||||
if (this.password !== this.confirmPassword) {
|
||||
this.error = "Passwords do not match";
|
||||
this.success = "";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await register(this.username, this.password);
|
||||
this.success = "Registration successful! You can now log in.";
|
||||
this.error = "";
|
||||
this.username = "";
|
||||
this.password = "";
|
||||
this.confirmPassword = "";
|
||||
} catch (err) {
|
||||
this.error = "Registration failed. Please try again.";
|
||||
this.success = "";
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue