@@ -27,145 +27,149 @@ import { toast } from "sonner";
2727import { z } from "zod" ;
2828
2929const DockerProviderSchema = z . object ( {
30- externalPort : z . preprocess ( ( a ) => {
31- if ( a !== null ) {
32- const parsed = Number . parseInt ( z . string ( ) . parse ( a ) , 10 ) ;
33- return Number . isNaN ( parsed ) ? null : parsed ;
34- }
35- return null ;
36- } , z . number ( ) . gte ( 0 , "Range must be 0 - 65535" ) . lte ( 65535 , "Range must be 0 - 65535" ) . nullable ( ) ) ,
30+ externalPort : z . preprocess ( ( a ) => {
31+ if ( a !== null ) {
32+ const parsed = Number . parseInt ( z . string ( ) . parse ( a ) , 10 ) ;
33+ return Number . isNaN ( parsed ) ? null : parsed ;
34+ }
35+ return null ;
36+ } , z
37+ . number ( )
38+ . gte ( 0 , "Range must be 0 - 65535" )
39+ . lte ( 65535 , "Range must be 0 - 65535" )
40+ . nullable ( ) ) ,
3741} ) ;
3842
3943type DockerProvider = z . infer < typeof DockerProviderSchema > ;
4044
4145interface Props {
42- mariadbId : string ;
46+ mariadbId : string ;
4347}
4448export const ShowExternalMariadbCredentials = ( { mariadbId } : Props ) => {
45- const { data : ip } = api . settings . getIp . useQuery ( ) ;
46- const { data, refetch } = api . mariadb . one . useQuery ( { mariadbId } ) ;
47- const { mutateAsync, isLoading } = api . mariadb . saveExternalPort . useMutation ( ) ;
48- const [ connectionUrl , setConnectionUrl ] = useState ( "" ) ;
49- const getIp = data ?. server ?. ipAddress || ip ;
50- const form = useForm < DockerProvider > ( {
51- defaultValues : { } ,
52- resolver : zodResolver ( DockerProviderSchema ) ,
53- } ) ;
49+ const { data : ip } = api . settings . getIp . useQuery ( ) ;
50+ const { data, refetch } = api . mariadb . one . useQuery ( { mariadbId } ) ;
51+ const { mutateAsync, isLoading } = api . mariadb . saveExternalPort . useMutation ( ) ;
52+ const [ connectionUrl , setConnectionUrl ] = useState ( "" ) ;
53+ const getIp = data ?. server ?. ipAddress || ip ;
54+ const form = useForm < DockerProvider > ( {
55+ defaultValues : { } ,
56+ resolver : zodResolver ( DockerProviderSchema ) ,
57+ } ) ;
5458
55- useEffect ( ( ) => {
56- if ( data ?. externalPort ) {
57- form . reset ( {
58- externalPort : data . externalPort ,
59- } ) ;
60- }
61- } , [ form . reset , data , form ] ) ;
59+ useEffect ( ( ) => {
60+ if ( data ?. externalPort ) {
61+ form . reset ( {
62+ externalPort : data . externalPort ,
63+ } ) ;
64+ }
65+ } , [ form . reset , data , form ] ) ;
6266
63- const onSubmit = async ( values : DockerProvider ) => {
64- await mutateAsync ( {
65- externalPort : values . externalPort ,
66- mariadbId,
67- } )
68- . then ( async ( ) => {
69- toast . success ( "External Port updated" ) ;
70- await refetch ( ) ;
71- } )
72- . catch ( ( ) => {
73- toast . error ( "Error saving the external port" ) ;
74- } ) ;
75- } ;
67+ const onSubmit = async ( values : DockerProvider ) => {
68+ await mutateAsync ( {
69+ externalPort : values . externalPort ,
70+ mariadbId,
71+ } )
72+ . then ( async ( ) => {
73+ toast . success ( "External Port updated" ) ;
74+ await refetch ( ) ;
75+ } )
76+ . catch ( ( ) => {
77+ toast . error ( "Error saving the external port" ) ;
78+ } ) ;
79+ } ;
7680
77- useEffect ( ( ) => {
78- const buildConnectionUrl = ( ) => {
79- const port = form . watch ( "externalPort" ) || data ?. externalPort ;
81+ useEffect ( ( ) => {
82+ const buildConnectionUrl = ( ) => {
83+ const port = form . watch ( "externalPort" ) || data ?. externalPort ;
8084
81- return `mariadb://${ data ?. databaseUser } ${ data ?. databasePassword } ${ getIp } ${ port } ${ data ?. databaseName } ;
82- } ;
85+ return `mariadb://${ data ?. databaseUser } ${ data ?. databasePassword } ${ getIp } ${ port } ${ data ?. databaseName } ;
86+ } ;
8387
84- setConnectionUrl ( buildConnectionUrl ( ) ) ;
85- } , [
86- data ?. appName ,
87- data ?. externalPort ,
88- data ?. databasePassword ,
89- form ,
90- data ?. databaseName ,
91- data ?. databaseUser ,
92- getIp ,
93- ] ) ;
94- return (
95- < >
96- < div className = "flex w-full flex-col gap-5 " >
97- < Card className = "bg-background" >
98- < CardHeader >
99- < CardTitle className = "text-xl" > External Credentials</ CardTitle >
100- < CardDescription >
101- In order to make the database reachable trought internet is
102- required to set a port, make sure the port is not used by another
103- application or database
104- </ CardDescription >
105- </ CardHeader >
106- < CardContent className = "flex w-full flex-col gap-4" >
107- { ! getIp && (
108- < AlertBlock type = "warning" >
109- You need to set an IP address in your{ " " }
110- < Link
111- href = "/dashboard/settings/server"
112- className = "text-primary"
113- >
114- { data ?. serverId
115- ? "Remote Servers -> Server -> Edit Server -> Update IP Address"
116- : "Web Server -> Server -> Update Server IP" }
117- </ Link > { " " }
118- to fix the database url connection.
119- </ AlertBlock >
120- ) }
121- < Form { ...form } >
122- < form
123- onSubmit = { form . handleSubmit ( onSubmit ) }
124- className = "flex flex-col gap-4"
125- >
126- < div className = "grid md:grid-cols-2 gap-4 " >
127- < div className = "md:col-span-2 space-y-4" >
128- < FormField
129- control = { form . control }
130- name = "externalPort"
131- render = { ( { field } ) => {
132- return (
133- < FormItem >
134- < FormLabel > External Port (Internet)</ FormLabel >
135- < FormControl >
136- < Input
137- placeholder = "3306"
138- { ...field }
139- value = { field . value || "" }
140- />
141- </ FormControl >
142- < FormMessage />
143- </ FormItem >
144- ) ;
145- } }
146- />
147- </ div >
148- </ div >
149- { ! ! data ?. externalPort && (
150- < div className = "grid w-full gap-8" >
151- < div className = "flex flex-col gap-3" >
152- { /* jdbc:mariadb://5.161.59.207:3306/pixel-calculate?user=mariadb&password=HdVXfq6hM7W7F1 */ }
153- < Label > External Host</ Label >
154- < ToggleVisibilityInput value = { connectionUrl } disabled />
155- </ div >
156- </ div >
157- ) }
88+ setConnectionUrl ( buildConnectionUrl ( ) ) ;
89+ } , [
90+ data ?. appName ,
91+ data ?. externalPort ,
92+ data ?. databasePassword ,
93+ form ,
94+ data ?. databaseName ,
95+ data ?. databaseUser ,
96+ getIp ,
97+ ] ) ;
98+ return (
99+ < >
100+ < div className = "flex w-full flex-col gap-5 " >
101+ < Card className = "bg-background" >
102+ < CardHeader >
103+ < CardTitle className = "text-xl" > External Credentials</ CardTitle >
104+ < CardDescription >
105+ In order to make the database reachable trought internet is
106+ required to set a port, make sure the port is not used by another
107+ application or database
108+ </ CardDescription >
109+ </ CardHeader >
110+ < CardContent className = "flex w-full flex-col gap-4" >
111+ { ! getIp && (
112+ < AlertBlock type = "warning" >
113+ You need to set an IP address in your{ " " }
114+ < Link
115+ href = "/dashboard/settings/server"
116+ className = "text-primary"
117+ >
118+ { data ?. serverId
119+ ? "Remote Servers -> Server -> Edit Server -> Update IP Address"
120+ : "Web Server -> Server -> Update Server IP" }
121+ </ Link > { " " }
122+ to fix the database url connection.
123+ </ AlertBlock >
124+ ) }
125+ < Form { ...form } >
126+ < form
127+ onSubmit = { form . handleSubmit ( onSubmit ) }
128+ className = "flex flex-col gap-4"
129+ >
130+ < div className = "grid md:grid-cols-2 gap-4 " >
131+ < div className = "md:col-span-2 space-y-4" >
132+ < FormField
133+ control = { form . control }
134+ name = "externalPort"
135+ render = { ( { field } ) => {
136+ return (
137+ < FormItem >
138+ < FormLabel > External Port (Internet)</ FormLabel >
139+ < FormControl >
140+ < Input
141+ placeholder = "3306"
142+ { ...field }
143+ value = { field . value || "" }
144+ />
145+ </ FormControl >
146+ < FormMessage />
147+ </ FormItem >
148+ ) ;
149+ } }
150+ />
151+ </ div >
152+ </ div >
153+ { ! ! data ?. externalPort && (
154+ < div className = "grid w-full gap-8" >
155+ < div className = "flex flex-col gap-3" >
156+ { /* jdbc:mariadb://5.161.59.207:3306/pixel-calculate?user=mariadb&password=HdVXfq6hM7W7F1 */ }
157+ < Label > External Host</ Label >
158+ < ToggleVisibilityInput value = { connectionUrl } disabled />
159+ </ div >
160+ </ div >
161+ ) }
158162
159- < div className = "flex justify-end" >
160- < Button type = "submit" isLoading = { isLoading } >
161- Save
162- </ Button >
163- </ div >
164- </ form >
165- </ Form >
166- </ CardContent >
167- </ Card >
168- </ div >
169- </ >
170- ) ;
163+ < div className = "flex justify-end" >
164+ < Button type = "submit" isLoading = { isLoading } >
165+ Save
166+ </ Button >
167+ </ div >
168+ </ form >
169+ </ Form >
170+ </ CardContent >
171+ </ Card >
172+ </ div >
173+ </ >
174+ ) ;
171175} ;
0 commit comments