Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ashin #10

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Ashin #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e1a002
Typo error in signup page
AshinSMathew Oct 5, 2024
8989603
made 2 new pages
AshinSMathew Oct 5, 2024
33d2cbe
app add
AshinSMathew Oct 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 99 additions & 0 deletions app/add/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
// pages/upload.js
"use client"
import React, { useState } from 'react';
import Cookies from 'js-cookie';

export default function UploadPage() {
const [image, setImage] = useState(null);
const [itemName, setItemName] = useState('');
const [restaurant, setRestaurant] = useState('');
const [quantity, setQuantity] = useState('');

const handleImageChange = (e) => {
setImage(URL.createObjectURL(e.target.files[0]));
};

const handleReset = () => {
setImage(null);
setItemName('');
setQuantity('');
setRestaurant('');
};

return (
<div className="min-h-screen bg-gray-100 flex justify-center items-center">
<div className="max-w-lg w-full p-6 bg-white rounded-lg shadow-md">
<h1 className="text-center text-2xl font-bold text-gray-700 mb-6">Add New Items</h1>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2">Item Name</label>
<input
type="text"
placeholder="Enter item name"
value={itemName}
onChange={(e) => setItemName(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-md text-black placeholder-black"
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2">Upload Photo</label>
<div className="flex items-center gap-4">
{image ? (
<img src={image} alt="Preview" className="w-24 h-24 object-cover rounded-md" />
) : (
<div className="w-24 h-24 bg-gray-200 flex items-center justify-center text-gray-500 pl-5">
Image Preview
</div>
)}
<input
type="file"
onChange={handleImageChange}
className="px-4 py-2 border border-gray-300 rounded-md text-black"
/>
</div>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2">Quantity</label>
<input
type="number"
placeholder="Enter quantity"
value={quantity}
onChange={(e) => setQuantity(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-md text-black placeholder-black"
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2">Restaurant</label>
<input
placeholder="Enter details"
value={restaurant}
onChange={(e) => setRestaurant(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-md text-black placeholder-black"
/>
</div>
<div className="flex justify-between mt-6">
<button
onClick={handleReset}
className="bg-red-500 text-white px-6 py-2 rounded-md hover:bg-red-600"
>
Reset
</button>
<button className="bg-orange-500 text-white px-6 py-2 rounded-md hover:bg-orange-600" onClick={() => {fetch("https://hmpp6vkz-8000.inc1.devtunnels.ms/add_item", {
method: "POST",
headers: {
"Conten-Type": "application/json"
},
body: JSON.stringify({
"session": Cookies.get("session"),
"name": itemName,
"restaurant": restaurant,
"quantity": quantity,
"image_url": image,
})
})}}>
Save Changes
</button>
</div>
</div>
</div>
);
}
46 changes: 46 additions & 0 deletions app/confeti/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
"use client";
import React, { useEffect, useState } from 'react';
import Confetti from 'react-confetti';
import { useWindowSize } from 'react-use';

export default function SuccessPage() {
const [showConfetti, setShowConfetti] = useState(true);
const { height } = useWindowSize();

// Stop the confetti after a few seconds
useEffect(() => {
const timer = setTimeout(() => {
setShowConfetti(false);
}, 5000); // Confetti stops after 5 seconds
return () => clearTimeout(timer);
}, []);

return (
<div className=" min-h-screen w-screen flex flex-col justify-center items-center bg-white">
<div className='flex flex-col items-center justify-center absolute top-6 left-80'>
{showConfetti && (
<div >
<Confetti
width={800}
height={height / 2} // Show confetti only in the top half
numberOfPieces={300}
recycle={false} // Do not recycle pieces
/>
</div>
)}
</div>

{/* Success message */}
<div className="flex flex-col items-center gap-4 z-10">
<div className="w-80 sm:w-96 h-64 bg-gray-300 flex flex-col justify-center items-center rounded-md text-center shadow-lg">
<h2 className="text-2xl font-bold">Order Successful</h2>
<p className="mt-2 text-gray-600">You successfully ordered! Enjoy feeding the needy!</p>
</div>

<button className="bg-orange-500 text-white px-6 py-2 mt-8 rounded-md hover:bg-orange-600 w-full sm:w-auto transition duration-300">
CONTINUE
</button>
</div>
</div>
);
}
176 changes: 122 additions & 54 deletions app/login/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,129 @@
import React from 'react';
"use client";
import React, { useState } from 'react';
import Cookies from 'js-cookie';
// import {useRouter, Router} from 'next/navigation';

function Login() {
return (
<div className='h-screen w-screen bg-[#121223]'>
<div className='pt-24 flex flex-col gap-3 items-center justify-center text-white'>
<h1 className="text-3xl font-bold">LOGIN</h1>
<h3 className="text-lg">Please sign in to your existing account</h3>
</div>
<div className='pt-12 mx-auto rounded-xl mt-10 bg-white w-[70vw] md:w-[40vw] flex flex-col items-center justify-center'>
<form action="" className='flex mx-auto flex-col items-center justify-center w-full max-w-md p-4'>
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [rememberMe, setRememberMe] = useState(false);


const handleEmailChange = (e) => {
setEmail(e.target.value);
};

const handlePasswordChange = (e) => {
setPassword(e.target.value);
};

const handleRememberMeChange = () => {
setRememberMe(!rememberMe);
};

const handleSubmit = async (e) => {
e.preventDefault();


<label htmlFor="email" className="uppercase text-gray-700 font-semibold mb-2 self-start w-full max-w-md">
Email
</label>
<input
id="email"
type="email"
className=" bg-[#F0F5FA] rounded-md w-full max-w-md h-10 text-gray-600 p-3 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="[email protected]"
/>
<label htmlFor="email" className="mt-4 uppercase text-gray-700 font-semibold mb-2 self-start w-full max-w-md">
Password
</label>
<input
id="password"
type="password"
className="bg-[#F0F5FA] rounded-md w-full max-w-md h-10 text-gray-600 p-3 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter your password"
/>
<div className="flex justify-between w-full max-w-md mb-4">

<div className="flex items-center">
<input type="checkbox" id="remember-me" className="mr-2" />
<label htmlFor="remember-me" className="text-gray-700">
Remember me
</label>
if (!email || !password) {
alert("Please fill out all fields.");
return;
}

try {
const res = await fetch("https://hmpp6vkz-8000.inc1.devtunnels.ms/login_user", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password,
}),
});


if (!res.ok) {
throw new Error("Login failed");
}

const data = await res.json();
console.log("Login successful", data);

Cookies.set('session', data.data.cookie, { expires: 30 });
alert("Login successful");

} catch (e) {
console.error(e);
alert("Login failed, please try again.");
}
};

return (
<div className='h-screen w-screen bg-[#121223]'>
<div className='pt-24 flex flex-col gap-3 items-center justify-center text-white'>
<h1 className="text-3xl font-bold">LOGIN</h1>
<h3 className="text-lg">Please sign in to your existing account</h3>
</div>
<a href="#" className="text-[#FF7622] hover:underline">
Forgot password?
</a>
</div>
<div>
<button className='uppercase font-bold rounded-xl text-[#ffff] bg-[#FF7622] w-40 h-11'>
Log In
</button>
<div className='pt-12 mx-auto rounded-xl mt-10 bg-white w-[70vw] md:w-[40vw] flex flex-col items-center justify-center'>
<form className='flex mx-auto flex-col items-center justify-center w-full max-w-md p-4' onSubmit={handleSubmit}>
<label htmlFor="email" className="uppercase text-gray-700 font-semibold mb-2 self-start w-full max-w-md">
Email
</label>
<input
id="email"
type="email"
value={email}
onChange={handleEmailChange}
className="bg-[#F0F5FA] rounded-md w-full max-w-md h-10 text-gray-600 p-3 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="[email protected]"
/>
<label htmlFor="password" className="mt-4 uppercase text-gray-700 font-semibold mb-2 self-start w-full max-w-md">
Password
</label>
<input
id="password"
type="password"
value={password}
onChange={handlePasswordChange}
className="bg-[#F0F5FA] rounded-md w-full max-w-md h-10 text-gray-600 p-3 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter your password"
/>
<div className="flex justify-between w-full max-w-md mb-4">
<div className="flex items-center">
<input
type="checkbox"
id="remember-me"
className="mr-2"

checked={rememberMe}
onChange={handleRememberMeChange}
/>
<label htmlFor="remember-me" className="text-gray-700">
Remember me
</label>
</div>
<a href="#" className="text-[#FF7622] hover:underline">
Forgot password?
</a>
</div>
<div>
<button type='submit' className='uppercase font-bold rounded-xl text-[#ffff] bg-[#FF7622] w-40 h-11'>
Log In
</button>
</div>
<div className="pt-4 text-center">
<p className="text-gray-700">
Don't have an account?{' '}
<a href="/signup" className="text-[#FF7622] hover:underline">
Sign Up
</a>
</p>
</div>
</form>
</div>
<div className="pt-4 text-center">
<p className="text-gray-700">
Don't have an account?{' '}
<a href="#" className="text-[#FF7622] hover:underline">
Sign Up
</a>
</p>
</div>
</form>
</div>
</div>
);
);
}

export default Login;
export default Login;
Loading