desgin implementation
This commit is contained in:
parent
d83b15b926
commit
7a8a31c482
24
db.json
24
db.json
@ -165,5 +165,27 @@
|
||||
"city_id": "",
|
||||
"mobile": "07559393995"
|
||||
}
|
||||
],
|
||||
"cities": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "New York"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "Los Angeles"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "Chicago"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"name": "Houston"
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"name": "Phoenix"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: 'http://localhost:5000'
|
||||
baseURL: 'http://localhost:5000',
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
export default axiosInstance;
|
||||
@ -5,10 +5,8 @@ body, html {
|
||||
padding: 0;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
background-color: #ffffff;
|
||||
/* color: #fff; */
|
||||
}
|
||||
|
||||
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -16,34 +14,15 @@ body, html {
|
||||
min-height: 100vh;
|
||||
padding: 4rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
/* background-color: #222; */
|
||||
border-radius: 8px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 0 10px #d1d5db;
|
||||
width: 310.4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 28px;
|
||||
column-gap: 28px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -58,44 +37,20 @@ p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* input[type="email"],
|
||||
input[type="password"] {
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #B3B3B3;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
background-color: #09090B;
|
||||
color: #fff;
|
||||
background-color: #e8e8e8;
|
||||
color: #4b5563;
|
||||
box-sizing: border-box;
|
||||
} */
|
||||
|
||||
.login-page input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #B3B3B3; /* Darker border */
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
background-color: #e8e8e8; /* Dark background for input fields */
|
||||
color: #4b5563; /* White text for input fields */
|
||||
}
|
||||
|
||||
input[type="email"]:focus,
|
||||
input[type="password"]:focus {
|
||||
border-color: #4b5563;
|
||||
input:focus {
|
||||
border-color: #0e355b;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -112,10 +67,6 @@ input[type="password"]:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* .forgot-password-container a:hover {
|
||||
text-decoration: underline;
|
||||
} */
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
padding: 15px 30px;
|
||||
@ -130,15 +81,3 @@ input[type="password"]:focus {
|
||||
.login-button:hover {
|
||||
background-color: #154676;
|
||||
}
|
||||
|
||||
.login-page input:focus {
|
||||
border-color: #0e355b; /* Orange border on focus */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.login-page a {
|
||||
color: #4b5563;
|
||||
text-decoration: none;
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axiosInstance from '../../api/axiosConfig';
|
||||
import './LoginPage.css';
|
||||
import BrookslogoIcon from '../../assets/thob-data/BrookslogoIcon.svg';
|
||||
|
||||
const LoginPage = () => {
|
||||
@ -19,7 +18,7 @@ const LoginPage = () => {
|
||||
const user = response.data.find(user => user.email === email && user.password === password);
|
||||
|
||||
if (user) {
|
||||
localStorage.setItem("loggedInUser", JSON.stringify(user))
|
||||
localStorage.setItem("loggedInUser", JSON.stringify(user));
|
||||
if (user.role === 'admin') {
|
||||
navigate('/admin');
|
||||
} else if (user.role === 'employee') {
|
||||
@ -42,43 +41,42 @@ const LoginPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-row min-h-screen justify-center items-center">
|
||||
<div className="login-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4">
|
||||
<div className="w-full">
|
||||
<img src={BrookslogoIcon} alt="Logo" className="logo" />
|
||||
<h1>welcome back</h1>
|
||||
<p>be among the first to experience 3D magic! register for private alpha.</p>
|
||||
{error && <p className="error-message">{error}</p>}
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<label htmlFor="email" className="block"></label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="john123@domain.com"
|
||||
required
|
||||
className="input-field"
|
||||
/>
|
||||
<label htmlFor="password" className="block"></label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
className="input-field"
|
||||
/>
|
||||
<div className="forgot-password-container">
|
||||
<a href="/reset-password">forgot password?</a>
|
||||
</div>
|
||||
<button type="submit" className="login-button">
|
||||
login
|
||||
</button>
|
||||
</form>
|
||||
<div className="flex flex-col min-h-screen bg-secondary p-4 relative">
|
||||
<img src={BrookslogoIcon} alt="Logo" className="absolute top-6 left-6 w-24" />
|
||||
<div className="flex flex-col items-center justify-center flex-1 px-4 py-6">
|
||||
<h1 className="text-primary-text text-2xl font-bold mb-4">welcome back</h1>
|
||||
<p className="text-secondary-text text-center mb-6">be among the first to experience 3D magic! Register for private alpha.</p>
|
||||
{error && <p className="text-red-500 text-center mb-4">{error}</p>}
|
||||
<div className="flex flex-col space-y-4 w-full max-w-sm">
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="john123@domain.com"
|
||||
required
|
||||
className="w-full p-3 border border-gray-300 rounded-md text-gray-700 focus:border-primary focus:outline-none"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
required
|
||||
className="w-full p-3 border border-gray-300 rounded-md text-gray-700 focus:border-primary focus:outline-none"
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<a href="/reset-password" className="text-primary-text">forgot password?</a>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
className="w-full py-3 bg-primary text-button-text rounded-md text-lg font-semibold hover:bg-primary-dark"
|
||||
>
|
||||
login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,13 +21,12 @@ const CLASSES = {
|
||||
imagePreview: 'bg-gray-300 w-24 h-24 rounded-full mx-auto overflow-hidden',
|
||||
noImage: 'w-full h-full flex items-center justify-center text-gray-500',
|
||||
hiddenInput: 'hidden',
|
||||
uploadButton:
|
||||
'absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full',
|
||||
uploadButton: 'absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full',
|
||||
linkTitle: 'text-lg font-semibold',
|
||||
formSection: 'md:col-span-2 space-y-4',
|
||||
formGroup: 'block text-gray-800 font-medium',
|
||||
formInput: 'w-full p-2 border-b border-gray-400 focus:border-gray-700',
|
||||
formSelect: 'w-full p-2 border-b border-gray-400 focus:border-gray-700',
|
||||
formGroup: ' text-gray-800 font-medium',
|
||||
formInput: ' p-2 border-b border-gray-400 focus:border-gray-700',
|
||||
formSelect: ' p-2 border-b border-gray-400 focus:border-gray-700',
|
||||
submitButton: 'bg-[#0e355b] text-white py-2 px-4 rounded-md',
|
||||
};
|
||||
|
||||
@ -40,7 +39,6 @@ const AddCustomer = () => {
|
||||
gender: '',
|
||||
email: '',
|
||||
mobile: '',
|
||||
image: null,
|
||||
address: {
|
||||
address_line_1: '',
|
||||
address_line_2: '',
|
||||
@ -48,9 +46,10 @@ const AddCustomer = () => {
|
||||
pincode: '',
|
||||
city_id: '',
|
||||
},
|
||||
image: null,
|
||||
});
|
||||
|
||||
const [cities, setCities] = useState([]);
|
||||
const [cities, setCities] = useState([]);
|
||||
const [imagePreview, setImagePreview] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
@ -63,7 +62,7 @@ const AddCustomer = () => {
|
||||
console.error('Error: Data is not an array', response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching cities:', error.response || error.message);
|
||||
console.error('Error fetching cities:', error.response ? error.response.data : error.message);
|
||||
}
|
||||
};
|
||||
|
||||
@ -78,17 +77,6 @@ const AddCustomer = () => {
|
||||
}));
|
||||
};
|
||||
|
||||
const handleAddressChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setCustomerData((prevData) => ({
|
||||
...prevData,
|
||||
address: {
|
||||
...prevData.address,
|
||||
[name]: value,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
const handleImageChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
@ -104,18 +92,12 @@ const AddCustomer = () => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData();
|
||||
Object.keys(customerData).forEach((key) => {
|
||||
if (key === 'address') {
|
||||
Object.keys(customerData.address).forEach((addrKey) => {
|
||||
formData.append(`address[${addrKey}]`, customerData.address[addrKey]);
|
||||
});
|
||||
} else {
|
||||
formData.append(key, customerData[key]);
|
||||
}
|
||||
formData.append(key, customerData[key]);
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await axiosInstance.post(
|
||||
'http://localhost:5000/customers',
|
||||
'/customers',
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
@ -123,7 +105,6 @@ const AddCustomer = () => {
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log('Raw response:', response);
|
||||
console.log('Customer added successfully:', response.data);
|
||||
navigate('/customers');
|
||||
} catch (error) {
|
||||
@ -176,7 +157,7 @@ const AddCustomer = () => {
|
||||
}
|
||||
className={CLASSES.uploadButton}
|
||||
>
|
||||
Upload
|
||||
upload
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -229,9 +210,7 @@ const AddCustomer = () => {
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formSelect}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Gender
|
||||
</option>
|
||||
<option value="" disabled>Select Gender</option>
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
<option value="other">Other</option>
|
||||
@ -252,8 +231,8 @@ const AddCustomer = () => {
|
||||
<input
|
||||
type="text"
|
||||
name="address_line_1"
|
||||
value={customerData.address.address_line_1}
|
||||
onChange={handleAddressChange}
|
||||
value={customerData.address_line_1}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
@ -262,8 +241,8 @@ const AddCustomer = () => {
|
||||
<input
|
||||
type="text"
|
||||
name="address_line_2"
|
||||
value={customerData.address.address_line_2}
|
||||
onChange={handleAddressChange}
|
||||
value={customerData.address_line_2}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
@ -272,8 +251,8 @@ const AddCustomer = () => {
|
||||
<input
|
||||
type="text"
|
||||
name="nearby_landmark"
|
||||
value={customerData.address.nearby_landmark}
|
||||
onChange={handleAddressChange}
|
||||
value={customerData.nearby_landmark}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
@ -282,8 +261,8 @@ const AddCustomer = () => {
|
||||
<input
|
||||
type="text"
|
||||
name="pincode"
|
||||
value={customerData.address.pincode}
|
||||
onChange={handleAddressChange}
|
||||
value={customerData.pincode}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
@ -291,36 +270,31 @@ const AddCustomer = () => {
|
||||
<label className={CLASSES.formGroup}>City:</label>
|
||||
<select
|
||||
name="city_id"
|
||||
value={customerData.address.city_id}
|
||||
onChange={handleAddressChange}
|
||||
value={customerData.city_id}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formSelect}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select City
|
||||
</option>
|
||||
{Array.isArray(cities) &&
|
||||
cities.map((city) => (
|
||||
<option key={city.id} value={city.id}>
|
||||
{city.name}
|
||||
</option>
|
||||
))}
|
||||
<option value="" disabled>Select City</option>
|
||||
{cities.map((city) => (
|
||||
<option key={city.id} value={city.id}>
|
||||
{city.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={CLASSES.formGroup}>Mobile:</label>
|
||||
<input
|
||||
type="tel"
|
||||
type="text"
|
||||
name="mobile"
|
||||
value={customerData.mobile}
|
||||
onChange={handleInputChange}
|
||||
className={CLASSES.formInput}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button type="submit" className={CLASSES.submitButton}>
|
||||
Add Customer
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" className={CLASSES.submitButton}>
|
||||
Add Customer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,7 @@ const EmployeeDashboard = () => {
|
||||
<div className={classNames.content}>
|
||||
<header className={classNames.header}>
|
||||
<div className="flex items-center">
|
||||
<h1 className={classNames.headerTitle}>Home</h1>
|
||||
<h1 className={classNames.headerTitle}>employee dashboard</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p className={classNames.welcomeText}>welcome back, {userName}</p>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// server.js
|
||||
const express = require('express');
|
||||
const bodyParser = require('body-parser');
|
||||
const nodemailer = require('nodemailer');
|
||||
@ -10,11 +9,26 @@ const port = 5000;
|
||||
app.use(bodyParser.json());
|
||||
|
||||
let users = [
|
||||
// Example users
|
||||
{ email: 'admin@example.com', password: 'admin123', role: 'admin' },
|
||||
{ email: 'employee@example.com', password: 'employee123', role: 'employee' },
|
||||
];
|
||||
|
||||
// Endpoint to handle login requests
|
||||
app.post('/auth/login', (req, res) => {
|
||||
const { email, password } = req.body;
|
||||
const user = users.find(user => user.email === email && user.password === password);
|
||||
|
||||
if (!user) {
|
||||
return res.status(401).json({ success: false, message: 'Invalid email or password' });
|
||||
}
|
||||
|
||||
res.status(200).json({
|
||||
success: true,
|
||||
message: 'Login successful',
|
||||
role: user.role,
|
||||
});
|
||||
});
|
||||
|
||||
// Endpoint to handle password reset requests
|
||||
app.post('/auth/forgot-password', (req, res) => {
|
||||
const { email } = req.body;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
'./src/**/*.{html,js,jsx}',
|
||||
@ -13,6 +14,7 @@ module.exports = {
|
||||
'secondary-text': '#4b5563',
|
||||
'button-text': '#d1d5db',
|
||||
},
|
||||
|
||||
fontFamily: {
|
||||
sans: ['"Nunito Sans"', 'sans-serif'],
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user