Skip to content

Fixed : Redirect from settings page and other corrections. #209

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

Open
Apoorva-Rajput wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fixed : Redirect from settings page and other corrections. #209

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
100473a
Settings page improvment
Apoorva-Rajput May 18, 2024
a327b51
Merge branch 'main' into bug/redirect-from-settings-page
Apoorva-Rajput May 30, 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
221 changes: 138 additions & 83 deletions client/src/components/Settings/Setting.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useState } from 'react';

import React, { useState } from "react";
import Navbar from "../Navbar/Navbar";
import { SUPPORTED_LANGUAGE } from '../../utils/constants';
import {useDispatch, useSelector} from "react-redux"
import lang from '../../utils/langaugeConstant';
Expand All @@ -11,13 +13,14 @@ const Settings = () => {
const dispatch=useDispatch()

const [settings, setSettings] = useState({
theme: 'light',
email: '',
password: '',
theme: "light",
email: "",
password: "",
language: "English",
notifications: true,
privacy: 'Public',
accessibility: 'Default',
security: 'Standard',
privacy: "Public",
accessibility: "Default",
security: "Standard",
});

const handleLanguageChange=(e)=>{
Expand All @@ -26,15 +29,15 @@ const Settings = () => {

const handleInputChange = (event) => {
const { name, value } = event.target;
setSettings(prevSettings => ({
setSettings((prevSettings) => ({
...prevSettings,
[name]: value,
}));
};

const handleToggleChange = (event) => {
const { name, checked } = event.target;
setSettings(prevSettings => ({
setSettings((prevSettings) => ({
...prevSettings,
[name]: checked,
}));
Expand All @@ -43,109 +46,161 @@ const Settings = () => {
// Add more handler functions as needed

const containerStyle = {
maxWidth: '600px',
margin: '0 auto',
padding: '20px',
paddingBottom: '60px', // Adjust this value so the content doesn't overlap with the footer
border: '1px solid #ccc',
borderRadius: '8px',
backgroundColor: settings.theme === 'light' ? '#f9f9f9' : '#333',
color: settings.theme === 'light' ? '#333' : '#f9f9f9',
marginBottom: '100px', // This should be at least as tall as your footer to prevent overlap
maxWidth: "600px",
margin: "0 auto",
padding: "20px",
paddingBottom: "60px", // Adjust this value so the content doesn't overlap with the footer
border: "1px solid #ccc",
borderRadius: "8px",
backgroundColor: settings.theme === "light" ? "#f9f9f9" : "#333",
color: settings.theme === "#333",
marginBottom: "100px", // This should be at least as tall as your footer to prevent overlap
};

const titleStyle = {
textAlign: 'center',
textAlign: "center",
color: settings.theme === "light" ? "#333" : "#f9f9f9",
};

const itemStyle = {
marginBottom: '20px',
marginBottom: "20px",
};

const labelStyle = {
display: 'block',
marginBottom: '5px',
display: "block",
marginBottom: "5px",
color: settings.theme === "light" ? "#333" : "#f9f9f9",
};

const inputStyle = {
width: '100%',
padding: '10px',
border: '1px solid #ddd',
borderRadius: '4px',
width: "100%",
padding: "10px",
border: "1px solid #ddd",
borderRadius: "4px",
};

const selectStyle = {
...inputStyle,
};

const checkboxStyle = {
marginRight: '10px',
marginRight: "10px",
};

// Add more styles as needed


return (
<div className={`settings-container ${settings.theme}-theme`} style={containerStyle}>
<h1 style={titleStyle}>{lang[langKey].setting}</h1>
<form>
{/* Theme Selector */}
<div className="setting-item" style={itemStyle}>
<label htmlFor="theme" style={labelStyle}>{lang[langKey].theme}:</label>
<select name="theme" id="theme" value={settings.theme} onChange={handleInputChange} style={selectStyle}>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>

{/* Email Address */}
<div className="setting-item" style={itemStyle}>
<label htmlFor="email" style={labelStyle}>{lang[langKey].EmailAddress}:</label>
<input type="email" name="email" id="email" value={settings.email} onChange={handleInputChange} />
</div>

{/* Password */}
<div className="setting-item" style={itemStyle}>
<label htmlFor="password" style={labelStyle}>{lang[langKey].Password}:</label>
<input type="password" name="password" id="password" value={settings.password} onChange={handleInputChange} />
</div>

{/* Language */}
<div className="setting-item" style={itemStyle}>
<label htmlFor="language" style={labelStyle}>{lang[langKey].Language}:</label>
<select name="language" id="language" value={settings.language} onChange={handleLanguageChange}>
{
SUPPORTED_LANGUAGE.map((lang)=>(
<option key={lang.identifier} value={lang.identifier}>{lang.name}</option>
))
}
{/* Add more languages */}
</select>
</div>

{/* Notifications */}
<div className="setting-item">
<label htmlFor="notifications">{lang[langKey].Notifications}:</label>
<input type="checkbox" name="notifications" id="notifications" checked={settings.notifications} onChange={handleToggleChange} />
</div>

{/* Privacy */}
<div className="setting-item">
<label htmlFor="privacy">{lang[langKey].ProfilePrivacy}:</label>
<select name="privacy" id="privacy" value={settings.privacy} onChange={handleInputChange}>
<option value="Public">{lang[langKey].Public}</option>
<option value="Private">{lang[langKey].Private}</option>
</select>
</div>
<div>
<Navbar />
<div
className={`settings-container ${settings.theme}-theme`}
style={containerStyle}
>
<h1 style={titleStyle}>Settings</h1>
<form>
{/* Theme Selector */}
<div className="setting-item" style={itemStyle}>
<label htmlFor="theme" style={labelStyle}>
Theme:
</label>
<select
name="theme"
id="theme"
value={settings.theme}
onChange={handleInputChange}
style={selectStyle}
>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>

{/* Email Address */}
<div className="setting-item" style={itemStyle}>
<label htmlFor="email" style={labelStyle}>
Email Address:
</label>
<input
type="email"
name="email"
id="email"
value={settings.email}
onChange={handleInputChange}
/>
</div>

{/* Password */}
<div className="setting-item" style={itemStyle}>
<label htmlFor="password" style={labelStyle}>
Password:
</label>
<input
type="password"
name="password"
id="password"
value={settings.password}
onChange={handleInputChange}
/>
</div>

{/* Language */}
<div className="setting-item" style={itemStyle}>
<label htmlFor="language" style={labelStyle}>
Language:
</label>
<select
name="language"
id="language"
value={settings.language}
onChange={handleInputChange}
>
<option value="English">English</option>
<option value="Hindi">Hindi</option>
{/* Add more languages */}
</select>
</div>

{/* Notifications */}
<div className="setting-item">
<label htmlFor="notifications" style={labelStyle}>
Notifications:
</label>
<input
type="checkbox"
name="notifications"
id="notifications"
checked={settings.notifications}
onChange={handleToggleChange}
/>
</div>

{/* Privacy */}
<div className="setting-item">
<label htmlFor="privacy" style={labelStyle}>
Profile Privacy:
</label>
<select
name="privacy"
id="privacy"
value={settings.privacy}
onChange={handleInputChange}
>
<option value="Public">Public</option>
<option value="Private">Private</option>
</select>
</div>

{/* Accessibility */}
{/* <div className="setting-item">

{/* Accessibility */}
{/* <div className="setting-item">
<label htmlFor="accessibility">Accessibility:</label>
<select name="accessibility" id="accessibility" value={settings.accessibility} onChange={handleInputChange}>
</select>
</div> */}
</form>
</div>
)}
</div>
</div>
);
};

export default Settings;