Merge pull request 'stage' (#3) from stage into main

Reviewed-on: #3

frontend/src/pages/Friends.jsx

@@ -198,7 +198,7 @@ export default function Friends() {
                     className="btn btn-primary btn-sm"
                     onClick={() => handleSendRequest(user.id)}
                     disabled={sending === user.id}
-                    style={{ flexShrink: 0 }}
+                    style={{ flexShrink: 0, width: 'auto' }}
                   >
                     {sending === user.id ? 'Sending...' : 'Add Friend'}
                   </button>
@@ -263,8 +263,8 @@ export default function Friends() {
                     >
                       {removing === friend.id ? 'Removing...' : 'Remove'}
                     </button>
-                    <div style={{ color: 'var(--primary)', whiteSpace: 'nowrap' }}>{friend.total_points} points</div>
                   </div>
+                  <div style={{ color: 'var(--primary)', whiteSpace: 'nowrap' }}>{friend.total_points} points</div>
                 </div>
               ))}
               {challengeFriends.length > 0 && (
@@ -296,8 +296,8 @@ export default function Friends() {
                         >
                           {sending === friend.id ? 'Sending...' : friend.friendship_status === 'pending' ? 'Pending' : 'Add Friend'}
                         </button>
-                        <div style={{ color: 'var(--primary)', whiteSpace: 'nowrap' }}>{friend.total_points} points</div>
                       </div>
+                      <div style={{ color: 'var(--primary)', whiteSpace: 'nowrap' }}>{friend.total_points} points</div>
                     </div>
                   ))}
                 </>

frontend/src/pages/Login.jsx

@@ -6,6 +6,7 @@ import { useAuth } from '../AuthContext';
 export default function Login() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const { login } = useAuth();
   const navigate = useNavigate();
@@ -42,13 +43,34 @@ export default function Login() {
           </div>
           <div className="form-group">
             <label>Password</label>
-            <input
+            <div style={{ position: 'relative' }}>
-              type="password"
+              <input
-              className="input"
+                type={showPassword ? 'text' : 'password'}
-              value={password}
+                className="input"
-              onChange={(e) => setPassword(e.target.value)}
+                value={password}
-              required
+                onChange={(e) => setPassword(e.target.value)}
-            />
+                required
+                style={{ paddingRight: '2.5rem' }}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                style={{
+                  position: 'absolute',
+                  right: '0.5rem',
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: '0.25rem',
+                  color: 'var(--text-muted)',
+                  fontSize: '0.875rem'
+                }}
+              >
+                {showPassword ? '👁️' : '👁️‍🗨️'}
+              </button>
+            </div>
           </div>
           <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '1rem' }} disabled={loading}>
             {loading ? 'Logging in...' : 'Login'}

frontend/src/pages/Register.jsx

@@ -7,6 +7,7 @@ export default function Register() {
   const [email, setEmail] = useState('');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const { register } = useAuth();
   const navigate = useNavigate();
@@ -53,14 +54,35 @@ export default function Register() {
           </div>
           <div className="form-group">
             <label>Password</label>
-            <input
+            <div style={{ position: 'relative' }}>
-              type="password"
+              <input
-              className="input"
+                type={showPassword ? 'text' : 'password'}
-              value={password}
+                className="input"
-              onChange={(e) => setPassword(e.target.value)}
+                value={password}
-              required
+                onChange={(e) => setPassword(e.target.value)}
-              minLength={6}
+                required
-            />
+                minLength={6}
+                style={{ paddingRight: '2.5rem' }}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                style={{
+                  position: 'absolute',
+                  right: '0.5rem',
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: '0.25rem',
+                  color: 'var(--text-muted)',
+                  fontSize: '0.875rem'
+                }}
+              >
+                {showPassword ? '👁️' : '👁️‍🗨️'}
+              </button>
+            </div>
           </div>
           <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '1rem' }} disabled={loading}>
             {loading ? 'Creating account...' : 'Register'}