mirror of
https://github.com/aykhans/slash-e.git
synced 2025-07-07 05:32:35 +00:00
chore: update frontend folder
This commit is contained in:
Steven
141
frontend/web/src/components/setting/AccessTokenSection.tsx
Normal file
141
frontend/web/src/components/setting/AccessTokenSection.tsx
Normal file
@ -0,0 +1,141 @@
|
||||
import { Button, IconButton } from "@mui/joy";
|
||||
import axios from "axios";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { ListUserAccessTokensResponse, UserAccessToken } from "../../../../types/proto/api/v2/user_service_pb";
|
||||
import useUserStore from "../../stores/v1/user";
|
||||
import { showCommonDialog } from "../Alert";
|
||||
import CreateAccessTokenDialog from "../CreateAccessTokenDialog";
|
||||
import Icon from "../Icon";
|
||||
|
||||
const listAccessTokens = async (userId: number) => {
|
||||
const { data } = await axios.get<ListUserAccessTokensResponse>(`/api/v2/users/${userId}/access_tokens`);
|
||||
return data.accessTokens;
|
||||
};
|
||||
|
||||
const AccessTokenSection = () => {
|
||||
const currentUser = useUserStore().getCurrentUser();
|
||||
const [userAccessTokens, setUserAccessTokens] = useState<UserAccessToken[]>([]);
|
||||
const [showCreateDialog, setShowCreateDialog] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
listAccessTokens(currentUser.id).then((accessTokens) => {
|
||||
setUserAccessTokens(accessTokens);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleCreateAccessTokenDialogConfirm = async () => {
|
||||
const accessTokens = await listAccessTokens(currentUser.id);
|
||||
setUserAccessTokens(accessTokens);
|
||||
};
|
||||
|
||||
const copyAccessToken = (accessToken: string) => {
|
||||
copy(accessToken);
|
||||
toast.success("Access token copied to clipboard");
|
||||
};
|
||||
|
||||
const handleDeleteAccessToken = async (accessToken: string) => {
|
||||
showCommonDialog({
|
||||
title: "Delete Access Token",
|
||||
content: `Are you sure to delete access token \`${getFormatedAccessToken(accessToken)}\`? You cannot undo this action.`,
|
||||
style: "danger",
|
||||
onConfirm: async () => {
|
||||
await axios.delete(`/api/v2/users/${currentUser.id}/access_tokens/${accessToken}`);
|
||||
setUserAccessTokens(userAccessTokens.filter((token) => token.accessToken !== accessToken));
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const getFormatedAccessToken = (accessToken: string) => {
|
||||
return `${accessToken.slice(0, 4)}****${accessToken.slice(-4)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full flex flex-col justify-start items-start space-y-4">
|
||||
<div className="w-full">
|
||||
<div className="sm:flex sm:items-center">
|
||||
<div className="sm:flex-auto">
|
||||
<p className="text-base font-semibold leading-6 text-gray-900">Access Tokens</p>
|
||||
<p className="mt-2 text-sm text-gray-700">A list of all access tokens for your account.</p>
|
||||
</div>
|
||||
<div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="neutral"
|
||||
onClick={() => {
|
||||
setShowCreateDialog(true);
|
||||
}}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 flow-root">
|
||||
<div className="overflow-x-auto">
|
||||
<div className="inline-block min-w-full py-2 align-middle">
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
||||
Token
|
||||
</th>
|
||||
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">
|
||||
Description
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
||||
Created At
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
||||
Expires At
|
||||
</th>
|
||||
<th scope="col" className="relative py-3.5 pl-3 pr-4">
|
||||
<span className="sr-only">Delete</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{userAccessTokens.map((userAccessToken) => (
|
||||
<tr key={userAccessToken.accessToken}>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-900 flex flex-row justify-start items-center gap-x-1">
|
||||
<span className="font-mono">{getFormatedAccessToken(userAccessToken.accessToken)}</span>
|
||||
<Button color="neutral" variant="plain" size="sm" onClick={() => copyAccessToken(userAccessToken.accessToken)}>
|
||||
<Icon.Clipboard className="w-4 h-auto text-gray-500" />
|
||||
</Button>
|
||||
</td>
|
||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900">{userAccessToken.description}</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{String(userAccessToken.issuedAt)}</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
{String(userAccessToken.expiresAt ?? "Never")}
|
||||
</td>
|
||||
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm">
|
||||
<IconButton
|
||||
color="danger"
|
||||
variant="plain"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
handleDeleteAccessToken(userAccessToken.accessToken);
|
||||
}}
|
||||
>
|
||||
<Icon.Trash className="w-4 h-auto" />
|
||||
</IconButton>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showCreateDialog && (
|
||||
<CreateAccessTokenDialog onClose={() => setShowCreateDialog(false)} onConfirm={handleCreateAccessTokenDialogConfirm} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccessTokenSection;
|
||||
42
frontend/web/src/components/setting/AccountSection.tsx
Normal file
42
frontend/web/src/components/setting/AccountSection.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { Button } from "@mui/joy";
|
||||
import { useState } from "react";
|
||||
import useUserStore from "../../stores/v1/user";
|
||||
import ChangePasswordDialog from "../ChangePasswordDialog";
|
||||
import EditUserinfoDialog from "../EditUserinfoDialog";
|
||||
|
||||
const AccountSection: React.FC = () => {
|
||||
const currentUser = useUserStore().getCurrentUser();
|
||||
const [showEditUserinfoDialog, setShowEditUserinfoDialog] = useState<boolean>(false);
|
||||
const [showChangePasswordDialog, setShowChangePasswordDialog] = useState<boolean>(false);
|
||||
const isAdmin = currentUser.role === "ADMIN";
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full flex flex-col justify-start items-start gap-y-2">
|
||||
<p className="text-base font-semibold leading-6 text-gray-900">Account</p>
|
||||
<p className="flex flex-row justify-start items-center mt-2">
|
||||
<span className="text-xl">{currentUser.nickname}</span>
|
||||
{isAdmin && <span className="ml-2 bg-blue-600 text-white px-2 leading-6 text-sm rounded-full">Admin</span>}
|
||||
</p>
|
||||
<p className="flex flex-row justify-start items-center">
|
||||
<span className="mr-3 text-gray-500">Email: </span>
|
||||
{currentUser.email}
|
||||
</p>
|
||||
<div className="flex flex-row justify-start items-center gap-2 mt-2">
|
||||
<Button variant="outlined" color="neutral" onClick={() => setShowEditUserinfoDialog(true)}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button variant="outlined" color="neutral" onClick={() => setShowChangePasswordDialog(true)}>
|
||||
Change password
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showEditUserinfoDialog && <EditUserinfoDialog onClose={() => setShowEditUserinfoDialog(false)} />}
|
||||
|
||||
{showChangePasswordDialog && <ChangePasswordDialog onClose={() => setShowChangePasswordDialog(false)} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountSection;
|
||||
120
frontend/web/src/components/setting/MemberSection.tsx
Normal file
120
frontend/web/src/components/setting/MemberSection.tsx
Normal file
@ -0,0 +1,120 @@
|
||||
import { Button, IconButton } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import useUserStore from "../../stores/v1/user";
|
||||
import { showCommonDialog } from "../Alert";
|
||||
import CreateUserDialog from "../CreateUserDialog";
|
||||
import Icon from "../Icon";
|
||||
|
||||
const MemberSection = () => {
|
||||
const userStore = useUserStore();
|
||||
const [showCreateUserDialog, setShowCreateUserDialog] = useState<boolean>(false);
|
||||
const [currentEditingUser, setCurrentEditingUser] = useState<User | undefined>(undefined);
|
||||
const userList = Object.values(userStore.userMapById);
|
||||
|
||||
useEffect(() => {
|
||||
userStore.fetchUserList();
|
||||
}, []);
|
||||
|
||||
const handleCreateUserDialogClose = () => {
|
||||
setShowCreateUserDialog(false);
|
||||
setCurrentEditingUser(undefined);
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (user: User) => {
|
||||
showCommonDialog({
|
||||
title: "Delete User",
|
||||
content: `Are you sure to delete user \`${user.nickname}\`? You cannot undo this action.`,
|
||||
style: "danger",
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
await userStore.deleteUser(user.id);
|
||||
toast.success(`User \`${user.nickname}\` deleted successfully`);
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to delete user \`${user.nickname}\`: ${error.response.data.message}`);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full flex flex-col justify-start items-start space-y-4">
|
||||
<div className="w-full">
|
||||
<div className="sm:flex sm:items-center">
|
||||
<div className="sm:flex-auto">
|
||||
<p className="text-base font-semibold leading-6 text-gray-900">Users</p>
|
||||
<p className="mt-2 text-sm text-gray-700">
|
||||
A list of all the users in your workspace including their nickname, email and role.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="neutral"
|
||||
onClick={() => {
|
||||
setShowCreateUserDialog(true);
|
||||
setCurrentEditingUser(undefined);
|
||||
}}
|
||||
>
|
||||
Add user
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 flow-root">
|
||||
<div className="overflow-x-auto">
|
||||
<div className="inline-block min-w-full py-2 align-middle">
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">
|
||||
Nickname
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
||||
Email
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
|
||||
Role
|
||||
</th>
|
||||
<th scope="col" className="relative py-3.5 pl-3 pr-4">
|
||||
<span className="sr-only">Edit</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{userList.map((user) => (
|
||||
<tr key={user.email}>
|
||||
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900">{user.nickname}</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{user.email}</td>
|
||||
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{user.role}</td>
|
||||
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm">
|
||||
<IconButton
|
||||
size="sm"
|
||||
variant="plain"
|
||||
onClick={() => {
|
||||
setCurrentEditingUser(user);
|
||||
setShowCreateUserDialog(true);
|
||||
}}
|
||||
>
|
||||
<Icon.PenBox className="w-4 h-auto" />
|
||||
</IconButton>
|
||||
<IconButton size="sm" color="danger" variant="plain" onClick={() => handleDeleteUser(user)}>
|
||||
<Icon.Trash className="w-4 h-auto" />
|
||||
</IconButton>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showCreateUserDialog && <CreateUserDialog user={currentEditingUser} onClose={handleCreateUserDialogClose} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemberSection;
|
||||
34
frontend/web/src/components/setting/WorkspaceSection.tsx
Normal file
34
frontend/web/src/components/setting/WorkspaceSection.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { Checkbox } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { getWorkspaceProfile, upsertWorkspaceSetting } from "../../helpers/api";
|
||||
|
||||
const WorkspaceSection: React.FC = () => {
|
||||
const [disallowSignUp, setDisallowSignUp] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
getWorkspaceProfile().then(({ data }) => {
|
||||
setDisallowSignUp(data.disallowSignUp);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDisallowSignUpChange = async (value: boolean) => {
|
||||
await upsertWorkspaceSetting("disallow-signup", JSON.stringify(value));
|
||||
setDisallowSignUp(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col justify-start items-start space-y-4">
|
||||
<p className="text-base font-semibold leading-6 text-gray-900">Workspace settings</p>
|
||||
<div className="w-full flex flex-col justify-start items-start">
|
||||
<Checkbox
|
||||
label="Disable user signup"
|
||||
checked={disallowSignUp}
|
||||
onChange={(event) => handleDisallowSignUpChange(event.target.checked)}
|
||||
/>
|
||||
<p className="mt-2 text-gray-500">Once disabled, other users cannot signup.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceSection;
|
||||
Reference in New Issue
Block a user