User table polishing, user delete modal

frontend/src/components/SiteHeader.tsx

@@ -66,7 +66,9 @@ export function SiteHeader() {
 								<div className="d-none d-xl-block ps-2">
 									<div>{currentUser?.nickname}</div>
 									<div className="mt-1 small text-secondary">
-										{intl.formatMessage({ id: isAdmin ? "administrator" : "standard-user" })}
+										{intl.formatMessage({
+											id: isAdmin ? "role.admin" : "role.standard-user",
+										})}
 									</div>
 								</div>
 							</a>

frontend/src/components/Table/Formatter/DomainsFormatter.tsx

@@ -10,9 +10,9 @@ export function DomainsFormatter({ domains, createdOn }: Props) {
 		<div className="flex-fill">
 			<div className="font-weight-medium">
 				{domains.map((domain: string) => (
-					<span key={domain} className="badge badge-lg domain-name">
+					<a key={domain} href={`http://${domain}`} className="badge bg-yellow-lt domain-name">
 						{domain}
-					</span>
+					</a>
 				))}
 			</div>
 			{createdOn ? (

frontend/src/components/Table/Formatter/EmailFormatter.tsx

@@ -0,0 +1,10 @@
+interface Props {
+	email: string;
+}
+export function EmailFormatter({ email }: Props) {
+	return (
+		<a href={`mailto:${email}`} className="badge bg-yellow-lt">
+			{email}
+		</a>
+	);
+}

frontend/src/components/Table/Formatter/RolesFormatter.tsx

@@ -0,0 +1,20 @@
+import { intl } from "src/locale";
+
+interface Props {
+	roles: string[];
+}
+export function RolesFormatter({ roles }: Props) {
+	const r = roles || [];
+	if (r.length === 0) {
+		r[0] = "standard-user";
+	}
+	return (
+		<>
+			{r.map((role: string) => (
+				<span key={role} className="badge bg-yellow-lt me-1">
+					{intl.formatMessage({ id: `role.${role}` })}
+				</span>
+			))}
+		</>
+	);
+}

frontend/src/components/Table/Formatter/ValueWithDateFormatter.tsx

@@ -4,16 +4,19 @@ import { intl } from "src/locale";
 interface Props {
 	value: string;
 	createdOn?: string;
+	disabled?: boolean;
 }
-export function ValueWithDateFormatter({ value, createdOn }: Props) {
+export function ValueWithDateFormatter({ value, createdOn, disabled }: Props) {
 	return (
 		<div className="flex-fill">
 			<div className="font-weight-medium">
-				<div className="font-weight-medium">{value}</div>
+				<div className={`font-weight-medium ${disabled ? "text-red" : ""}`}>{value}</div>
 			</div>
 			{createdOn ? (
-				<div className="text-secondary mt-1">
-					{intl.formatMessage({ id: "created-on" }, { date: intlFormat(parseISO(createdOn)) })}
+				<div className={`text-secondary mt-1 ${disabled ? "text-red" : ""}`}>
+					{disabled
+						? intl.formatMessage({ id: "disabled" })
+						: intl.formatMessage({ id: "created-on" }, { date: intlFormat(parseISO(createdOn)) })}
 				</div>
 			) : null}
 		</div>

frontend/src/components/Table/Formatter/index.ts

@@ -1,5 +1,7 @@
 export * from "./CertificateFormatter";
 export * from "./DomainsFormatter";
+export * from "./EmailFormatter";
 export * from "./GravatarFormatter";
+export * from "./RolesFormatter";
 export * from "./StatusFormatter";
 export * from "./ValueWithDateFormatter";