Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement agent messaging and settings pages with new components and icons.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-18 23:58:25 +05:30
parent 48c4b564e5
commit c5ed8fb1aa
28 changed files with 1703 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/app/(agent)/agent/settings/password/page.tsx Normal file
View File

@@ -0,0 +1,165 @@
'use client';
import { useState } from 'react';
import { SettingsSidebar } from '../component/SettingsSidebar';
export default function PasswordSecurityPage() {
const [formData, setFormData] = useState({
currentPassword: '',
newPassword: '',
confirmPassword: '',
});
const [showPasswords, setShowPasswords] = useState({
current: false,
new: false,
confirm: false,
});
const handleChange = (field: string, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const toggleShowPassword = (field: 'current' | 'new' | 'confirm') => {
setShowPasswords((prev) => ({ ...prev, [field]: !prev[field] }));
};
const handleSave = () => {
if (formData.newPassword !== formData.confirmPassword) {
alert('Passwords do not match');
return;
}
console.log('Updating password');
};
return (
<div className="flex flex-col lg:flex-row gap-6">
{/* Left Sidebar */}
<SettingsSidebar />
{/* Main Content */}
<div className="flex-1">
{/* Header Card */}
<div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
<h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
Password Security
</h1>
</div>
{/* Password Form */}
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6">
<div className="mb-6">
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
Change Password
</h2>
<p className="font-serif text-[12px] text-[#00293D]/60">
Ensure your account is using a strong password to stay secure
</p>
</div>
{/* Form Fields */}
<div className="space-y-6 max-w-md">
{/* Current Password */}
<div>
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
Current Password
</label>
<div className="relative">
<input
type={showPasswords.current ? 'text' : 'password'}
value={formData.currentPassword}
onChange={(e) => handleChange('currentPassword', e.target.value)}
placeholder="Enter current password"
className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
/>
<button
type="button"
onClick={() => toggleShowPassword('current')}
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
>
{showPasswords.current ? '🙈' : '👁️'}
</button>
</div>
</div>
{/* New Password */}
<div>
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
New Password
</label>
<div className="relative">
<input
type={showPasswords.new ? 'text' : 'password'}
value={formData.newPassword}
onChange={(e) => handleChange('newPassword', e.target.value)}
placeholder="Enter new password"
className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
/>
<button
type="button"
onClick={() => toggleShowPassword('new')}
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
>
{showPasswords.new ? '🙈' : '👁️'}
</button>
</div>
<p className="text-[11px] text-[#00293D]/50 font-serif mt-1">
Minimum 8 characters with at least one uppercase, lowercase, and number
</p>
</div>
{/* Confirm Password */}
<div>
<label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
Confirm New Password
</label>
<div className="relative">
<input
type={showPasswords.confirm ? 'text' : 'password'}
value={formData.confirmPassword}
onChange={(e) => handleChange('confirmPassword', e.target.value)}
placeholder="Confirm new password"
className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
/>
<button
type="button"
onClick={() => toggleShowPassword('confirm')}
className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
>
{showPasswords.confirm ? '🙈' : '👁️'}
</button>
</div>
</div>
</div>
{/* Save Button */}
<div className="mt-8">
<button
onClick={handleSave}
className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
>
Update Password
</button>
</div>
</div>
{/* Two-Factor Authentication Section */}
<div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mt-4">
<div className="flex items-center justify-between">
<div>
<h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
Two-Factor Authentication
</h2>
<p className="font-serif text-[12px] text-[#00293D]/60">
Add an extra layer of security to your account
</p>
</div>
<button className="px-6 py-2 border border-[#e58625] text-[#e58625] rounded-[15px] font-serif text-[12px] hover:bg-[#e58625]/10 transition-colors">
Enable 2FA
</button>
</div>
</div>
</div>
</div>
);
}