fixing thsu frontend views

resources/js/pages/Ucp.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { Container, Form, Row, Col } from 'react-bootstrap'
-import { getCurrentUser, uploadAvatar } from '../api/client'
+import { Container, Form, Row, Col, Button } from 'react-bootstrap'
+import { getCurrentUser, updateCurrentUser, uploadAvatar } from '../api/client'
 import { useAuth } from '../context/AuthContext'
 import { useTranslation } from 'react-i18next'
 
@@ -11,6 +11,10 @@ export default function Ucp({ theme, setTheme, accentOverride, setAccentOverride
   const [avatarError, setAvatarError] = useState('')
   const [avatarUploading, setAvatarUploading] = useState(false)
   const [avatarPreview, setAvatarPreview] = useState('')
+  const [location, setLocation] = useState('')
+  const [profileError, setProfileError] = useState('')
+  const [profileSaving, setProfileSaving] = useState(false)
+  const [profileSaved, setProfileSaved] = useState(false)
 
   useEffect(() => {
     if (!token) return
@@ -20,6 +24,7 @@ export default function Ucp({ theme, setTheme, accentOverride, setAccentOverride
       .then((data) => {
         if (!active) return
         setAvatarPreview(data?.avatar_url || '')
+        setLocation(data?.location || '')
       })
       .catch(() => {
         if (active) setAvatarPreview('')
@@ -76,6 +81,43 @@ export default function Ucp({ theme, setTheme, accentOverride, setAccentOverride
               />
               <Form.Text className="bb-muted">{t('ucp.avatar_hint')}</Form.Text>
             </Form.Group>
+            <Form.Group className="mt-3">
+              <Form.Label>{t('ucp.location_label')}</Form.Label>
+              <Form.Control
+                type="text"
+                value={location}
+                disabled={!token || profileSaving}
+                onChange={(event) => {
+                  setLocation(event.target.value)
+                  setProfileSaved(false)
+                }}
+              />
+              <Form.Text className="bb-muted">{t('ucp.location_hint')}</Form.Text>
+            </Form.Group>
+            {profileError && <p className="text-danger mt-2 mb-0">{profileError}</p>}
+            {profileSaved && <p className="text-success mt-2 mb-0">{t('ucp.profile_saved')}</p>}
+            <Button
+              type="button"
+              variant="outline-light"
+              className="mt-3"
+              disabled={!token || profileSaving}
+              onClick={async () => {
+                setProfileError('')
+                setProfileSaved(false)
+                setProfileSaving(true)
+                try {
+                  const response = await updateCurrentUser({ location })
+                  setLocation(response?.location || '')
+                  setProfileSaved(true)
+                } catch (err) {
+                  setProfileError(err.message)
+                } finally {
+                  setProfileSaving(false)
+                }
+              }}
+            >
+              {profileSaving ? t('form.saving') : t('ucp.save_profile')}
+            </Button>
           </Col>
         </Row>
       </div>