1 files changed, 51 insertions, 0 deletions
diff --git a/src/app/(main)/settings/profile/ProfileSettings.tsx b/src/app/(main)/settings/profile/ProfileSettings.tsx
new file mode 100644
index 0000000..fae73a5
--- /dev/null
+++ b/src/app/(main)/settings/profile/ProfileSettings.tsx
@@ -0,0 +1,51 @@
+import { Column, Label, Row } from '@umami/react-zen';
+import { useConfig, useLoginQuery, useMessages } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
+import { PasswordChangeButton } from './PasswordChangeButton';
+
+export function ProfileSettings() {
+  const { user } = useLoginQuery();
+  const { formatMessage, labels } = useMessages();
+  const { cloudMode } = useConfig();
+
+  if (!user) {
+    return null;
+  }
+
+  const { username, role } = user;
+
+  const renderRole = (value: string) => {
+    if (value === ROLES.user) {
+      return formatMessage(labels.user);
+    }
+    if (value === ROLES.admin) {
+      return formatMessage(labels.admin);
+    }
+    if (value === ROLES.viewOnly) {
+      return formatMessage(labels.viewOnly);
+    }
+
+    return formatMessage(labels.unknown);
+  };
+
+  return (
+    <Column width="400px" gap="6">
+      <Column>
+        <Label>{formatMessage(labels.username)}</Label>
+        {username}
+      </Column>
+      <Column>
+        <Label>{formatMessage(labels.role)}</Label>
+        {renderRole(role)}
+      </Column>
+      {!cloudMode && (
+        <Column>
+          <Label>{formatMessage(labels.password)}</Label>
+          <Row>
+            <PasswordChangeButton />
+          </Row>
+        </Column>
+      )}
+    </Column>
+  );
+}