Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
proxy-manager-frontend
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
aolda
proxy-manager-frontend
Commits
7a50bd54
Commit
7a50bd54
authored
2 months ago
by
한동현
Browse files
Options
Downloads
Patches
Plain Diff
feat: 인증서 등록 페이지 API 연동
parent
59f25fea
No related branches found
No related tags found
No related merge requests found
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
src/pages/certificate/Create.tsx
+49
-16
49 additions, 16 deletions
src/pages/certificate/Create.tsx
with
49 additions
and
16 deletions
src/pages/certificate/Create.tsx
+
49
−
16
View file @
7a50bd54
import
{
z
}
from
'
zod
'
;
import
{
z
}
from
'
zod
'
;
import
{
zodResolver
}
from
'
@hookform/resolvers/zod
'
;
import
{
zodResolver
}
from
'
@hookform/resolvers/zod
'
;
import
{
Link
}
from
'
react-router
'
;
import
{
Link
,
useNavigate
}
from
'
react-router
'
;
import
{
useForm
}
from
'
react-hook-form
'
;
import
{
useForm
}
from
'
react-hook-form
'
;
import
{
Globe
,
HardDrive
}
from
'
lucide-react
'
;
import
{
Globe
,
HardDrive
,
LoaderCircle
}
from
'
lucide-react
'
;
import
{
Button
}
from
'
@/components/ui/button
'
;
import
{
Button
}
from
'
@/components/ui/button
'
;
import
{
Card
,
CardContent
,
CardHeader
,
CardTitle
}
from
'
@/components/ui/card
'
;
import
{
Card
,
CardContent
,
CardHeader
,
CardTitle
}
from
'
@/components/ui/card
'
;
import
{
Input
}
from
'
@/components/ui/input
'
;
import
{
Input
}
from
'
@/components/ui/input
'
;
...
@@ -11,6 +11,7 @@ import { Separator } from '@/components/ui/separator';
...
@@ -11,6 +11,7 @@ import { Separator } from '@/components/ui/separator';
import
{
toast
}
from
'
sonner
'
;
import
{
toast
}
from
'
sonner
'
;
import
{
Form
,
FormControl
,
FormDescription
,
FormField
,
FormItem
,
FormLabel
,
FormMessage
}
from
'
@/components/ui/form
'
;
import
{
Form
,
FormControl
,
FormDescription
,
FormField
,
FormItem
,
FormLabel
,
FormMessage
}
from
'
@/components/ui/form
'
;
import
{
Badge
}
from
'
@/components/ui/badge
'
;
import
{
Badge
}
from
'
@/components/ui/badge
'
;
import
{
useAuthStore
}
from
'
@/stores/authStore
'
;
const
formSchema
=
z
const
formSchema
=
z
.
object
({
.
object
({
...
@@ -24,32 +25,61 @@ const formSchema = z
...
@@ -24,32 +25,61 @@ const formSchema = z
.
regex
(
/^
(?=
.
{1,253}
$
)(?:(?:\*\.)?[
a-zA-Z0-9
](?:[
a-zA-Z0-9-
]{0,61}[
a-zA-Z0-9
])?\.)
+
[
a-zA-Z
]{2,}
$/
,
{
.
regex
(
/^
(?=
.
{1,253}
$
)(?:(?:\*\.)?[
a-zA-Z0-9
](?:[
a-zA-Z0-9-
]{0,61}[
a-zA-Z0-9
])?\.)
+
[
a-zA-Z
]{2,}
$/
,
{
message
:
'
올바른 도메인 주소를 입력해주세요
'
,
message
:
'
올바른 도메인 주소를 입력해주세요
'
,
}),
}),
api
_t
oken
:
z
.
string
(),
api
T
oken
:
z
.
string
(),
dns
_c
hallenge
:
z
.
boolean
(),
dns
C
hallenge
:
z
.
boolean
(),
})
})
.
refine
((
data
)
=>
!
data
.
dns
_c
hallenge
||
(
data
.
dns
_c
hallenge
&&
data
.
api
_t
oken
!==
''
),
{
.
refine
((
data
)
=>
!
data
.
dns
C
hallenge
||
(
data
.
dns
C
hallenge
&&
data
.
api
T
oken
!==
''
),
{
message
:
'
Cloudflare API 토큰을 입력해주세요
'
,
message
:
'
Cloudflare API 토큰을 입력해주세요
'
,
path
:
[
'
api
_t
oken
'
],
path
:
[
'
api
T
oken
'
],
})
})
.
refine
((
data
)
=>
!
data
.
domain
.
startsWith
(
'
*.
'
)
||
data
.
dns
_c
hallenge
,
{
.
refine
((
data
)
=>
!
data
.
domain
.
startsWith
(
'
*.
'
)
||
data
.
dns
C
hallenge
,
{
message
:
'
와일드카드 도메인 인증서는 DNS Challenge를 사용해야 합니다
'
,
message
:
'
와일드카드 도메인 인증서는 DNS Challenge를 사용해야 합니다
'
,
path
:
[
'
domain
'
],
path
:
[
'
domain
'
],
});
});
export
default
function
CertificateCreate
()
{
export
default
function
CertificateCreate
()
{
const
navigate
=
useNavigate
();
const
{
authFetch
,
selectedProject
}
=
useAuthStore
();
const
form
=
useForm
<
z
.
infer
<
typeof
formSchema
>>
({
const
form
=
useForm
<
z
.
infer
<
typeof
formSchema
>>
({
resolver
:
zodResolver
(
formSchema
),
resolver
:
zodResolver
(
formSchema
),
defaultValues
:
{
defaultValues
:
{
email
:
''
,
email
:
''
,
domain
:
''
,
domain
:
''
,
dns
_c
hallenge
:
false
,
dns
C
hallenge
:
false
,
api
_t
oken
:
''
,
api
T
oken
:
''
,
},
},
});
});
function
onSubmit
(
values
:
z
.
infer
<
typeof
formSchema
>
)
{
async
function
onSubmit
(
values
:
z
.
infer
<
typeof
formSchema
>
)
{
console
.
log
(
'
제출된 데이터:
'
,
values
);
const
{
email
,
domain
,
apiToken
,
dnsChallenge
}
=
values
;
toast
.
warning
(
'
신규 SSL 인증서를 등록합니다
'
);
const
challenge
=
dnsChallenge
?
'
dns_cloudflare
'
:
'
http
'
;
const
response
=
await
authFetch
(
`/api/certificate?projectId=
${
selectedProject
?.
id
}
`
,
{
method
:
'
POST
'
,
headers
:
{
'
Content-Type
'
:
'
application/json
'
,
},
body
:
JSON
.
stringify
({
email
,
domain
,
challenge
,
apiToken
,
}),
});
if
(
!
response
.
ok
)
{
console
.
error
(
response
);
const
{
code
}
=
await
response
.
json
();
if
(
code
==
'
UNAUTHORIZED_USER
'
)
{
toast
.
error
(
'
권한이 없는 사용자입니다
'
);
}
else
{
toast
.
error
(
'
인증서 등록에 실패했습니다
'
);
}
}
else
{
toast
.
success
(
'
SSL 인증서가 등록되었습니다
'
);
navigate
(
'
/certificate
'
);
}
}
}
return
(
return
(
...
@@ -108,7 +138,7 @@ export default function CertificateCreate() {
...
@@ -108,7 +138,7 @@ export default function CertificateCreate() {
<
CardContent
className
=
"space-y-4"
>
<
CardContent
className
=
"space-y-4"
>
<
FormField
<
FormField
control
=
{
form
.
control
}
control
=
{
form
.
control
}
name
=
"dns
_c
hallenge"
name
=
"dns
C
hallenge"
render
=
{
({
field
})
=>
(
render
=
{
({
field
})
=>
(
<
FormItem
className
=
"flex flex-row items-center justify-between"
>
<
FormItem
className
=
"flex flex-row items-center justify-between"
>
<
div
className
=
"space-y-0.5"
>
<
div
className
=
"space-y-0.5"
>
...
@@ -137,12 +167,12 @@ export default function CertificateCreate() {
...
@@ -137,12 +167,12 @@ export default function CertificateCreate() {
)
}
)
}
/>
/>
{
form
.
watch
(
'
dns
_c
hallenge
'
)
&&
(
{
form
.
watch
(
'
dns
C
hallenge
'
)
&&
(
<>
<>
<
Separator
/>
<
Separator
/>
<
FormField
<
FormField
control
=
{
form
.
control
}
control
=
{
form
.
control
}
name
=
"api
_t
oken"
name
=
"api
T
oken"
render
=
{
({
field
})
=>
(
render
=
{
({
field
})
=>
(
<
FormItem
>
<
FormItem
>
<
FormLabel
required
>
Cloudflare DNS API 토큰
</
FormLabel
>
<
FormLabel
required
>
Cloudflare DNS API 토큰
</
FormLabel
>
...
@@ -171,7 +201,10 @@ export default function CertificateCreate() {
...
@@ -171,7 +201,10 @@ export default function CertificateCreate() {
<
Button
variant
=
"outline"
asChild
>
<
Button
variant
=
"outline"
asChild
>
<
Link
to
=
".."
>
취소
</
Link
>
<
Link
to
=
".."
>
취소
</
Link
>
</
Button
>
</
Button
>
<
Button
type
=
"submit"
>
저장
</
Button
>
<
Button
type
=
"submit"
disabled
=
{
form
.
formState
.
isSubmitting
}
>
{
form
.
formState
.
isSubmitting
&&
<
LoaderCircle
className
=
"animate-spin"
/>
}
저장
</
Button
>
</
div
>
</
div
>
</
form
>
</
form
>
</
Form
>
</
Form
>
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment