Gabriel Kaszewski
81df6eb8ff
- Introduced AccessMode enum to define channel access levels: Public, PasswordProtected, AccountRequired, and OwnerOnly. - Updated Channel and ProgrammingBlock entities to include access_mode and access_password_hash fields. - Enhanced create and update channel functionality to handle access mode and password. - Implemented access checks in channel routes based on the defined access modes. - Modified frontend components to support channel creation and editing with access control options. - Added ChannelPasswordModal for handling password input when accessing restricted channels. - Updated API calls to include channel and block passwords as needed. - Created database migrations to add access_mode and access_password_hash columns to channels table.
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
interface ChannelPasswordModalProps {
|
|
label: string;
|
|
onSubmit: (password: string) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export function ChannelPasswordModal({
|
|
label,
|
|
onSubmit,
|
|
onCancel,
|
|
}: ChannelPasswordModalProps) {
|
|
const [value, setValue] = useState("");
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (value.trim()) onSubmit(value.trim());
|
|
};
|
|
|
|
return (
|
|
<div className="absolute inset-0 z-40 flex items-center justify-center bg-black/80 backdrop-blur-sm">
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="flex w-80 flex-col gap-4 rounded-xl border border-zinc-700 bg-zinc-900 p-6 shadow-2xl"
|
|
>
|
|
<div className="text-center">
|
|
<p className="text-sm font-semibold uppercase tracking-widest text-zinc-400">
|
|
{label}
|
|
</p>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
autoFocus
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
placeholder="Enter password"
|
|
className="rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/60 px-4 py-2 text-xs text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-zinc-100"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={!value.trim()}
|
|
className="flex-1 rounded-md bg-zinc-100 px-4 py-2 text-xs font-medium text-zinc-900 transition-colors hover:bg-white disabled:opacity-40"
|
|
>
|
|
Unlock
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|