Fixed Upgrade button and Chatbot intro
This commit is contained in:
parent
bed6b92906
commit
988d8b860e
@ -73,21 +73,32 @@ app.use((req, res, next) => {
|
||||
|
||||
// Route for user registration
|
||||
app.post('/api/register', async (req, res) => {
|
||||
const { userId, username, password } = req.body;
|
||||
const {
|
||||
userId,
|
||||
username,
|
||||
password,
|
||||
firstname,
|
||||
lastname,
|
||||
email,
|
||||
zipcode,
|
||||
state,
|
||||
area
|
||||
} = req.body;
|
||||
|
||||
if (!userId || !username || !password) {
|
||||
// Validate all required fields
|
||||
if (!userId || !username || !password || !firstname || !lastname || !email || !zipcode || !state || !area) {
|
||||
return res.status(400).json({ error: 'All fields are required' });
|
||||
}
|
||||
|
||||
try {
|
||||
const hashedPassword = await bcrypt.hash(password, 10); // Hash the password
|
||||
const hashedPassword = await bcrypt.hash(password, 10);
|
||||
|
||||
// Step 1: Insert into user_auth
|
||||
// Insert into user_auth
|
||||
const authQuery = `
|
||||
INSERT INTO user_auth (username, hashed_password)
|
||||
VALUES (?, ?)
|
||||
INSERT INTO user_auth (user_id, username, hashed_password)
|
||||
VALUES (?, ?, ?)
|
||||
`;
|
||||
db.run(authQuery, [username, hashedPassword], function (err) {
|
||||
db.run(authQuery, [userId, username, hashedPassword], function (err) {
|
||||
if (err) {
|
||||
console.error('Error inserting into user_auth:', err.message);
|
||||
if (err.message.includes('UNIQUE constraint failed')) {
|
||||
@ -96,21 +107,18 @@ app.post('/api/register', async (req, res) => {
|
||||
return res.status(500).json({ error: 'Failed to register user' });
|
||||
}
|
||||
|
||||
const user_id = this.lastID; // Retrieve the auto-generated id from user_auth
|
||||
|
||||
// Step 2: Insert into user_profile
|
||||
// Insert into user_profile with actual provided values
|
||||
const profileQuery = `
|
||||
INSERT INTO user_profile (id, user_id, firstname, lastname, email, zipcode, state, area)
|
||||
VALUES (?, ?, NULL, NULL, NULL, NULL, NULL, NULL)
|
||||
INSERT INTO user_profile (user_id, firstname, lastname, email, zipcode, state, area)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?)
|
||||
`;
|
||||
db.run(profileQuery, [user_id, user_id], (err) => {
|
||||
db.run(profileQuery, [userId, firstname, lastname, email, zipcode, state, area], (err) => {
|
||||
if (err) {
|
||||
console.error('Error inserting into user_profile:', err.message);
|
||||
return res.status(500).json({ error: 'Failed to create user profile' });
|
||||
}
|
||||
|
||||
// Return success response after both inserts
|
||||
res.status(201).json({ message: 'User registered successfully', user_id });
|
||||
res.status(201).json({ message: 'User registered successfully', userId });
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
@ -119,6 +127,7 @@ app.post('/api/register', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Route to save or update user profile
|
||||
app.post('/api/user-profile', (req, res) => {
|
||||
const token = req.headers.authorization?.split(' ')[1];
|
||||
|
||||
@ -66,6 +66,38 @@ const authenticatePremiumUser = (req, res, next) => {
|
||||
}
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
PREMIUM UPGRADE ENDPOINT
|
||||
------------------------------------------------------------------ */
|
||||
app.post('/api/activate-premium', (req, res) => {
|
||||
const token = req.headers.authorization?.split(' ')[1];
|
||||
if (!token) {
|
||||
return res.status(401).json({ error: 'Authorization token is required' });
|
||||
}
|
||||
|
||||
let userId;
|
||||
try {
|
||||
const decoded = jwt.verify(token, SECRET_KEY);
|
||||
userId = decoded.userId;
|
||||
} catch (error) {
|
||||
return res.status(401).json({ error: 'Invalid or expired token' });
|
||||
}
|
||||
|
||||
const query = `
|
||||
UPDATE user_profile
|
||||
SET is_premium = 1, is_pro_premium = 1
|
||||
WHERE user_id = ?
|
||||
`;
|
||||
db.run(query, [userId], (err) => {
|
||||
if (err) {
|
||||
console.error('Error updating premium status:', err.message);
|
||||
return res.status(500).json({ error: 'Failed to activate premium' });
|
||||
}
|
||||
res.status(200).json({ message: 'Premium activated successfully' });
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* ------------------------------------------------------------------
|
||||
CAREER PROFILE ENDPOINTS
|
||||
------------------------------------------------------------------ */
|
||||
|
||||
118
src/App.js
118
src/App.js
@ -7,6 +7,7 @@ import {
|
||||
useLocation,
|
||||
Link,
|
||||
} from 'react-router-dom';
|
||||
import { Button } from './components/ui/button.js';
|
||||
|
||||
// Import all components
|
||||
import PremiumRoute from './components/PremiumRoute.js';
|
||||
@ -104,158 +105,104 @@ function App() {
|
||||
AptivaAI - Career Guidance Platform (beta)
|
||||
</h1>
|
||||
|
||||
{/* Navigation Menu */}
|
||||
{isAuthenticated && (
|
||||
<nav>
|
||||
<ul className="flex space-x-4">
|
||||
{/* Free sections */}
|
||||
<li>
|
||||
<Link
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
to="/getting-started"
|
||||
>
|
||||
<Link className="text-blue-600 hover:text-blue-800" to="/getting-started">
|
||||
Getting Started
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
to="/interest-inventory"
|
||||
>
|
||||
<Link className="text-blue-600 hover:text-blue-800" to="/interest-inventory">
|
||||
Interest Inventory
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
to="/dashboard"
|
||||
>
|
||||
<Link className="text-blue-600 hover:text-blue-800" to="/dashboard">
|
||||
Dashboard
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
to="/profile"
|
||||
>
|
||||
<Link className="text-blue-600 hover:text-blue-800" to="/profile">
|
||||
Profile
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{/* Premium sections (still checking only user?.is_premium for these) */}
|
||||
{/* Premium sections */}
|
||||
<li>
|
||||
{user?.is_premium ? (
|
||||
<Link
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
to="/milestone-tracker"
|
||||
>
|
||||
<Link className="text-blue-600 hover:text-blue-800" to="/milestone-tracker">
|
||||
Career Planner
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-gray-400 cursor-not-allowed">
|
||||
Milestone Tracker{' '}
|
||||
<span className="text-green-600">
|
||||
(Premium Subscribers Only)
|
||||
</span>
|
||||
Career/Financial Planner{' '}
|
||||
<span className="text-green-600">(Premium)</span>
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
{user?.is_premium ? (
|
||||
<Link
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
to="/financial-profile"
|
||||
>
|
||||
<Link className="text-blue-600 hover:text-blue-800" to="/financial-profile">
|
||||
Financial Profile
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-gray-400 cursor-not-allowed">
|
||||
Financial Profile{' '}
|
||||
<span className="text-green-600">
|
||||
(Premium Subscribers Only)
|
||||
</span>
|
||||
<span className="text-green-600">(Premium)</span>
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
{user?.is_premium ? (
|
||||
<Link
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
to="/multi-scenario"
|
||||
>
|
||||
<Link className="text-blue-600 hover:text-blue-800" to="/multi-scenario">
|
||||
Multi Scenario
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-gray-400 cursor-not-allowed">
|
||||
Multi Scenario{' '}
|
||||
<span className="text-green-600">
|
||||
(Premium Subscribers Only)
|
||||
</span>
|
||||
Compare Career/Financial Scenarios{' '}
|
||||
<span className="text-green-600">(Premium)</span>
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
{user?.is_premium ? (
|
||||
<Link
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
to="/premium-onboarding"
|
||||
>
|
||||
Premium Onboarding
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-gray-400 cursor-not-allowed">
|
||||
Premium Onboarding{' '}
|
||||
<span className="text-green-600">
|
||||
(Premium Subscribers Only)
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
|
||||
{/* 3) A new link for Resume Optimizer that checks canAccessPremium */}
|
||||
<li>
|
||||
{canAccessPremium ? (
|
||||
<Link
|
||||
className="text-blue-600 hover:text-blue-800"
|
||||
to="/resume-optimizer"
|
||||
>
|
||||
<Link className="text-blue-600 hover:text-blue-800" to="/resume-optimizer">
|
||||
Resume Optimizer
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-gray-400 cursor-not-allowed">
|
||||
Resume Optimizer{' '}
|
||||
<span className="text-green-600">
|
||||
(Premium or Pro Only)
|
||||
</span>
|
||||
<span className="text-green-600">(Premium)</span>
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
|
||||
{/* Logout */}
|
||||
<li>
|
||||
<button
|
||||
className="text-red-600 hover:text-red-800 bg-transparent border-none"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* "Upgrade to Premium" button if not premium/pro and on a free path */}
|
||||
{showPremiumCTA && isAuthenticated && !canAccessPremium && (
|
||||
{/* Grouped Logout and Upgrade buttons */}
|
||||
{isAuthenticated && (
|
||||
<div className="flex items-center space-x-4">
|
||||
<button
|
||||
className="rounded bg-blue-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
|
||||
className="text-red-600 hover:text-red-800 bg-transparent border-none"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
|
||||
{showPremiumCTA && !canAccessPremium && (
|
||||
<Button
|
||||
className="bg-green-600 hover:bg-green-700 max-w-fit text-center"
|
||||
onClick={() => navigate('/paywall')}
|
||||
>
|
||||
Upgrade to Premium
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
@ -319,7 +266,7 @@ function App() {
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 4) The new Resume Optimizer route */}
|
||||
{/* Resume Optimizer route */}
|
||||
<Route
|
||||
path="/resume-optimizer"
|
||||
element={
|
||||
@ -340,6 +287,7 @@ function App() {
|
||||
<SessionExpiredHandler />
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -7,7 +7,7 @@ const Chatbot = ({ context }) => {
|
||||
{
|
||||
role: "assistant",
|
||||
content:
|
||||
"Hi! I’m here to help you with career suggestions, ROI analysis, and any questions you have about your career. How can I assist you today?",
|
||||
"Hi! I’m here to help you with suggestions, analyzing career options, and any questions you have about your career. How can I assist you today?",
|
||||
},
|
||||
]);
|
||||
const [input, setInput] = useState("");
|
||||
|
||||
@ -1,19 +1,38 @@
|
||||
import React from 'react';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { Button } from './ui/button.js';
|
||||
|
||||
const Paywall = () => {
|
||||
const navigate = useNavigate();
|
||||
const { state } = useLocation();
|
||||
// Extract the selectedCareer from location state
|
||||
const { selectedCareer } = state || {};
|
||||
|
||||
const handleSubscribe = () => {
|
||||
// Once the user subscribes, navigate to MilestoneTracker
|
||||
navigate('/PremiumOnboarding', {
|
||||
state: {
|
||||
selectedCareer,
|
||||
},
|
||||
});
|
||||
const handleSubscribe = async () => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
navigate('/signin');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/activate-premium', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
navigate('/PremiumOnboarding', { state: { selectedCareer } });
|
||||
} else if (response.status === 401) {
|
||||
navigate('/GettingStarted', { state: { selectedCareer } });
|
||||
} else {
|
||||
console.error('Failed to activate premium:', await response.text());
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error activating premium:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@ -25,8 +44,14 @@ const Paywall = () => {
|
||||
<li>✅ Detailed College Guidance & Analysis</li>
|
||||
</ul>
|
||||
|
||||
<button onClick={handleSubscribe}>Subscribe Now</button>
|
||||
<button onClick={() => navigate(-1)}>Cancel / Go Back</button>
|
||||
<Button
|
||||
onClick={handleSubscribe}
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
Subscribe Now
|
||||
</Button>
|
||||
|
||||
<Button onClick={() => navigate(-1)}>Cancel / Go Back</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -434,7 +434,7 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Annual Financial Aid</label>
|
||||
<label className="block font-medium">(Estimated) Annual Financial Aid</label>
|
||||
<input
|
||||
type="number"
|
||||
name="annual_financial_aid"
|
||||
@ -459,17 +459,6 @@ function CollegeOnboarding({ nextStep, prevStep, data, setData, careerPathId })
|
||||
|
||||
{college_enrollment_status === 'currently_enrolled' && (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Tuition Paid</label>
|
||||
<input
|
||||
type="number"
|
||||
name="tuition_paid"
|
||||
value={tuition_paid}
|
||||
onChange={handleParentFieldChange}
|
||||
placeholder="Already paid"
|
||||
className="w-full border rounded p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block font-medium">Hours Completed</label>
|
||||
|
||||
@ -1,18 +1,82 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Button } from './ui/button.js';
|
||||
|
||||
function SignUp() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [firstname, setFirstname] = useState('');
|
||||
const [lastname, setLastname] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [zipcode, setZipcode] = useState('');
|
||||
const [state, setState] = useState('');
|
||||
const [area, setArea] = useState('');
|
||||
const [areas, setAreas] = useState([]);
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const handleSignUp = async (event) => {
|
||||
event.preventDefault();
|
||||
const states = [
|
||||
{ name: 'Alabama', code: 'AL' }, { name: 'Alaska', code: 'AK' }, { name: 'Arizona', code: 'AZ' },
|
||||
{ name: 'Arkansas', code: 'AR' }, { name: 'California', code: 'CA' }, { name: 'Colorado', code: 'CO' },
|
||||
{ name: 'Connecticut', code: 'CT' }, { name: 'Delaware', code: 'DE' }, { name: 'District of Columbia', code: 'DC' },
|
||||
{ name: 'Florida', code: 'FL' }, { name: 'Georgia', code: 'GA' }, { name: 'Hawaii', code: 'HI' },
|
||||
{ name: 'Idaho', code: 'ID' }, { name: 'Illinois', code: 'IL' }, { name: 'Indiana', code: 'IN' },
|
||||
{ name: 'Iowa', code: 'IA' }, { name: 'Kansas', code: 'KS' }, { name: 'Kentucky', code: 'KY' },
|
||||
{ name: 'Louisiana', code: 'LA' }, { name: 'Maine', code: 'ME' }, { name: 'Maryland', code: 'MD' },
|
||||
{ name: 'Massachusetts', code: 'MA' }, { name: 'Michigan', code: 'MI' }, { name: 'Minnesota', code: 'MN' },
|
||||
{ name: 'Mississippi', code: 'MS' }, { name: 'Missouri', code: 'MO' }, { name: 'Montana', code: 'MT' },
|
||||
{ name: 'Nebraska', code: 'NE' }, { name: 'Nevada', code: 'NV' }, { name: 'New Hampshire', code: 'NH' },
|
||||
{ name: 'New Jersey', code: 'NJ' }, { name: 'New Mexico', code: 'NM' }, { name: 'New York', code: 'NY' },
|
||||
{ name: 'North Carolina', code: 'NC' }, { name: 'North Dakota', code: 'ND' }, { name: 'Ohio', code: 'OH' },
|
||||
{ name: 'Oklahoma', code: 'OK' }, { name: 'Oregon', code: 'OR' }, { name: 'Pennsylvania', code: 'PA' },
|
||||
{ name: 'Rhode Island', code: 'RI' }, { name: 'South Carolina', code: 'SC' }, { name: 'South Dakota', code: 'SD' },
|
||||
{ name: 'Tennessee', code: 'TN' }, { name: 'Texas', code: 'TX' }, { name: 'Utah', code: 'UT' },
|
||||
{ name: 'Vermont', code: 'VT' }, { name: 'Virginia', code: 'VA' }, { name: 'Washington', code: 'WA' },
|
||||
{ name: 'West Virginia', code: 'WV' }, { name: 'Wisconsin', code: 'WI' }, { name: 'Wyoming', code: 'WY' },
|
||||
];
|
||||
|
||||
if (!username || !password) {
|
||||
setError('Please enter a username and password');
|
||||
useEffect(() => {
|
||||
const fetchAreas = async () => {
|
||||
if (!state) {
|
||||
setAreas([]);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await fetch(`/api/areas?state=${state}`);
|
||||
const data = await res.json();
|
||||
setAreas(data.areas || []);
|
||||
} catch (err) {
|
||||
console.error('Error fetching areas:', err);
|
||||
setAreas([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAreas();
|
||||
}, [state]);
|
||||
|
||||
const handleSignUp = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
|
||||
const zipRegex = /^\d{5}$/;
|
||||
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;
|
||||
|
||||
if (!username || !password || !firstname || !lastname || !email || !zipcode || !state || !area) {
|
||||
setError('All fields are required.');
|
||||
return;
|
||||
}
|
||||
if (!emailRegex.test(email)) {
|
||||
setError('Enter a valid email address.');
|
||||
return;
|
||||
}
|
||||
if (!zipRegex.test(zipcode)) {
|
||||
setError('ZIP code must be exactly 5 digits.');
|
||||
return;
|
||||
}
|
||||
if (!passwordRegex.test(password)) {
|
||||
setError('Password must include at least 8 characters, one uppercase, one lowercase, one number, and one special character.');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -21,71 +85,57 @@ function SignUp() {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
userId: Math.floor(Math.random() * 10000000), // Temporary ID logic
|
||||
username,
|
||||
password,
|
||||
userId: Math.floor(Math.random() * 1000000000),
|
||||
username, password, firstname, lastname, email, zipcode, state, area,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSuccess(true);
|
||||
console.log('User registered successfully');
|
||||
// Redirect to GettingStarted after successful sign-up
|
||||
navigate('/getting-started');
|
||||
} else {
|
||||
const data = await response.json();
|
||||
setError(data.error || 'Failed to register user');
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setError(data.error || 'Registration failed. Please try again.');
|
||||
return;
|
||||
}
|
||||
|
||||
navigate('/getting-started');
|
||||
} catch (err) {
|
||||
console.error('Error during registration:', err.message);
|
||||
setError('An error occurred while registering. Please try again.');
|
||||
console.error(err);
|
||||
setError('An unexpected error occurred. Please try again later.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 p-4">
|
||||
<div className="w-full max-w-sm rounded-md bg-white p-6 shadow-md">
|
||||
<h1 className="mb-6 text-center text-2xl font-semibold">Sign Up</h1>
|
||||
<div className="flex min-h-screen items-center justify-center bg-gray-100 p-4">
|
||||
<div className="w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
|
||||
<h2 className="mb-4 text-2xl font-semibold text-center">Sign Up</h2>
|
||||
|
||||
{error && (
|
||||
<p className="mb-4 rounded bg-red-50 p-2 text-sm text-red-600">
|
||||
<div className="mb-4 p-2 text-sm text-red-600 bg-red-100 rounded">
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/*
|
||||
Success is briefly shown, but you navigate away immediately
|
||||
after a successful response. You may keep or remove this.
|
||||
*/}
|
||||
{success && (
|
||||
<p className="mb-4 rounded bg-green-50 p-2 text-sm text-green-600">
|
||||
Registration successful!
|
||||
</p>
|
||||
)}
|
||||
<form onSubmit={handleSignUp} className="space-y-3">
|
||||
<input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
|
||||
<input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||
<input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="First Name" value={firstname} onChange={(e) => setFirstname(e.target.value)} />
|
||||
<input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Last Name" value={lastname} onChange={(e) => setLastname(e.target.value)} />
|
||||
<input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
|
||||
<input className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Zip Code" value={zipcode} onChange={(e) => setZipcode(e.target.value)} />
|
||||
|
||||
<form onSubmit={handleSignUp} className="flex flex-col space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full rounded border border-gray-300 p-2 focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<select className="w-full px-3 py-2 border border-gray-300 rounded-md" value={state} onChange={(e) => setState(e.target.value)}>
|
||||
<option value="">Select State</option>
|
||||
{states.map((s) => <option key={s.code} value={s.code}>{s.name}</option>)}
|
||||
</select>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full rounded border border-gray-300 p-2 focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<select className="w-full px-3 py-2 border border-gray-300 rounded-md" value={area} onChange={(e) => setArea(e.target.value)}>
|
||||
<option value="">Select Area</option>
|
||||
{areas.map((a, i) => <option key={i} value={a}>{a}</option>)}
|
||||
</select>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="mx-auto rounded bg-blue-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none"
|
||||
>
|
||||
<Button type="submit" className="w-full">
|
||||
Sign Up
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
BIN
user_profile.db
BIN
user_profile.db
Binary file not shown.
Loading…
Reference in New Issue
Block a user