add branding logo component

This commit is contained in:
miloschwartz
2025-07-15 16:24:16 -07:00
parent e99905e3c9
commit 19d54778f5
5 changed files with 97 additions and 61 deletions

View File

@@ -32,6 +32,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
import Image from "next/image";
import { cleanRedirect } from "@app/lib/cleanRedirect";
import { useTranslations } from "next-intl";
import BrandingLogo from "@app/components/BrandingLogo";
type SignupFormProps = {
redirect?: string;
@@ -88,9 +89,7 @@ export default function SignupForm({
})
.catch((e) => {
console.error(e);
setError(
formatAxiosError(e, t('signupError'))
);
setError(formatAxiosError(e, t("signupError")));
});
if (res && res.status === 200) {
@@ -117,24 +116,21 @@ export default function SignupForm({
setLoading(false);
}
function getSubtitle() {
return t("authCreateAccount");
}
return (
<Card className="w-full max-w-md shadow-md">
<CardHeader className="border-b">
<div className="flex flex-row items-center justify-center">
<Image
src={`/logo/pangolin_orange.svg`}
alt={t('pangolinLogoAlt')}
width="100"
height="100"
<BrandingLogo
height={58}
width={175}
/>
</div>
<div className="text-center space-y-1">
<h1 className="text-2xl font-bold mt-1">
{t('welcome')}
</h1>
<p className="text-sm text-muted-foreground">
{t('authCreateAccount')}
</p>
<div className="text-center space-y-1 pt-3">
<p className="text-muted-foreground">{getSubtitle()}</p>
</div>
</CardHeader>
<CardContent className="pt-6">
@@ -148,7 +144,7 @@ export default function SignupForm({
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>{t('email')}</FormLabel>
<FormLabel>{t("email")}</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
@@ -161,7 +157,7 @@ export default function SignupForm({
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>{t('password')}</FormLabel>
<FormLabel>{t("password")}</FormLabel>
<FormControl>
<Input type="password" {...field} />
</FormControl>
@@ -174,7 +170,9 @@ export default function SignupForm({
name="confirmPassword"
render={({ field }) => (
<FormItem>
<FormLabel>{t('confirmPassword')}</FormLabel>
<FormLabel>
{t("confirmPassword")}
</FormLabel>
<FormControl>
<Input type="password" {...field} />
</FormControl>
@@ -190,7 +188,7 @@ export default function SignupForm({
)}
<Button type="submit" className="w-full">
{t('createAccount')}
{t("createAccount")}
</Button>
</form>
</Form>