zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

change how we create/edit clients

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-04-12 20:32:12 +02:00
committed by Carl-Gerhard Lindesvärd
parent 7f8d857508
commit bface463e2
16 changed files with 243 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
apps/api/src/utils/auth.ts
View File

@@ -23,17 +23,14 @@ export async function validateSdkRequest(
const clientSecret = clientSecretNew || clientSecretOld;
const origin = headers.origin;
// Temp log
logger.info(
{ clientId, origin: origin ? origin : 'empty' },
'validateSdkRequest'
);
if (!clientId) {
logger.error(
{
clientId,
clientSecret,
origin,
headers,
},
'validateSdkRequest: Missing client id'
);
throw new Error('Missing client id');
throw new Error('Ingestion: Missing client id');
}
const client = await db.client.findUnique({
@@ -43,58 +40,34 @@ export async function validateSdkRequest(
});
if (!client) {
logger.error(
{
clientId,
clientSecret,
origin,
headers,
},
'validateSdkRequest: Invalid client id'
);
throw new Error('Invalid client id');
throw new Error('Ingestion: Invalid client id');
}
if (client.secret) {
if (!(await verifyPassword(clientSecret || '', client.secret))) {
logger.error(
{
clientId,
clientSecret,
origin,
headers,
},
'validateSdkRequest: Invalid client secret'
);
throw new Error('Invalid client secret');
}
} else if (client.cors !== '*') {
if (!client.projectId) {
throw new Error('Ingestion: Client has no project');
}
if (client.cors) {
const domainAllowed = client.cors.split(',').find((domain) => {
if (cleanDomain(domain) === cleanDomain(origin || '')) {
return true;
}
});
if (!domainAllowed) {
logger.error(
{
clientId,
clientSecret,
client,
origin,
headers,
},
'validateSdkRequest: Invalid cors settings'
);
throw new Error('Invalid cors settings');
if (domainAllowed) {
return client.projectId;
}
// Check if cors is a wildcard
}
if (client.secret && clientSecret) {
if (await verifyPassword(clientSecret, client.secret)) {
return client.projectId;
}
}
if (!client.projectId) {
throw new Error('No project id found for client');
}
return client.projectId;
throw new Error('Ingestion: Invalid client secret');
}
export async function validateExportRequest(

1
apps/dashboard/package.json
View File

@@ -35,6 +35,7 @@
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-toggle": "^1.0.3",

54
apps/dashboard/src/app/(app)/create-organization.tsx
View File

@@ -1,12 +1,14 @@
'use client';
import { useState } from 'react';
import AnimateHeight from '@/components/animate-height';
import { CreateClientSuccess } from '@/components/clients/create-client-success';
import { LogoSquare } from '@/components/logo';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button, buttonVariants } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Switch } from '@/components/ui/switch';
import { api, handleError } from '@/trpc/client';
import { cn } from '@/utils/cn';
import { zodResolver } from '@hookform/resolvers/zod';
@@ -16,33 +18,23 @@ import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
const validation = z
.object({
organization: z.string().min(3),
project: z.string().min(3),
cors: z.string().nullable(),
tab: z.string(),
})
.refine(
(data) =>
data.tab === 'other' || (data.tab === 'website' && data.cors !== ''),
{
message: 'Cors is required',
path: ['cors'],
}
);
const validation = z.object({
organization: z.string().min(3),
project: z.string().min(3),
cors: z.string().url().or(z.literal('')),
});
type IForm = z.infer<typeof validation>;
export function CreateOrganization() {
const router = useRouter();
const [hasDomain, setHasDomain] = useState(true);
const form = useForm<IForm>({
resolver: zodResolver(validation),
defaultValues: {
organization: '',
project: '',
cors: '',
tab: 'website',
},
});
const mutation = api.onboarding.organziation.useMutation({
@@ -51,7 +43,7 @@ export function CreateOrganization() {
const onSubmit: SubmitHandler<IForm> = (values) => {
mutation.mutate({
...values,
cors: values.tab === 'website' ? values.cors : null,
cors: hasDomain ? values.cors : null,
});
};
@@ -128,29 +120,19 @@ export function CreateOrganization() {
/>
</div>
<Tabs
defaultValue="website"
onValueChange={(val) => form.setValue('tab', val)}
className="h-28"
>
<TabsList className="bg-slate-200">
<TabsTrigger value="website">Website</TabsTrigger>
<TabsTrigger value="other">Other</TabsTrigger>
</TabsList>
<TabsContent value="website">
<Label>Cors *</Label>
<div>
<Label className="flex items-center justify-between">
<span>Domain</span>
<Switch checked={hasDomain} onCheckedChange={setHasDomain} />
</Label>
<AnimateHeight open={hasDomain}>
<Input
placeholder="https://example.com"
error={form.formState.errors.cors?.message}
{...form.register('cors')}
/>
</TabsContent>
<TabsContent value="other">
<div className="rounded bg-background p-2 px-3 text-sm">
🔑 You will get a secret to use for your API requests.
</div>
</TabsContent>
</Tabs>
</AnimateHeight>
</div>
<div className="flex justify-end">
<Button

21
apps/dashboard/src/components/animate-height.tsx Normal file
View File

@@ -0,0 +1,21 @@
import ReactAnimateHeight from 'react-animate-height';
type Props = {
children: React.ReactNode;
className?: string;
open: boolean;
};
const AnimateHeight = ({ children, className, open }: Props) => {
return (
<ReactAnimateHeight
duration={300}
height={open ? 'auto' : 0}
className={className}
>
{children}
</ReactAnimateHeight>
);
};
export default AnimateHeight;

42
apps/dashboard/src/components/clients/create-client-success.tsx
View File

@@ -1,7 +1,6 @@
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { clipboard } from '@/utils/clipboard';
import { Copy, RocketIcon } from 'lucide-react';
import Link from 'next/link';
import type { IServiceClient } from '@openpanel/db';
@@ -19,17 +18,28 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
<Copy size={16} />
</div>
</button>
{secret ? (
<button className="text-left" onClick={() => clipboard(secret)}>
<Label>Secret</Label>
<div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
{secret}
<Copy size={16} />
</div>
</button>
) : (
{secret && (
<div className="w-full">
<button
className="w-full text-left"
onClick={() => clipboard(secret)}
>
<Label>Client secret</Label>
<div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
{secret}
<Copy size={16} />
</div>
</button>
{cors && (
<p className="mt-1 text-xs text-muted-foreground">
You will only need the secret if you want to send server events.
</p>
)}
</div>
)}
{cors && (
<div className="text-left">
<Label>Cors settings</Label>
<Label>CORS settings</Label>
<div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
{cors}
</div>
@@ -39,7 +49,15 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
<RocketIcon className="h-4 w-4" />
<AlertTitle>Get started!</AlertTitle>
<AlertDescription>
Read our documentation to get started. Easy peasy!
Read our{' '}
<a
target="_blank"
href="https://docs.openpanel.dev"
className="underline"
>
documentation
</a>{' '}
to get started. Easy peasy!
</AlertDescription>
</Alert>
</div>

2
apps/dashboard/src/components/clients/table.tsx
View File

@@ -14,7 +14,7 @@ export const columns: ColumnDef<IServiceClientWithProject>[] = [
<div>
<div>{row.original.name}</div>
<div className="text-sm text-muted-foreground">
{row.original.project.name}
{row.original.project?.name ?? 'No project'}
</div>
</div>
);

5
apps/dashboard/src/components/overview/overview-live-histogram.tsx
View File

@@ -1,12 +1,11 @@
'use client';
import { Fragment } from 'react';
import { api } from '@/trpc/client';
import { cn } from '@/utils/cn';
import AnimateHeight from 'react-animate-height';
import type { IChartInput } from '@openpanel/validation';
import AnimateHeight from '../animate-height';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
import { useOverviewOptions } from './useOverviewOptions';
@@ -135,7 +134,7 @@ interface WrapperProps {
function Wrapper({ open, children, count }: WrapperProps) {
return (
<AnimateHeight duration={500} height={open ? 'auto' : 0}>
<AnimateHeight open={open}>
<div className="flex flex-col items-end md:flex-row">
<div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
<div className="text-sm max-md:mb-1">Last 30 minutes</div>

26
apps/dashboard/src/components/ui/switch.tsx Normal file
View File

@@ -0,0 +1,26 @@
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as SwitchPrimitives from '@radix-ui/react-switch';
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
'peer inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input',
className
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
'pointer-events-none block h-3 w-3 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0'
)}
/>
</SwitchPrimitives.Root>
));
Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch };

101
apps/dashboard/src/modals/AddClient.tsx
View File

@@ -1,12 +1,14 @@
'use client';
import { useState } from 'react';
import AnimateHeight from '@/components/animate-height';
import { CreateClientSuccess } from '@/components/clients/create-client-success';
import { Button, buttonVariants } from '@/components/ui/button';
import { Combobox } from '@/components/ui/combobox';
import { DialogFooter } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Switch } from '@/components/ui/switch';
import { useAppParams } from '@/hooks/useAppParams';
import { api, handleError } from '@/trpc/client';
import { cn } from '@/utils/cn';
@@ -21,21 +23,12 @@ import { z } from 'zod';
import { popModal } from '.';
import { ModalContent, ModalHeader } from './Modal/Container';
const validation = z
.object({
name: z.string().min(1),
cors: z.string().nullable(),
tab: z.string(),
projectId: z.string(),
})
.refine(
(data) =>
data.tab === 'other' || (data.tab === 'website' && data.cors !== ''),
{
message: 'Cors is required',
path: ['cors'],
}
);
const validation = z.object({
name: z.string().min(1),
cors: z.string().url().or(z.literal('')),
projectId: z.string(),
type: z.enum(['read', 'write', 'root']),
});
type IForm = z.infer<typeof validation>;
@@ -50,10 +43,11 @@ export default function AddClient(props: Props) {
defaultValues: {
name: '',
cors: '',
tab: 'website',
projectId: props.projectId ?? projectId,
type: 'write',
},
});
const [hasDomain, setHasDomain] = useState(true);
const mutation = api.client.create.useMutation({
onError: handleError,
onSuccess() {
@@ -67,7 +61,7 @@ export default function AddClient(props: Props) {
const onSubmit: SubmitHandler<IForm> = (values) => {
mutation.mutate({
name: values.name,
cors: values.tab === 'website' ? values.cors : null,
cors: hasDomain ? values.cors : null,
projectId: values.projectId,
organizationSlug,
});
@@ -134,29 +128,64 @@ export default function AddClient(props: Props) {
{...form.register('name')}
/>
</div>
<Tabs
defaultValue="website"
onValueChange={(val) => form.setValue('tab', val)}
className="h-28"
>
<TabsList className="bg-slate-200">
<TabsTrigger value="website">Website</TabsTrigger>
<TabsTrigger value="other">Other</TabsTrigger>
</TabsList>
<TabsContent value="website">
<Label>Cors</Label>
<div>
<Label className="flex items-center justify-between">
<span>Domain</span>
<Switch checked={hasDomain} onCheckedChange={setHasDomain} />
</Label>
<AnimateHeight open={hasDomain}>
<Input
placeholder="https://example.com"
error={form.formState.errors.cors?.message}
{...form.register('cors')}
/>
</TabsContent>
<TabsContent value="other">
<div className="rounded bg-background p-2 px-3 text-sm">
🔑 You will get a secret to use for your API requests.
</div>
</TabsContent>
</Tabs>
</AnimateHeight>
</div>
<div>
<Controller
control={form.control}
name="type"
render={({ field }) => {
return (
<div>
<Label>Type of client</Label>
<Combobox
{...field}
className="w-full"
onChange={(value) => {
field.onChange(value);
}}
items={[
{
value: 'write',
label: 'Write (for ingestion)',
},
{
value: 'read',
label: 'Read (access export API)',
},
{
value: 'root',
label: 'Root (access export API)',
},
]}
placeholder="Select a project"
/>
<p className="mt-1 text-xs text-muted-foreground">
{field.value === 'write' &&
'Write: Is the default client type and is used for ingestion of data'}
{field.value === 'read' &&
'Read: You can access the current projects data from the export API'}
{field.value === 'root' &&
'Root: You can access any projects data from the export API'}
</p>
</div>
);
}}
/>
</div>
<DialogFooter>
<Button
type="button"

4
apps/dashboard/src/modals/EditClient.tsx
View File

@@ -18,7 +18,7 @@ type EditClientProps = IServiceClient;
const validator = z.object({
id: z.string().min(1),
name: z.string().min(1),
cors: z.string().min(1),
cors: z.string().nullable(),
});
type IForm = z.infer<typeof validator>;
@@ -59,13 +59,11 @@ export default function EditClient({ id, name, cors }: EditClientProps) {
label="Name"
placeholder="Name"
{...register('name')}
defaultValue={name}
/>
<InputWithLabel
label="Cors"
placeholder="Cors"
{...register('cors')}
defaultValue={cors}
/>
</div>
<ButtonContainer>

27
apps/dashboard/src/trpc/api/routers/client.ts
View File

@@ -3,6 +3,7 @@ import { createTRPCRouter, protectedProcedure } from '@/trpc/api/trpc';
import { z } from 'zod';
import { hashPassword, stripTrailingSlash } from '@openpanel/common';
import type { Prisma } from '@openpanel/db';
import { db } from '@openpanel/db';
export const clientRouter = createTRPCRouter({
@@ -11,7 +12,7 @@ export const clientRouter = createTRPCRouter({
z.object({
id: z.string(),
name: z.string(),
cors: z.string(),
cors: z.string().nullable(),
})
)
.mutation(({ input }) => {
@@ -21,7 +22,7 @@ export const clientRouter = createTRPCRouter({
},
data: {
name: input.name,
cors: input.cors,
cors: input.cors ?? null,
},
});
}),
@@ -32,23 +33,25 @@ export const clientRouter = createTRPCRouter({
projectId: z.string(),
organizationSlug: z.string(),
cors: z.string().nullable(),
type: z.enum(['read', 'write', 'root']).optional(),
})
)
.mutation(async ({ input }) => {
const secret = randomUUID();
const client = await db.client.create({
data: {
organizationSlug: input.organizationSlug,
projectId: input.projectId,
name: input.name,
secret: input.cors ? null : await hashPassword(secret),
cors: input.cors ? stripTrailingSlash(input.cors) : '*',
},
});
const data: Prisma.ClientCreateArgs['data'] = {
organizationSlug: input.organizationSlug,
projectId: input.projectId,
name: input.name,
type: input.type ?? 'write',
cors: input.cors ? stripTrailingSlash(input.cors) : null,
secret: await hashPassword(secret),
};
const client = await db.client.create({ data });
return {
...client,
secret: input.cors ? null : secret,
secret,
};
}),
remove: protectedProcedure

7
apps/dashboard/src/trpc/api/routers/onboarding.ts
View File

@@ -35,15 +35,16 @@ export const onboardingRouter = createTRPCRouter({
name: `${project.name} Client`,
organizationSlug: org.slug,
projectId: project.id,
cors: input.cors ? stripTrailingSlash(input.cors) : '*',
secret: input.cors ? null : await hashPassword(secret),
type: 'write',
cors: input.cors ? stripTrailingSlash(input.cors) : null,
secret: await hashPassword(secret),
},
});
return {
client: {
...client,
secret: input.cors ? null : secret,
secret,
},
project,
organization: transformOrganization(org),

2
apps/public/src/styles/globals.css
View File

@@ -73,7 +73,7 @@
}
.fancy-text {
@apply text-transparent inline-block bg-gradient-to-br from-blue-200 to-blue-400 bg-clip-text;
@apply inline-block bg-gradient-to-br from-blue-200 to-blue-400 bg-clip-text text-transparent;
}
strong {

3
packages/db/prisma/migrations/20240412180636_cors_nullable/migration.sql Normal file
View File

@@ -0,0 +1,3 @@
-- AlterTable
ALTER TABLE "clients" ALTER COLUMN "cors" DROP NOT NULL,
ALTER COLUMN "cors" DROP DEFAULT;

2
packages/db/prisma/schema.prisma
View File

@@ -104,7 +104,7 @@ model Client {
projectId String?
project Project? @relation(fields: [projectId], references: [id])
organizationSlug String
cors String @default("*")
cors String?
createdAt DateTime @default(now())
updatedAt DateTime @default(now()) @updatedAt

30
pnpm-lock.yaml generated
View File

@@ -192,6 +192,9 @@ importers:
'@radix-ui/react-slot':
specifier: ^1.0.2
version: 1.0.2(@types/react@18.2.56)(react@18.2.0)
'@radix-ui/react-switch':
specifier: ^1.0.3
version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-tabs':
specifier: ^1.0.4
version: 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0)
@@ -5444,6 +5447,33 @@ packages:
react: 18.2.0
dev: false
/@radix-ui/react-switch@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
dependencies:
'@babel/runtime': 7.23.9
'@radix-ui/primitive': 1.0.1
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.56)(react@18.2.0)
'@radix-ui/react-context': 1.0.1(@types/react@18.2.56)(react@18.2.0)
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.56)(react@18.2.0)
'@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.56)(react@18.2.0)
'@radix-ui/react-use-size': 1.0.1(@types/react@18.2.56)(react@18.2.0)
'@types/react': 18.2.56
'@types/react-dom': 18.2.19
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@radix-ui/react-tabs@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.56)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
peerDependencies: