@@ -24,6 +24,7 @@ const tooltipText = ref('Copied to clipboard');
2424const clipboard = useClipboard ();
2525const accessUrlInput = ref <HTMLInputElement | null >(null );
2626const isLoading = ref (false );
27+ const errorMessage = ref (' ' );
2728
2829const { mutate } = useMutation ({
2930 mutationKey: [' getAccessLink' ],
@@ -50,31 +51,39 @@ function copyToClipboard(url: string) {
5051
5152async function newAccessLink() {
5253 isLoading .value = true ;
53- const url = await sharingStore .createAccessLink (
54- props .folderId ,
55- password .value ,
56- expiration .value
57- );
58-
59- if (! url ) {
54+ try {
55+ const url = await sharingStore .createAccessLink (
56+ props .folderId ,
57+ password .value ,
58+ expiration .value
59+ );
60+
61+ if (! url ) {
62+ emit (' createAccessLinkError' );
63+ errorMessage .value = ' Failed to create access link. Please try again.' ;
64+ isLoading .value = false ;
65+ return ;
66+ }
67+
68+ accessUrl .value = url ;
69+
70+ if (! password .value .length ) {
71+ mutate ();
72+ }
73+
74+ // Copy url to clipboard
75+ clipboard .copy (url );
76+
77+ // Focus the input
78+ accessUrlInput .value ?.focus ();
79+
80+ await refreshAccessLinks ();
81+ isLoading .value = false ;
82+ } catch (error ) {
6083 emit (' createAccessLinkError' );
61- return ;
62- }
63-
64- accessUrl .value = url ;
65-
66- if (! password .value .length ) {
67- mutate ();
84+ errorMessage .value = error ;
85+ isLoading .value = false ;
6886 }
69-
70- // Copy url to clipboard
71- clipboard .copy (url );
72-
73- // Focus the input
74- accessUrlInput .value ?.focus ();
75-
76- await refreshAccessLinks ();
77- isLoading .value = false ;
7887}
7988
8089watch (
8493 expiration .value = null ;
8594 accessUrl .value = ' ' ;
8695 showPassword .value = false ;
96+ errorMessage .value = ' ' ;
8797 }
8898);
8999 </script >
@@ -102,7 +112,6 @@ watch(
102112 </label >
103113 <label class =" form-label" >
104114 <span class =" label-text" >Link Expires</span >
105- <input v-model =" expiration" type =" datetime-local" />
106115 </label >
107116 <label class =" form-label password-field" >
108117 <span class =" label-text" >Password</span >
@@ -120,6 +129,12 @@ watch(
120129 </button >
121130 </label >
122131 </section >
132+
133+ <!-- Error message display -->
134+ <div v-if =" errorMessage" class =" error-message" data-testid =" error-message" >
135+ {{ errorMessage }}
136+ </div >
137+
123138 <Btn
124139 class="create-button"
125140 data-testid="create-share-link"
@@ -174,4 +189,14 @@ watch(
174189.create-button {
175190 margin-bottom : 2rem ;
176191}
192+
193+ .error-message {
194+ background-color : #fee2e2 ;
195+ border : 1px solid #fecaca ;
196+ color : #dc2626 ;
197+ padding : 0.75rem ;
198+ border-radius : 0.375rem ;
199+ font-size : 0.875rem ;
200+ margin-bottom : 1rem ;
201+ }
177202 </style >
0 commit comments