@@ -35,9 +35,8 @@ const createPollSchema = z.object({
3535 . min ( 2 , "At least 2 options required" ) ,
3636 deadline : z
3737 . string ( )
38- . optional ( )
38+ . min ( 1 , "Deadline is required" )
3939 . refine ( ( val ) => {
40- if ( ! val ) return true ; // Allow empty deadline
4140 const date = new Date ( val ) ;
4241 return ! Number . isNaN ( date . getTime ( ) ) && date > new Date ( ) ;
4342 } , "Deadline must be a valid future date" ) ,
@@ -217,15 +216,16 @@ export default function CreatePoll() {
217216 { /* Vote Deadline */ }
218217 < div >
219218 < Label className = "text-sm font-semibold text-gray-700" >
220- Vote Deadline (Optional)
219+ Vote Deadline
221220 </ Label >
222221 < Input
223222 { ...register ( "deadline" ) }
224223 type = "datetime-local"
225224 className = "mt-2 focus:ring-(--crimson) focus:border-(--crimson)"
225+ required
226226 />
227227 < p className = "mt-1 text-sm text-gray-500" >
228- Leave empty for no deadline. Voting will be open indefinitely .
228+ Set a deadline for when voting will end .
229229 </ p >
230230 { errors . deadline && (
231231 < p className = "mt-1 text-sm text-red-600" >
@@ -234,6 +234,59 @@ export default function CreatePoll() {
234234 ) }
235235 </ div >
236236
237+ { /* Vote Visibility */ }
238+ < div >
239+ < Label className = "text-sm font-semibold text-gray-700" >
240+ Vote Visibility
241+ </ Label >
242+ < div className = "mt-2 space-y-3" >
243+ < Label className = { `flex items-center cursor-pointer p-4 border-2 rounded-lg transition-all duration-200 ${
244+ watchedVisibility === "public"
245+ ? "border-(--crimson) bg-(--crimson) text-white"
246+ : "border-gray-300 hover:border-gray-400"
247+ } `} >
248+ < input
249+ type = "radio"
250+ value = "public"
251+ { ...register ( "visibility" ) }
252+ className = "sr-only"
253+ />
254+ < div className = "flex items-center" >
255+ < Eye className = "w-6 h-6 mr-3" />
256+ < div >
257+ < div className = "font-semibold" > Public</ div >
258+ < div className = "text-sm opacity-90" > Voters are public</ div >
259+ </ div >
260+ </ div >
261+ </ Label >
262+
263+ < Label className = { `flex items-center cursor-pointer p-4 border-2 rounded-lg transition-all duration-200 ${
264+ watchedVisibility === "private"
265+ ? "border-(--crimson) bg-(--crimson) text-white"
266+ : "border-gray-300 hover:border-gray-400"
267+ } `} >
268+ < input
269+ type = "radio"
270+ value = "private"
271+ { ...register ( "visibility" ) }
272+ className = "sr-only"
273+ />
274+ < div className = "flex items-center" >
275+ < UserX className = "w-6 h-6 mr-3" />
276+ < div >
277+ < div className = "font-semibold" > Private</ div >
278+ < div className = "text-sm opacity-90" > Voters are hidden</ div >
279+ </ div >
280+ </ div >
281+ </ Label >
282+ </ div >
283+ { errors . visibility && (
284+ < p className = "mt-1 text-sm text-red-600" >
285+ { errors . visibility . message }
286+ </ p >
287+ ) }
288+ </ div >
289+
237290 { /* Vote Type */ }
238291 < div >
239292 < Label className = "text-sm font-semibold text-gray-700" >
@@ -263,13 +316,16 @@ export default function CreatePoll() {
263316 < Label className = { `flex items-center cursor-pointer p-4 border-2 rounded-lg transition-all duration-200 ${
264317 watchedMode === "point"
265318 ? "border-(--crimson) bg-(--crimson) text-white"
319+ : watchedVisibility === "private"
320+ ? "border-gray-300 bg-gray-100 opacity-50 cursor-not-allowed"
266321 : "border-gray-300 hover:border-gray-400"
267322 } `} >
268323 < input
269324 type = "radio"
270325 value = "point"
271326 { ...register ( "mode" ) }
272327 className = "sr-only"
328+ disabled = { watchedVisibility === "private" }
273329 />
274330 < div className = "flex items-center" >
275331 < ChartLine className = "w-6 h-6 mr-3" />
@@ -283,13 +339,16 @@ export default function CreatePoll() {
283339 < Label className = { `flex items-center cursor-pointer p-4 border-2 rounded-lg transition-all duration-200 ${
284340 watchedMode === "rank"
285341 ? "border-(--crimson) bg-(--crimson) text-white"
342+ : watchedVisibility === "private"
343+ ? "border-gray-300 bg-gray-100 opacity-50 cursor-not-allowed"
286344 : "border-gray-300 hover:border-gray-400"
287345 } `} >
288346 < input
289347 type = "radio"
290348 value = "rank"
291349 { ...register ( "mode" ) }
292350 className = "sr-only"
351+ disabled = { watchedVisibility === "private" }
293352 />
294353 < div className = "flex items-center" >
295354 < ListOrdered className = "w-6 h-6 mr-3" />
@@ -363,59 +422,6 @@ export default function CreatePoll() {
363422 < p className = "mt-2 text-sm text-gray-500" > Coming soon - currently disabled</ p >
364423 </ div >
365424
366- { /* Vote Visibility */ }
367- < div >
368- < Label className = "text-sm font-semibold text-gray-700" >
369- Vote Visibility
370- </ Label >
371- < div className = "mt-2 space-y-3" >
372- < Label className = { `flex items-center cursor-pointer p-4 border-2 rounded-lg transition-all duration-200 ${
373- watchedVisibility === "public"
374- ? "border-(--crimson) bg-(--crimson) text-white"
375- : "border-gray-300 hover:border-gray-400"
376- } `} >
377- < input
378- type = "radio"
379- value = "public"
380- { ...register ( "visibility" ) }
381- className = "sr-only"
382- />
383- < div className = "flex items-center" >
384- < Eye className = "w-6 h-6 mr-3" />
385- < div >
386- < div className = "font-semibold" > Public</ div >
387- < div className = "text-sm opacity-90" > Voters are public</ div >
388- </ div >
389- </ div >
390- </ Label >
391-
392- < Label className = { `flex items-center cursor-pointer p-4 border-2 rounded-lg transition-all duration-200 ${
393- watchedVisibility === "private"
394- ? "border-(--crimson) bg-(--crimson) text-white"
395- : "border-gray-300 hover:border-gray-400"
396- } `} >
397- < input
398- type = "radio"
399- value = "private"
400- { ...register ( "visibility" ) }
401- className = "sr-only"
402- />
403- < div className = "flex items-center" >
404- < UserX className = "w-6 h-6 mr-3" />
405- < div >
406- < div className = "font-semibold" > Private</ div >
407- < div className = "text-sm opacity-90" > Voters are hidden</ div >
408- </ div >
409- </ div >
410- </ Label >
411- </ div >
412- { errors . visibility && (
413- < p className = "mt-1 text-sm text-red-600" >
414- { errors . visibility . message }
415- </ p >
416- ) }
417- </ div >
418-
419425 { /* Vote Options */ }
420426 < div >
421427 < Label className = "text-sm font-semibold text-gray-700" >
0 commit comments