Skip to content

Commit

Permalink
🔒️ Hide link to login from registration (#1158)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukevella
lukevella authored Jun 17, 2024
1 parent 3e0f5a4 commit 093ed11
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 128 deletions.
24 changes: 2 additions & 22 deletions apps/web/src/app/[locale]/(auth)/register/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,9 @@
import Link from "next/link";
import { Trans } from "react-i18next/TransWithoutContext";

import { RegisterForm } from "@/app/[locale]/(auth)/register/register-page";
import { Params } from "@/app/[locale]/types";
import { getTranslation } from "@/app/i18n";
import { AuthCard } from "@/components/auth/auth-layout";

export default async function Page({ params }: { params: Params }) {
const { t } = await getTranslation(params.locale);
return (
<div>
<AuthCard>
<RegisterForm />
</AuthCard>
<div className="mt-4 pt-4 text-center text-gray-500 sm:text-base">
<Trans
t={t}
i18nKey="alreadyRegistered"
components={{
a: <Link href="/login" className="text-link" />,
}}
/>
</div>
</div>
);
export default async function Page() {
return <RegisterForm />;
}

export async function generateMetadata({ params }: { params: Params }) {
Expand Down
231 changes: 125 additions & 106 deletions apps/web/src/app/[locale]/(auth)/register/register-page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";
import { Button } from "@rallly/ui/button";
import { Input } from "@rallly/ui/input";
import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import { signIn } from "next-auth/react";
import { useTranslation } from "next-i18next";
Expand All @@ -9,6 +10,8 @@ import React from "react";
import { useForm } from "react-hook-form";

import { VerifyCode } from "@/components/auth/auth-forms";
import { AuthCard } from "@/components/auth/auth-layout";
import { Trans } from "@/components/trans";
import { useDayjs } from "@/utils/dayjs";
import { requiredString, validEmail } from "@/utils/form-validation";
import { trpc } from "@/utils/trpc/client";
Expand Down Expand Up @@ -36,121 +39,137 @@ export const RegisterForm = () => {
const posthog = usePostHog();
if (token) {
return (
<VerifyCode
onSubmit={async (code) => {
// get user's time zone
const locale = params?.locale ?? "en";
const res = await authenticateRegistration.mutateAsync({
token,
timeZone,
locale,
code,
});
<AuthCard>
<VerifyCode
onSubmit={async (code) => {
// get user's time zone
const locale = params?.locale ?? "en";
const res = await authenticateRegistration.mutateAsync({
token,
timeZone,
locale,
code,
});

if (!res.user) {
throw new Error("Failed to authenticate user");
}
if (!res.user) {
throw new Error("Failed to authenticate user");
}

queryClient.invalidate();
queryClient.invalidate();

posthog?.identify(res.user.id, {
email: res.user.email,
name: res.user.name,
timeZone,
locale,
});
posthog?.identify(res.user.id, {
email: res.user.email,
name: res.user.name,
timeZone,
locale,
});

posthog?.capture("register");
posthog?.capture("register");

signIn("registration-token", {
token,
callbackUrl: searchParams?.get("callbackUrl") ?? undefined,
});
}}
email={getValues("email")}
/>
signIn("registration-token", {
token,
callbackUrl: searchParams?.get("callbackUrl") ?? undefined,
});
}}
email={getValues("email")}
/>
</AuthCard>
);
}

return (
<form
onSubmit={handleSubmit(async (data) => {
const res = await requestRegistration.mutateAsync({
email: data.email,
name: data.name,
});
<div>
<AuthCard>
<form
onSubmit={handleSubmit(async (data) => {
const res = await requestRegistration.mutateAsync({
email: data.email,
name: data.name,
});

if (!res.ok) {
switch (res.reason) {
case "userAlreadyExists":
setError("email", {
message: t("userAlreadyExists"),
});
break;
case "emailNotAllowed":
setError("email", {
message: t("emailNotAllowed"),
});
}
} else {
setToken(res.token);
}
})}
>
<div className="mb-1 text-2xl font-bold">{t("createAnAccount")}</div>
<p className="mb-4 text-gray-500">
{t("stepSummary", {
current: 1,
total: 2,
})}
</p>
<fieldset className="mb-4">
<label htmlFor="name" className="mb-1 text-gray-500">
{t("name")}
</label>
<Input
id="name"
className="w-full"
size="lg"
autoFocus={true}
error={!!formState.errors.name}
disabled={formState.isSubmitting}
placeholder={t("namePlaceholder")}
{...register("name", { validate: requiredString })}
/>
{formState.errors.name?.message ? (
<div className="mt-2 text-sm text-rose-500">
{formState.errors.name.message}
</div>
) : null}
</fieldset>
<fieldset className="mb-4">
<label htmlFor="email" className="mb-1 text-gray-500">
{t("email")}
</label>
<Input
className="w-full"
id="email"
size="lg"
error={!!formState.errors.email}
disabled={formState.isSubmitting}
placeholder={t("emailPlaceholder")}
{...register("email", { validate: validEmail })}
/>
{formState.errors.email?.message ? (
<div className="mt-1 text-sm text-rose-500">
{formState.errors.email.message}
</div>
) : null}
</fieldset>
<Button
loading={formState.isSubmitting}
type="submit"
variant="primary"
size="lg"
>
{t("continue")}
</Button>
</form>
if (!res.ok) {
switch (res.reason) {
case "userAlreadyExists":
setError("email", {
message: t("userAlreadyExists"),
});
break;
case "emailNotAllowed":
setError("email", {
message: t("emailNotAllowed"),
});
}
} else {
setToken(res.token);
}
})}
>
<div className="mb-1 text-2xl font-bold">{t("createAnAccount")}</div>
<p className="mb-4 text-gray-500">
{t("stepSummary", {
current: 1,
total: 2,
})}
</p>
<fieldset className="mb-4">
<label htmlFor="name" className="mb-1 text-gray-500">
{t("name")}
</label>
<Input
id="name"
className="w-full"
size="lg"
autoFocus={true}
error={!!formState.errors.name}
disabled={formState.isSubmitting}
placeholder={t("namePlaceholder")}
{...register("name", { validate: requiredString })}
/>
{formState.errors.name?.message ? (
<div className="mt-2 text-sm text-rose-500">
{formState.errors.name.message}
</div>
) : null}
</fieldset>
<fieldset className="mb-4">
<label htmlFor="email" className="mb-1 text-gray-500">
{t("email")}
</label>
<Input
className="w-full"
id="email"
size="lg"
error={!!formState.errors.email}
disabled={formState.isSubmitting}
placeholder={t("emailPlaceholder")}
{...register("email", { validate: validEmail })}
/>
{formState.errors.email?.message ? (
<div className="mt-1 text-sm text-rose-500">
{formState.errors.email.message}
</div>
) : null}
</fieldset>
<Button
loading={formState.isSubmitting}
type="submit"
variant="primary"
size="lg"
>
{t("continue")}
</Button>
</form>
</AuthCard>
{!getValues("email") ? (
<div className="mt-4 pt-4 text-center text-gray-500 sm:text-base">
<Trans
i18nKey="alreadyRegistered"
components={{
a: <Link href="/login" className="text-link" />,
}}
/>
</div>
) : null}
</div>
);
};

0 comments on commit 093ed11

Please sign in to comment.