Added Profile settings into General page
This commit is contained in:
Lucas Oliveira
parent
cd00b5552d
commit
ad52526642
2 changed files with 191 additions and 110 deletions
|
|
@ -2,7 +2,7 @@ import { gradients } from "../../utils/styleUtils";
|
|||
|
||||
export default function GradientChooserComponent({ value, onChange }) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center justify-center gap-4">
|
||||
<div className="flex flex-wrap items-center justify-start gap-2">
|
||||
{gradients.map((gradient, idx) => (
|
||||
<div
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import { Button } from "../../../../components/ui/button";
|
||||
|
||||
import { ColDef, ColGroupDef } from "ag-grid-community";
|
||||
import { useState } from "react";
|
||||
import * as Form from "@radix-ui/react-form";
|
||||
import { cloneDeep } from "lodash";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import ForwardedIconComponent from "../../../../components/genericIconComponent";
|
||||
import GradientChooserComponent from "../../../../components/gradientChooserComponent";
|
||||
import InputComponent from "../../../../components/inputComponent";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
|
@ -11,71 +13,88 @@ import {
|
|||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../../../components/ui/card";
|
||||
import { Checkbox } from "../../../../components/ui/checkbox";
|
||||
import { Input } from "../../../../components/ui/input";
|
||||
import {
|
||||
EDIT_PASSWORD_ALERT_LIST,
|
||||
EDIT_PASSWORD_ERROR_ALERT,
|
||||
SAVE_ERROR_ALERT,
|
||||
SAVE_SUCCESS_ALERT,
|
||||
} from "../../../../constants/alerts_constants";
|
||||
import { CONTROL_PATCH_USER_STATE } from "../../../../constants/constants";
|
||||
import { AuthContext } from "../../../../contexts/authContext";
|
||||
import { resetPassword, updateUser } from "../../../../controllers/API";
|
||||
import useAlertStore from "../../../../stores/alertStore";
|
||||
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
|
||||
import {
|
||||
inputHandlerEventType,
|
||||
patchUserInputStateType,
|
||||
} from "../../../../types/components";
|
||||
import { gradients } from "../../../../utils/styleUtils";
|
||||
|
||||
export default function GeneralPage() {
|
||||
// Column Definitions: Defines the columns to be displayed.
|
||||
const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
|
||||
{ headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
|
||||
{
|
||||
field: "type",
|
||||
cellEditor: "agSelectCellEditor",
|
||||
cellEditorParams: {
|
||||
values: ["Prompt", "Credential"],
|
||||
valueListGap: 10,
|
||||
},
|
||||
flex: 1,
|
||||
editable: true,
|
||||
},
|
||||
{
|
||||
field: "value",
|
||||
cellEditor: "agLargeTextCellEditor",
|
||||
cellEditorPopup: true,
|
||||
flex: 2,
|
||||
editable: true,
|
||||
},
|
||||
{
|
||||
headerName: "Apply To Fields",
|
||||
field: "defaultFields",
|
||||
flex: 1,
|
||||
editable: true,
|
||||
},
|
||||
]);
|
||||
const setCurrentFlowId = useFlowsManagerStore(
|
||||
(state) => state.setCurrentFlowId
|
||||
);
|
||||
|
||||
const [rowData, setRowData] = useState([
|
||||
{
|
||||
name: "OpenAI Key",
|
||||
type: "Credential",
|
||||
value: "apijpioj09u302j0982ejf",
|
||||
defaultFields: "Open AI API Key",
|
||||
},
|
||||
{
|
||||
name: "Prompt",
|
||||
type: "Prompt",
|
||||
value: `Answer user's questions based on the document below:
|
||||
const [inputState, setInputState] = useState<patchUserInputStateType>(
|
||||
CONTROL_PATCH_USER_STATE
|
||||
);
|
||||
|
||||
---
|
||||
|
||||
{Document}
|
||||
|
||||
---
|
||||
|
||||
Question:
|
||||
{Question}
|
||||
|
||||
Answer:
|
||||
`,
|
||||
defaultFields: ["Prompt"],
|
||||
},
|
||||
{
|
||||
name: "Azure Key",
|
||||
type: "Credential",
|
||||
value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
|
||||
defaultFields: ["Azure API Key"],
|
||||
},
|
||||
]);
|
||||
const { autoLogin } = useContext(AuthContext);
|
||||
|
||||
// set null id
|
||||
useEffect(() => {
|
||||
setCurrentFlowId("");
|
||||
}, []);
|
||||
const setSuccessData = useAlertStore((state) => state.setSuccessData);
|
||||
const setErrorData = useAlertStore((state) => state.setErrorData);
|
||||
const { userData, setUserData } = useContext(AuthContext);
|
||||
const { password, cnfPassword, gradient } = inputState;
|
||||
|
||||
async function handlePatchPassword() {
|
||||
if (password !== cnfPassword) {
|
||||
setErrorData({
|
||||
title: EDIT_PASSWORD_ERROR_ALERT,
|
||||
list: [EDIT_PASSWORD_ALERT_LIST],
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (password !== "") await resetPassword(userData!.id, { password });
|
||||
handleInput({ target: { name: "password", value: "" } });
|
||||
handleInput({ target: { name: "cnfPassword", value: "" } });
|
||||
setSuccessData({ title: SAVE_SUCCESS_ALERT });
|
||||
} catch (error) {
|
||||
setErrorData({
|
||||
title: SAVE_ERROR_ALERT,
|
||||
list: [(error as any).response.data.detail],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePatchGradient() {
|
||||
try {
|
||||
if (gradient !== "")
|
||||
await updateUser(userData!.id, { profile_image: gradient });
|
||||
if (gradient !== "") {
|
||||
let newUserData = cloneDeep(userData);
|
||||
newUserData!.profile_image = gradient;
|
||||
|
||||
setUserData(newUserData);
|
||||
}
|
||||
setSuccessData({ title: SAVE_SUCCESS_ALERT });
|
||||
} catch (error) {
|
||||
setErrorData({
|
||||
title: SAVE_ERROR_ALERT,
|
||||
list: [(error as any).response.data.detail],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function handleInput({
|
||||
target: { name, value },
|
||||
}: inputHandlerEventType): void {
|
||||
setInputState((prev) => ({ ...prev, [name]: value }));
|
||||
}
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col gap-6">
|
||||
<div className="flex w-full items-center justify-between gap-4 space-y-0.5">
|
||||
|
|
@ -94,51 +113,113 @@ export default function GeneralPage() {
|
|||
</div>
|
||||
|
||||
<div className="grid gap-6">
|
||||
<Card x-chunk="dashboard-04-chunk-1">
|
||||
<CardHeader>
|
||||
<CardTitle>Store Name</CardTitle>
|
||||
<CardDescription>
|
||||
Used to identify your store in the marketplace.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form>
|
||||
<Input placeholder="Store Name" />
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter className="border-t px-6 py-4">
|
||||
<Button>Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card x-chunk="dashboard-04-chunk-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Plugins Directory</CardTitle>
|
||||
<CardDescription>
|
||||
The directory within your project, in which your plugins are
|
||||
located.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form className="flex flex-col gap-4">
|
||||
<Input
|
||||
placeholder="Project Name"
|
||||
defaultValue="/content/plugins"
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="include" defaultChecked />
|
||||
<label
|
||||
htmlFor="include"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Allow administrators to change the directory.
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter className="border-t px-6 py-4">
|
||||
<Button>Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
{!autoLogin && (
|
||||
<>
|
||||
<Form.Root
|
||||
onSubmit={(event) => {
|
||||
handlePatchGradient();
|
||||
event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<Card x-chunk="dashboard-04-chunk-1">
|
||||
<CardHeader>
|
||||
<CardTitle>Profile Gradient</CardTitle>
|
||||
<CardDescription>
|
||||
Choose the gradient that appears as your profile picture.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="py-2">
|
||||
<GradientChooserComponent
|
||||
value={
|
||||
gradient == ""
|
||||
? userData?.profile_image ??
|
||||
gradients[
|
||||
parseInt(userData?.id ?? "", 30) %
|
||||
gradients.length
|
||||
]
|
||||
: gradient
|
||||
}
|
||||
onChange={(value) => {
|
||||
handleInput({ target: { name: "gradient", value } });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="border-t px-6 py-4">
|
||||
<Form.Submit asChild>
|
||||
<Button type="submit">Save</Button>
|
||||
</Form.Submit>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Form.Root>
|
||||
<Form.Root
|
||||
onSubmit={(event) => {
|
||||
handlePatchPassword();
|
||||
event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<Card x-chunk="dashboard-04-chunk-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Password</CardTitle>
|
||||
<CardDescription>
|
||||
Type your new password and confirm it.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex w-full gap-4">
|
||||
<Form.Field name="password" className="w-full">
|
||||
<InputComponent
|
||||
id="pasword"
|
||||
onChange={(value) => {
|
||||
handleInput({ target: { name: "password", value } });
|
||||
}}
|
||||
value={password}
|
||||
isForm
|
||||
password={true}
|
||||
placeholder="Password"
|
||||
className="w-full"
|
||||
/>
|
||||
<Form.Message
|
||||
match="valueMissing"
|
||||
className="field-invalid"
|
||||
>
|
||||
Please enter your password
|
||||
</Form.Message>
|
||||
</Form.Field>
|
||||
<Form.Field name="cnfPassword" className="w-full">
|
||||
<InputComponent
|
||||
id="cnfPassword"
|
||||
onChange={(value) => {
|
||||
handleInput({
|
||||
target: { name: "cnfPassword", value },
|
||||
});
|
||||
}}
|
||||
value={cnfPassword}
|
||||
isForm
|
||||
password={true}
|
||||
placeholder="Confirm Password"
|
||||
className="w-full"
|
||||
/>
|
||||
|
||||
<Form.Message
|
||||
className="field-invalid"
|
||||
match="valueMissing"
|
||||
>
|
||||
Please confirm your password
|
||||
</Form.Message>
|
||||
</Form.Field>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="border-t px-6 py-4">
|
||||
<Form.Submit asChild>
|
||||
<Button type="submit">Save</Button>
|
||||
</Form.Submit>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Form.Root>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue