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

Updated settings page added all the details #370

Closed
wants to merge 2 commits into from
Closed

Updated settings page added all the details #370

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
60ad0a4
Updated settings page added all the details
PraveenUppar Oct 21, 2024
6fb99bb
Merge branch 'main' into Setting-page-update
PraveenUppar Oct 21, 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
256 changes: 242 additions & 14 deletions frontend/src/components/Settings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,252 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import backicon from '../assets/svg/backicon.svg';
const Settings = () => {
// SettingsPage.jsx
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import backicon from './path_to_back_icon_image'; // Ensure you have this image

const SettingsPage = () => {
const navigate = useNavigate();

// State for form inputs
const [profileDetails, setProfileDetails] = useState({
name: "John Doe",
email: "[email protected]",
phoneNumber: "+1234567890",
address: "123 Station Road, Yarthi City",
password: "",
confirmPassword: "",
});

const [generalSettings, setGeneralSettings] = useState({
language: "English",
theme: "Light",
});

const [notifications, setNotifications] = useState({
emailAlerts: true,
smsAlerts: false,
trainUpdates: true,
});

const [privacySettings, setPrivacySettings] = useState({
locationTracking: true,
profileVisibility: "Public",
});

// Handlers for input changes
const handleProfileChange = (e) => {
const { name, value } = e.target;
setProfileDetails({ ...profileDetails, [name]: value });
};

const handleGeneralChange = (e) => {
const { name, value } = e.target;
setGeneralSettings({ ...generalSettings, [name]: value });
};

const handleNotificationChange = (e) => {
const { name, checked } = e.target;
setNotifications({ ...notifications, [name]: checked });
};

const handlePrivacyChange = (e) => {
const { name, value } = e.target;
setPrivacySettings({ ...privacySettings, [name]: value });
};

// Navigate back to home page
const goToHome = () => {
navigate("/");
};

const HomeClick = () => {
navigate('/'); // Navigates to the home page
};
return (
<>
<button onClick={HomeClick} className='absolute left-0 top-2'>
<img src={backicon} alt="" className='h-[5vh]' />
<button onClick={goToHome} className="absolute left-0 top-2">
<img src={backicon} alt="Back" className="h-[5vh]" />
</button>

<div className="min-h-screen bg-gray-100 p-6 flex items-center justify-center">
<div className="max-w-4xl mx-auto bg-white shadow-md rounded-md p-8">
<h2 className="text-3xl font-semibold mb-6">Station Yarthi Settings</h2>

{/* Profile Details */}
<div className="mb-8">
<h3 className="text-xl font-semibold mb-4">Profile Details</h3>
<div className="space-y-4">
<div className="flex flex-col">
<label className="text-gray-700">Name</label>
<input
type="text"
name="name"
value={profileDetails.name}
onChange={handleProfileChange}
className="border border-gray-300 rounded-md p-2 mt-1"
/>
</div>

<div className="flex flex-col">
<label className="text-gray-700">Email</label>
<input
type="email"
name="email"
value={profileDetails.email}
onChange={handleProfileChange}
className="border border-gray-300 rounded-md p-2 mt-1"
/>
</div>

<div className="flex flex-col">
<label className="text-gray-700">Phone Number</label>
<input
type="tel"
name="phoneNumber"
value={profileDetails.phoneNumber}
onChange={handleProfileChange}
className="border border-gray-300 rounded-md p-2 mt-1"
/>
</div>

<div className="flex flex-col">
<label className="text-gray-700">Address</label>
<input
type="text"
name="address"
value={profileDetails.address}
onChange={handleProfileChange}
className="border border-gray-300 rounded-md p-2 mt-1"
/>
</div>

<div className="flex flex-col">
<label className="text-gray-700">Change Password</label>
<input
type="password"
name="password"
value={profileDetails.password}
onChange={handleProfileChange}
placeholder="New password"
className="border border-gray-300 rounded-md p-2 mt-1"
/>
</div>

<div className="flex flex-col">
<label className="text-gray-700">Confirm New Password</label>
<input
type="password"
name="confirmPassword"
value={profileDetails.confirmPassword}
onChange={handleProfileChange}
placeholder="Confirm new password"
className="border border-gray-300 rounded-md p-2 mt-1"
/>
</div>
</div>
</div>

{/* General Settings */}
<div className="mb-8">
<h3 className="text-xl font-semibold mb-4">General Settings</h3>
<div className="space-y-4">
<div className="flex justify-between items-center">
<label className="text-gray-700">Language</label>
<select
name="language"
value={generalSettings.language}
onChange={handleGeneralChange}
className="block w-40 border border-gray-300 rounded-md p-2"
>
<option value="English">English</option>
<option value="Hindi">Hindi</option>
<option value="Spanish">Spanish</option>
</select>
</div>

<div className="flex justify-between items-center">
<label className="text-gray-700">Theme</label>
<select
name="theme"
value={generalSettings.theme}
onChange={handleGeneralChange}
className="block w-40 border border-gray-300 rounded-md p-2"
>
<option value="Light">Light</option>
<option value="Dark">Dark</option>
</select>
</div>
</div>
</div>

{/* Notifications */}
<div className="mb-8">
<h3 className="text-xl font-semibold mb-4">Notification Settings</h3>
<div className="space-y-4">
<div className="flex justify-between items-center">
<label className="text-gray-700">Email Alerts</label>
<input
type="checkbox"
name="emailAlerts"
checked={notifications.emailAlerts}
onChange={handleNotificationChange}
className="h-5 w-5"
/>
</div>

<div className="flex justify-between items-center">
<label className="text-gray-700">SMS Alerts</label>
<input
type="checkbox"
name="smsAlerts"
checked={notifications.smsAlerts}
onChange={handleNotificationChange}
className="h-5 w-5"
/>
</div>

<div className="flex justify-between items-center">
<label className="text-gray-700">Train Updates</label>
<input
type="checkbox"
name="trainUpdates"
checked={notifications.trainUpdates}
onChange={handleNotificationChange}
className="h-5 w-5"
/>
</div>
</div>
</div>

{/* Privacy Settings */}
<div className="mb-8">
<h3 className="text-xl font-semibold mb-4">Privacy Settings</h3>
<div className="space-y-4">
<div className="flex justify-between items-center">
<label className="text-gray-700">Location Tracking</label>
<input
type="checkbox"
name="locationTracking"
checked={privacySettings.locationTracking}
onChange={handlePrivacyChange}
className="h-5 w-5"
/>
</div>
</div>
</div>

{/* Save and Back to Home Button */}
<div className="flex justify-between">
<button
onClick={goToHome}
className="bg-gray-500 text-white px-6 py-2 rounded-md hover:bg-gray-600"
>
Back to Home
</button>
<button className="bg-blue-500 text-white px-6 py-2 rounded-md hover:bg-blue-600">
Save Changes
</button>
<div className="flex items-center justify-center min-h-screen bg-blue-100">
<h1 className="text-3xl font-semibold text-blue-900">Settings Page</h1>

</div>
</div>
</div>
</div>
</>
);
};

export default Settings;
export default SettingsPage;