Test

tournament-frontend/src/ChangePassword.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+
+const ChangePassword = ({ token }) => {
+  const [oldPassword, setOldPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage('');
+    try {
+      const res = await fetch('/api/player/change-password', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({ oldPassword, newPassword })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        setMessage('Password changed successfully!');
+        setOldPassword('');
+        setNewPassword('');
+      } else {
+        setMessage(data.error || 'Failed to change password');
+      }
+    } catch {
+      setMessage('Failed to change password');
+    }
+    setLoading(false);
+  };
+
+  if (!token) return <div>Please log in.</div>;
+
+  return (
+    <form onSubmit={handleSubmit} style={{ maxWidth: 400, margin: '2rem auto', textAlign: 'center' }}>
+      <div>
+        <input
+          type="password"
+          placeholder="Old Password"
+          value={oldPassword}
+          onChange={e => setOldPassword(e.target.value)}
+          style={{ padding: '0.5rem', width: '80%', marginBottom: 8 }}
+          required
+        />
+      </div>
+      <div>
+        <input
+          type="password"
+          placeholder="New Password"
+          value={newPassword}
+          onChange={e => setNewPassword(e.target.value)}
+          style={{ padding: '0.5rem', width: '80%', marginBottom: 8 }}
+          required
+        />
+      </div>
+      <button type="submit" disabled={loading}>{loading ? 'Changing...' : 'Change Password'}</button>
+      <div style={{ marginTop: 8, color: '#2563eb' }}>{message}</div>
+    </form>
+  );
+};
+
+export default ChangePassword;