fix: replace AccountPanel inline success banners with toasts
Missed in previous pass: "Profile updated!" and "Password changed!" banners now use addToast instead of inline layout-shifting divs.
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { useState, useEffect, useRef } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
import { useAuthStore } from '../../../stores/authStore';
|
import { useAuthStore } from '../../../stores/authStore';
|
||||||
|
import { useUIStore } from '../../../stores/uiStore';
|
||||||
import { useInstanceStore } from '../../../stores/instanceStore';
|
import { useInstanceStore } from '../../../stores/instanceStore';
|
||||||
import { Avatar } from '../../ui/Avatar';
|
import { Avatar } from '../../ui/Avatar';
|
||||||
import { ImageCropModal } from '../../ui/ImageCropModal';
|
import { ImageCropModal } from '../../ui/ImageCropModal';
|
||||||
@@ -35,8 +36,8 @@ export function AccountPanel() {
|
|||||||
const [bannerCropSrc, setBannerCropSrc] = useState<string | null>(null);
|
const [bannerCropSrc, setBannerCropSrc] = useState<string | null>(null);
|
||||||
const bannerInputRef = useRef<HTMLInputElement>(null);
|
const bannerInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const addToast = useUIStore((s) => s.addToast);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
const [success, setSuccess] = useState('');
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -63,7 +64,6 @@ export function AccountPanel() {
|
|||||||
const [newPassword, setNewPassword] = useState('');
|
const [newPassword, setNewPassword] = useState('');
|
||||||
const [confirmNewPassword, setConfirmNewPassword] = useState('');
|
const [confirmNewPassword, setConfirmNewPassword] = useState('');
|
||||||
const [passwordError, setPasswordError] = useState('');
|
const [passwordError, setPasswordError] = useState('');
|
||||||
const [passwordSuccess, setPasswordSuccess] = useState('');
|
|
||||||
const [passwordLoading, setPasswordLoading] = useState(false);
|
const [passwordLoading, setPasswordLoading] = useState(false);
|
||||||
const [passwordResults, setPasswordResults] = useState<FederationOpResult[] | null>(null);
|
const [passwordResults, setPasswordResults] = useState<FederationOpResult[] | null>(null);
|
||||||
const [showCurrentPassword, setShowCurrentPassword] = useState(false);
|
const [showCurrentPassword, setShowCurrentPassword] = useState(false);
|
||||||
@@ -184,7 +184,6 @@ export function AccountPanel() {
|
|||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
setError('');
|
setError('');
|
||||||
setSuccess('');
|
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
try {
|
try {
|
||||||
const updates: Record<string, string | undefined> = {};
|
const updates: Record<string, string | undefined> = {};
|
||||||
@@ -198,8 +197,7 @@ export function AccountPanel() {
|
|||||||
if (bannerFilename !== null) updates.banner = bannerFilename;
|
if (bannerFilename !== null) updates.banner = bannerFilename;
|
||||||
|
|
||||||
await updateProfile(updates as Parameters<typeof updateProfile>[0]);
|
await updateProfile(updates as Parameters<typeof updateProfile>[0]);
|
||||||
setSuccess('Profile updated!');
|
addToast('Profile updated', 'success', 2000);
|
||||||
setTimeout(() => setSuccess(''), 2000);
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err instanceof Error ? err.message : 'Failed to update profile');
|
setError(err instanceof Error ? err.message : 'Failed to update profile');
|
||||||
} finally {
|
} finally {
|
||||||
@@ -209,7 +207,6 @@ export function AccountPanel() {
|
|||||||
|
|
||||||
const handleChangePassword = async () => {
|
const handleChangePassword = async () => {
|
||||||
setPasswordError('');
|
setPasswordError('');
|
||||||
setPasswordSuccess('');
|
|
||||||
setPasswordResults(null);
|
setPasswordResults(null);
|
||||||
|
|
||||||
if (newPassword.length < 8) {
|
if (newPassword.length < 8) {
|
||||||
@@ -224,7 +221,7 @@ export function AccountPanel() {
|
|||||||
setPasswordLoading(true);
|
setPasswordLoading(true);
|
||||||
try {
|
try {
|
||||||
const results = await changePassword(currentPassword, newPassword);
|
const results = await changePassword(currentPassword, newPassword);
|
||||||
setPasswordSuccess('Password changed successfully!');
|
addToast('Password changed', 'success', 2000);
|
||||||
setCurrentPassword('');
|
setCurrentPassword('');
|
||||||
setNewPassword('');
|
setNewPassword('');
|
||||||
setConfirmNewPassword('');
|
setConfirmNewPassword('');
|
||||||
@@ -234,7 +231,6 @@ export function AccountPanel() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setPasswordSuccess('');
|
|
||||||
setPasswordResults(null);
|
setPasswordResults(null);
|
||||||
}, 5000);
|
}, 5000);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -658,9 +654,6 @@ export function AccountPanel() {
|
|||||||
{passwordError && (
|
{passwordError && (
|
||||||
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">{passwordError}</div>
|
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">{passwordError}</div>
|
||||||
)}
|
)}
|
||||||
{passwordSuccess && (
|
|
||||||
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-xs">{passwordSuccess}</div>
|
|
||||||
)}
|
|
||||||
{passwordResults && passwordResults.length > 0 && (
|
{passwordResults && passwordResults.length > 0 && (
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
{passwordResults.map(r => (
|
{passwordResults.map(r => (
|
||||||
@@ -705,9 +698,6 @@ export function AccountPanel() {
|
|||||||
{error && (
|
{error && (
|
||||||
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
|
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
|
||||||
)}
|
)}
|
||||||
{success && (
|
|
||||||
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">{success}</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{hasChanges && (
|
{hasChanges && (
|
||||||
<div className="sticky bottom-0 z-10 pointer-events-none">
|
<div className="sticky bottom-0 z-10 pointer-events-none">
|
||||||
|
|||||||
Reference in New Issue
Block a user