diff --git a/src/helpers/ComunicUsersHelper.ts b/src/helpers/ComunicUsersHelper.ts
index 8b20339..515b3a4 100644
--- a/src/helpers/ComunicUsersHelper.ts
+++ b/src/helpers/ComunicUsersHelper.ts
@@ -11,7 +11,7 @@ export interface SearchResult {
first_name: string;
last_name: string;
email: string;
- account_image: string;
+ account_image?: string;
}
export interface ComunicUser {
@@ -21,15 +21,16 @@ export interface ComunicUser {
email: string;
account_creation_time: number;
last_activity: number;
- page_visibilty: "private" | "public" | "open";
+ page_visibility: "private" | "public" | "open";
directory?: string;
- account_image: string;
- friend_list_public: string;
+ account_image?: string;
+ account_image_visibility: "friends" | "public" | "open";
+ friend_list_public: boolean;
is_email_public: boolean;
personal_website?: string;
public_note?: string;
location?: string;
- block_commments: boolean;
+ block_comments: boolean;
allow_posts_from_friends: boolean;
allow_mails: boolean;
lang: string;
diff --git a/src/ui/accountSettings/SettingsSection.tsx b/src/ui/accountSettings/SettingsSection.tsx
index 9d03a69..3385c90 100644
--- a/src/ui/accountSettings/SettingsSection.tsx
+++ b/src/ui/accountSettings/SettingsSection.tsx
@@ -1,5 +1,6 @@
-import { Grid, Paper, Typography, Divider } from "@material-ui/core";
+import { Grid } from "@material-ui/core";
import React from "react";
+import { CustomCard } from "../widgets/CustomCard";
export function SettingsSection(p: {
title: string;
@@ -7,20 +8,7 @@ export function SettingsSection(p: {
}) {
return (
-
-
- {p.title}
-
-
-
- {p.children}
-
-
+ {p.children}
);
}
diff --git a/src/ui/routes/ComunicUserRoute.tsx b/src/ui/routes/ComunicUserRoute.tsx
index d35b80c..de1520b 100644
--- a/src/ui/routes/ComunicUserRoute.tsx
+++ b/src/ui/routes/ComunicUserRoute.tsx
@@ -1,9 +1,27 @@
+import {
+ Avatar,
+ Grid,
+ Table,
+ TableBody,
+ TableCell,
+ TableRow,
+} from "@material-ui/core";
import React from "react";
import {
ComunicUser,
ComunicUsersHelper,
} from "../../helpers/ComunicUsersHelper";
import { AsyncWidget } from "../widgets/AsyncWidget";
+import { CustomCard } from "../widgets/CustomCard";
+import { PageTitle } from "../widgets/PageTitle";
+import { TimestampWidget } from "../widgets/TimestampWidget";
+
+interface UserProperty {
+ name: string;
+ value?: string | number;
+ bool?: boolean;
+ child?: React.ReactElement;
+}
/**
* Comunic user management route
@@ -21,14 +39,111 @@ export class ComunicUserRoute extends React.Component<
this.build = this.build.bind(this);
}
+ get user(): ComunicUser {
+ return this.state.user;
+ }
+
async load() {
const user = await ComunicUsersHelper.GetSingle(this.props.userID);
this.setState({ user: user });
}
+ get userProperties(): UserProperty[] {
+ return [
+ { name: "Account ID", value: this.user.id },
+ { name: "First name", value: this.user.first_name },
+ { name: "Last name", value: this.user.last_name },
+ { name: "Email address", value: this.user.email },
+ {
+ name: "Account creation time",
+ child: (
+
+ ),
+ },
+ { name: "Page visibility", value: this.user.page_visibility },
+ {
+ name: "Virtual directory",
+ value: this.user.directory ? "@" + this.user.directory : "None",
+ },
+ {
+ name: "Account image",
+ child: ,
+ },
+ {
+ name: "Account image visibility",
+ value: this.user.account_image_visibility,
+ },
+ {
+ name: "Is friend list public",
+ bool: this.user.friend_list_public,
+ },
+ {
+ name: "Is email address public",
+ bool: this.user.is_email_public,
+ },
+ {
+ name: "Personal website",
+ value: this.user.personal_website,
+ },
+ {
+ name: "Public note",
+ value: this.user.public_note,
+ },
+ { name: "Location", value: this.user.location },
+ { name: "Block comments", bool: this.user.block_comments },
+ {
+ name: "Allow posts from friends",
+ bool: this.user.allow_posts_from_friends,
+ },
+ { name: "Allow emails", bool: this.user.allow_mails },
+ { name: "Language", value: this.user.lang },
+ ];
+ }
+
build() {
- return
Go for {this.state.user.first_name}
;
+ return (
+ <>
+
+
+
+
+
+
+
+ {this.userProperties.map((p) => {
+ return (
+
+
+ {p.name}
+
+
+ {p.child != null
+ ? p.child
+ : p.bool != null
+ ? p.bool
+ ? "Yes"
+ : "No"
+ : p.value == null
+ ? "Undefined"
+ : p.value}
+
+
+ );
+ })}
+
+
+
+
+
+ >
+ );
}
render() {
diff --git a/src/ui/widgets/CustomCard.tsx b/src/ui/widgets/CustomCard.tsx
new file mode 100644
index 0000000..242efb6
--- /dev/null
+++ b/src/ui/widgets/CustomCard.tsx
@@ -0,0 +1,21 @@
+import { Divider, Paper, Typography } from "@material-ui/core";
+import React from "react";
+
+export function CustomCard(p: { title: string; children?: React.ReactNode }) {
+ return (
+
+
+ {p.title}
+
+
+
+ {p.children}
+
+
+ );
+}