+
+
+ Remote access
+
Reach this installation from fluksio.com. Entirely optional — without
it, this installation talks to nothing outside your network.
-
-
-
- {status.enrolled ? (
- <>
-
-
-
- {status.connected
- ? "Connected"
- : status.last_error
- ? `Reconnecting — ${status.last_error}`
- : "Reconnecting…"}
-
- {status.portal_url ?? "—"}
-
- {status.portal_account ?? "—"}
-
- Portal sessions of this account get this account's rights
- here. Anyone else gets in only once added below, as their own
- user.
-
-
-
-
- {status.installation_id ?? "—"}
-
-
-
-
-
+
+
+
+ {status.enrolled ? (
+ <>
+
+
+
+ {status.connected
+ ? "Connected"
+ : status.last_error
+ ? `Reconnecting — ${status.last_error}`
+ : "Reconnecting…"}
+
+ {status.portal_url ?? "—"}
+
+ {status.portal_account ?? "—"}
+
+ Portal sessions of this account get this account's rights
+ here. Anyone else gets in only once added below, as their
+ own user.
+
+
+
+
+ {status.installation_id ?? "—"}
+
+
+
+
+
+
-
-
-
-
Remote users
-
- Let someone else reach this installation through the portal.
- They get a user of their own here — not yours, and never a
- superuser, so they cannot pass access on.
-
+
+
+
+
+
Remote users
+
+ Let someone else reach this installation through the portal.
+ They get a user of their own here — not yours, and never a
+ superuser, so they cannot pass access on.
+
+ They get a code at fluksio.com → Installations → Join an
+ installation. Added users appear under Admin → Users; deleting
+ them there ends their access.
+
- They get a code at fluksio.com → Installations → Join an
- installation. Added users appear under Admin → Users; deleting
- them there ends their access.
+ Get a code at fluksio.com → Installations → Add installation.
- Get a code at fluksio.com → Installations → Add installation.
-
-
-
-
-
-
- )}
+ )}
+
-
+
)
}
diff --git a/frontend/src/components/UserSettings/SettingRow.tsx b/frontend/src/components/UserSettings/SettingRow.tsx
new file mode 100644
index 0000000..1d0207d
--- /dev/null
+++ b/frontend/src/components/UserSettings/SettingRow.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from "react"
+import { Label } from "@/components/ui/label"
+
+/**
+ * Label + hint on the left, its control on the right. Shared by the settings
+ * cards. The row wraps when the two no longer fit side by side, so on a phone
+ * the control sits under its label instead of squeezing it to one word.
+ */
+const SettingRow = ({
+ label,
+ hint,
+ children,
+}: {
+ label: string
+ hint: string
+ children: ReactNode
+}) => (
+
+ {/* basis-40 is the width the label keeps before the control drops to its
+ own line; without it a long hint would push every control down, even
+ on a wide card where both fit next to each other. */}
+
+
+
{hint}
+
+
{children}
+
+)
+
+export default SettingRow
diff --git a/frontend/src/components/UserSettings/UserInformation.tsx b/frontend/src/components/UserSettings/UserInformation.tsx
index 4bfaf60..1b30acc 100644
--- a/frontend/src/components/UserSettings/UserInformation.tsx
+++ b/frontend/src/components/UserSettings/UserInformation.tsx
@@ -1,11 +1,25 @@
import { zodResolver } from "@hookform/resolvers/zod"
import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { Pencil } from "lucide-react"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { UsersService, type UserUpdateMe } from "@/client"
+import { UserAvatar } from "@/components/Common/UserAvatar"
+import ChangePassword from "@/components/UserSettings/ChangePassword"
+import DeleteConfirmation from "@/components/UserSettings/DeleteConfirmation"
+import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
+import {
+ Card,
+ CardAction,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card"
import {
Form,
FormControl,
@@ -28,6 +42,36 @@ const formSchema = z.object({
type FormData = z.infer
+/** Compact value row; the edit affordance appears on hover, focus or touch. */
+const ReadOnlyField = ({
+ label,
+ value,
+ onEdit,
+}: {
+ label: string
+ value: string | undefined
+ onEdit: () => void
+}) => (
+
+