fix: validate/convert slug input

This commit is contained in:
Henry
2026-04-02 13:06:22 +01:00
parent a713d09c46
commit edc9e1254e
2 changed files with 14 additions and 5 deletions

View File

@@ -75,8 +75,8 @@ export default function SelectPlanView() {
{ {
id: "team", id: "team",
name: t`Team`, name: t`Team`,
monthly: "$12/user/mo", monthly: "$10/user/mo",
annual: "$10/user/mo", annual: "$8/user/mo",
description: t`Best for small teams who want to collaborate and move faster together.`, description: t`Best for small teams who want to collaborate and move faster together.`,
trial: true, trial: true,
}, },

View File

@@ -171,7 +171,16 @@ export default function WorkspaceNameView() {
<Input <Input
placeholder={t`your-workspace`} placeholder={t`your-workspace`}
value={isProToggle ? slug : t`your-workspace`} value={isProToggle ? slug : t`your-workspace`}
onChange={(e) => setSlug(e.target.value)} onChange={(e) =>
setSlug(
e.target.value
.toLowerCase()
.replace(/[^a-z0-9\s-]/g, "")
.replace(/\s+/g, "-")
.replace(/-+/g, "-")
.slice(0, 60),
)
}
disabled={!isProToggle} disabled={!isProToggle}
prefix="kan.bn/" prefix="kan.bn/"
className={ className={
@@ -267,7 +276,7 @@ export default function WorkspaceNameView() {
</div> </div>
{/* Browser content */} {/* Browser content */}
<div className="flex flex-1 flex-col items-center overflow-hidden px-5 py-5"> <div className="flex flex-1 flex-col items-center overflow-hidden px-14 py-8">
{/* Workspace name + description */} {/* Workspace name + description */}
<p className="text-center text-xs font-bold text-light-1000 dark:text-dark-1000"> <p className="text-center text-xs font-bold text-light-1000 dark:text-dark-1000">
{name || t`Your workspace`} {name || t`Your workspace`}
@@ -292,7 +301,7 @@ export default function WorkspaceNameView() {
opacity: { duration: 0.2 }, opacity: { duration: 0.2 },
y: { duration: 0.25, ease: "easeOut" }, y: { duration: 0.25, ease: "easeOut" },
}} }}
className="flex flex-1 w-full items-center justify-center rounded border border-dashed border-light-400 bg-light-50 px-3 text-[10px] font-medium text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900" className="flex w-full flex-1 items-center justify-center rounded border border-dashed border-light-400 bg-light-50 px-3 text-[10px] font-medium text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900"
> >
{board} {board}
</motion.div> </motion.div>