1
1
import type { CreateProjectRequest } from '@keyshade/schema'
2
2
import { toast } from 'sonner'
3
- import { useCallback , useMemo , useState } from 'react'
3
+ import { useCallback , useEffect , useMemo , useRef , useState } from 'react'
4
4
import { useAtom , useAtomValue } from 'jotai'
5
5
import { AddSVG } from '@public/svg/shared'
6
6
import { Button } from '@/components/ui/button'
@@ -32,6 +32,7 @@ import {
32
32
import { useHttp } from '@/hooks/use-http'
33
33
34
34
export default function CreateProjectDialogue ( ) : JSX . Element {
35
+ const privateKeyWarningRef = useRef < HTMLDivElement | null > ( null )
35
36
const [ projects , setProjects ] = useAtom ( projectsOfWorkspaceAtom )
36
37
const [ isCreateProjectDialogOpen , setIsCreateProjectDialogOpen ] = useAtom (
37
38
createProjectOpenAtom
@@ -110,10 +111,21 @@ export default function CreateProjectDialogue(): JSX.Element {
110
111
] )
111
112
112
113
const toggleDialog = useCallback (
113
- ( ) => setIsCreateProjectDialogOpen ( ( prev ) => ! prev ) ,
114
- [ setIsCreateProjectDialogOpen ]
114
+ ( ) => {
115
+ setIsCreateProjectDialogOpen ( ( prev ) => ! prev )
116
+ if ( ! isCreateProjectDialogOpen ) {
117
+ setNewProjectData ( ( prev ) => ( { ...prev , storePrivateKey : false } ) ) // Reset switch state
118
+ }
119
+ } ,
120
+ [ isCreateProjectDialogOpen , setIsCreateProjectDialogOpen ]
115
121
)
116
122
123
+ useEffect ( ( ) => {
124
+ if ( newProjectData . storePrivateKey && privateKeyWarningRef . current ) {
125
+ privateKeyWarningRef . current . scrollIntoView ( { behavior : 'smooth' } )
126
+ }
127
+ } , [ newProjectData . storePrivateKey ] )
128
+
117
129
return (
118
130
< Dialog
119
131
onOpenChange = { setIsCreateProjectDialogOpen }
@@ -126,20 +138,20 @@ export default function CreateProjectDialogue(): JSX.Element {
126
138
</ Button >
127
139
) }
128
140
</ DialogTrigger >
129
- < DialogContent className = "h-[39.5rem] w-[28.625rem] rounded-[12px] border bg-[#1E1E1F] " >
130
- < div className = "flex h-[3.125rem] w-[25.625rem] flex-col items-start justify-center" >
141
+ < DialogContent className = "h-[39.5rem] w-full rounded-[12px] border bg-[#1E1E1F] " >
142
+ < div className = "flex h-[3.125rem] w-full flex-col items-start justify-center" >
131
143
< DialogHeader className = " font-geist h-[1.875rem] w-[8.5rem] text-[1.125rem] font-semibold text-white " >
132
- Create Projects
144
+ Create Project
133
145
</ DialogHeader >
134
146
135
- < DialogDescription className = " font-inter h-[1.25rem] w-[25.625rem] text-[0.875rem] font-normal text-[#D4D4D4]" >
147
+ < DialogDescription className = " font-inter h-[1.25rem] w-full text-[0.875rem] font-normal text-[#D4D4D4]" >
136
148
Create your new project
137
149
</ DialogDescription >
138
150
</ div >
139
- < div className = "flex flex-col gap-y-8" >
140
- < div className = "flex h-[29.125rem] w-[25.813rem] flex-col gap-[1rem] py-[1rem] " >
151
+ < div className = "flex flex-col gap-y-8 overflow-auto " >
152
+ < div className = "flex h-[29.125rem] w-full flex-col gap-[1rem] py-[1rem] " >
141
153
{ /* NAME */ }
142
- < div className = "flex h-[2.25rem] w-[25.813rem] items-center justify-center gap-[1rem]" >
154
+ < div className = "flex h-[2.25rem] w-full items-center justify-between gap-[1rem]" >
143
155
< Label
144
156
className = "font-geist h-[1.25rem] w-[4.813rem] gap-[0.25rem] text-left text-[0.875rem] font-[500] "
145
157
htmlFor = "name"
@@ -160,7 +172,7 @@ export default function CreateProjectDialogue(): JSX.Element {
160
172
</ div >
161
173
162
174
{ /* DESCRIPTION */ }
163
- < div className = "flex h-[5.625rem] w-[25.813rem] items-center justify-center gap-[1rem]" >
175
+ < div className = "flex h-[5.625rem] w-full items-center justify-between gap-[1rem]" >
164
176
< Label
165
177
className = "font-geist h-[1.25rem] w-[4.813rem] gap-[0.25rem] text-left text-[0.875rem] font-[500] "
166
178
htmlFor = "name"
@@ -181,7 +193,7 @@ export default function CreateProjectDialogue(): JSX.Element {
181
193
</ div >
182
194
183
195
{ /* ENV. NAME */ }
184
- < div className = "flex h-[2.25rem] w-[25.813rem] items-center justify-center gap-[1rem]" >
196
+ < div className = "flex h-[2.25rem] w-full items-center justify-between gap-[1rem]" >
185
197
< Label
186
198
className = "font-geist h-[1.25rem] w-[4.813rem] gap-[0.25rem] text-left text-[0.875rem] font-[500] "
187
199
htmlFor = "envName"
@@ -204,7 +216,7 @@ export default function CreateProjectDialogue(): JSX.Element {
204
216
</ div >
205
217
206
218
{ /* ENV. DESCRIPTION */ }
207
- < div className = "flex h-[4.875rem] w-[25.813rem] items-center justify-center gap-[1rem]" >
219
+ < div className = "flex h-[4.875rem] w-full items-center justify-between gap-[1rem]" >
208
220
< Label
209
221
className = "font-geist h-[1.25rem] w-[4.813rem] gap-[0.25rem] text-left text-[0.875rem] font-[500]"
210
222
htmlFor = "envDescription"
@@ -229,7 +241,7 @@ export default function CreateProjectDialogue(): JSX.Element {
229
241
</ div >
230
242
231
243
{ /* ACCESS LEVEL */ }
232
- < div className = "flex h-[2.25rem] w-[25.813rem] items-center justify-center gap-[1rem]" >
244
+ < div className = "flex h-[2.25rem] w-full items-center justify-between gap-[1rem]" >
233
245
< Label
234
246
className = "font-geist h-[0.875rem] w-[5.5rem] gap-[0.25rem] text-left text-[0.875rem] font-[500] "
235
247
htmlFor = "accessLevel"
@@ -264,32 +276,41 @@ export default function CreateProjectDialogue(): JSX.Element {
264
276
</ Select >
265
277
</ div >
266
278
267
- < div className = "flex h-[4.875rem] w-[25.813rem] items-center justify-center gap-[1rem]" >
268
- < div className = "flex h-[2.875rem] w-[22.563rem] flex-col items-start justify-center" >
269
- < h1 className = "font-geist h-[1.5rem] w-[18.688rem] text-[1rem] font-[500]" >
270
- Should the private key be saved or not?
271
- </ h1 >
272
- < h1 className = "font-inter h-[1.25rem] w-[16.563rem] text-[0.8rem] font-normal text-[#A1A1AA] " >
273
- Choose if you want to save your private key
274
- </ h1 >
275
- </ div >
279
+ { /* SWITCH */ }
280
+ < div className = "flex flex-col gap-y-4 pb-4" >
281
+ < div className = "flex h-[4.875rem] w-full items-center justify-between gap-[1rem]" >
282
+ < div className = "flex h-[2.875rem] w-[22.563rem] flex-col items-start justify-center" >
283
+ < h1 className = "font-geist h-[1.5rem] w-[18.688rem] text-[1rem] font-[500]" >
284
+ Should the private key be saved or not?
285
+ </ h1 >
286
+ < h1 className = "font-inter h-[1.25rem] w-[16.563rem] text-[0.8rem] font-normal text-[#A1A1AA] " >
287
+ Choose if you want to save your private key
288
+ </ h1 >
289
+ </ div >
276
290
277
- < div className = "p-[0.125rem]" >
278
- < Switch
279
- checked = { newProjectData . storePrivateKey }
280
- className = "h-[1.25rem] w-[2.25rem]"
281
- onCheckedChange = { ( checked ) => {
282
- setNewProjectData ( ( prev ) => ( {
283
- ... prev ,
284
- storePrivateKey : checked
285
- } ) )
286
- } }
287
- / >
291
+ < div className = "p-[0.125rem]" >
292
+ < Switch
293
+ checked = { newProjectData . storePrivateKey }
294
+ onCheckedChange = { ( checked ) => {
295
+ setNewProjectData ( ( prev ) => ( {
296
+ ... prev ,
297
+ storePrivateKey : checked
298
+ } ) )
299
+ } }
300
+ />
301
+ </ div >
288
302
</ div >
303
+ {
304
+ newProjectData . storePrivateKey ? (
305
+ < div className = "p-4 border border-yellow-300 rounded-lg" ref = { privateKeyWarningRef } >
306
+ < p className = "text-[0.8rem] font-normal text-[#A1A1AA]" > Enabling this would save the private key in our database. This would allow all permissible members to read your secrets. In the unnatural event of a data breach, your secrets might be exposed to attackers. We recommend you to not save your private key.</ p >
307
+ </ div >
308
+ ) : null
309
+ }
289
310
</ div >
290
311
</ div >
291
312
</ div >
292
- < div className = "flex h-[2.25rem] w-[25.625rem] justify-end" >
313
+ < div className = "flex h-[2.25rem] w-full justify-end" >
293
314
< Button
294
315
className = "font-inter h-[2.25rem] w-[8rem] rounded-[0.375rem] text-[0.875rem] font-[500]"
295
316
disabled = { isLoading }
0 commit comments