rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update auth layout on console and compliance page to remove right panel

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-02-04 16:12:54 +04:00
parent 9f7c643085
commit d137e61ff0
12 changed files with 56 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/console/src/pages/iam/auth/AuthLayout.tsx
View File

@@ -1,23 +1,17 @@
import { Logo } from "@probo/ui"; import { Card, Logo } from "@probo/ui";
import { Outlet } from "react-router"; import { Outlet } from "react-router";
import { IAMRelayProvider } from "#/providers/IAMRelayProvider"; import { IAMRelayProvider } from "#/providers/IAMRelayProvider";
export default function AuthLayout() { export default function AuthLayout() {
return ( return (
<div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen text-txt-primary"> <div className="min-h-screen text-txt-primary bg-level-0 flex flex-col items-center justify-center">
<div className="bg-level-0 flex flex-col items-center justify-center"> <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center gap-8">
<div className="w-full max-w-md px-6"> <Logo withPicto className="w-[110px]" />
<IAMRelayProvider> <IAMRelayProvider>
<Outlet /> <Outlet />
</IAMRelayProvider> </IAMRelayProvider>
</div> </Card>
</div>
<div className="hidden lg:flex bg-dialog font-bold flex-col items-center justify-center p-8 text-txt-primary lg:p-10">
<div className="flex flex-col items-center justify-center gap-4">
<Logo withPicto className="w-[440px]" />
</div>
</div>
</div> </div>
); );
} }

2
apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
View File

@@ -135,7 +135,7 @@ export default function ForgotPasswordPage() {
<Button <Button
type="submit" type="submit"
className="w-full" className="w-xs h-10 mx-auto mt-6"
disabled={formState.isSubmitting} disabled={formState.isSubmitting}
> >
{formState.isSubmitting {formState.isSubmitting

2
apps/console/src/pages/iam/auth/ResetPasswordPage.tsx
View File

@@ -122,7 +122,7 @@ export default function ResetPasswordPage() {
error={formState.errors.confirmPassword?.message} error={formState.errors.confirmPassword?.message}
/> />
<Button type="submit" className="w-full" disabled={formState.isLoading}> <Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
{formState.isLoading {formState.isLoading
? __("Resetting password...") ? __("Resetting password...")
: __("Reset password")} : __("Reset password")}

2
apps/console/src/pages/iam/auth/VerifyEmailPage.tsx
View File

@@ -111,7 +111,7 @@ export default function VerifyEmailPage() {
<Button <Button
type="submit" type="submit"
className="w-full" className="w-xs h-10 mx-auto mt-6"
disabled={form.formState.isSubmitting} disabled={form.formState.isSubmitting}
> >
{form.formState.isSubmitting {form.formState.isSubmitting

36
apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx
View File

@@ -67,7 +67,7 @@ export default function PasswordSignInPage() {
}; };
return ( return (
<form className="space-y-4" onSubmit={handlePasswordLogin}> <form className="space-y-6 w-full max-w-md mx-auto" onSubmit={handlePasswordLogin}>
<Link <Link
to="/auth/login" to="/auth/login"
className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4" className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
@@ -83,24 +83,26 @@ export default function PasswordSignInPage() {
{__("Enter your email and password")} {__("Enter your email and password")}
</p> </p>
<Field <div className="space-y-4">
required <Field
placeholder={__("Email")} required
name="email" placeholder={__("Email")}
type="email" name="email"
label={__("Email")} type="email"
autoFocus label={__("Email")}
/> autoFocus
/>
<Field <Field
required required
placeholder={__("Password")} placeholder={__("Password")}
name="password" name="password"
type="password" type="password"
label={__("Password")} label={__("Password")}
/> />
</div>
<Button className="w-full" disabled={isSigningIn}> <Button className="w-xs h-10 mx-auto mt-6" disabled={isSigningIn}>
{isSigningIn ? __("Logging in...") : __("Login")} {isSigningIn ? __("Logging in...") : __("Login")}
</Button> </Button>

4
apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx
View File

@@ -37,7 +37,7 @@ export default function SSOSignInPage() {
return ( return (
<> <>
<form className="space-y-4" onSubmit={handleSSOCheck}> <form className="space-y-6 w-full max-w-md mx-auto" onSubmit={handleSSOCheck}>
<Link <Link
to="/auth/login" to="/auth/login"
className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4" className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
@@ -62,7 +62,7 @@ export default function SSOSignInPage() {
autoFocus autoFocus
/> />
<Button className="w-full" disabled={checking}> <Button className="w-xs h-10 mx-auto mt-6" disabled={checking}>
{checking ? __("Checking...") : __("Continue with SSO")} {checking ? __("Checking...") : __("Continue with SSO")}
</Button> </Button>

6
apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
View File

@@ -6,7 +6,7 @@ export default function SignInPage() {
const { __ } = useTranslate(); const { __ } = useTranslate();
return ( return (
<div className="space-y-4"> <div className="space-y-6 w-full max-w-md mx-auto">
<h1 className="text-center text-2xl font-bold"> <h1 className="text-center text-2xl font-bold">
{__("Login to your account")} {__("Login to your account")}
</h1> </h1>
@@ -14,7 +14,7 @@ export default function SignInPage() {
{__("Choose your login method")} {__("Choose your login method")}
</p> </p>
<Button className="w-full" to="/auth/password-login"> <Button className="w-xs h-10 mx-auto" to="/auth/password-login">
{__("Login with Email")} {__("Login with Email")}
</Button> </Button>
@@ -32,7 +32,7 @@ export default function SignInPage() {
</div> </div>
</div> </div>
<Button variant="secondary" className="w-full" to="/auth/sso-login"> <Button variant="secondary" className="w-xs h-10 mx-auto" to="/auth/sso-login">
{__("Login with SSO")} {__("Login with SSO")}
</Button> </Button>

2
apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx
View File

@@ -122,7 +122,7 @@ export default function SignUpFromInvitationPage() {
error={formState.errors.password?.message} error={formState.errors.password?.message}
/> />
<Button type="submit" className="w-full" disabled={formState.isLoading}> <Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
{formState.isLoading {formState.isLoading
? __("Creating account...") ? __("Creating account...")
: __("Create account")} : __("Create account")}

2
apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx
View File

@@ -117,7 +117,7 @@ export default function SignUpPage() {
error={formState.errors.password?.message} error={formState.errors.password?.message}
/> />
<Button type="submit" className="w-full" disabled={formState.isLoading}> <Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
{formState.isLoading {formState.isLoading
? __("Creating account...") ? __("Creating account...")
: __("Sign up with email")} : __("Sign up with email")}

34
apps/trust/src/pages/auth/AuthLayout.tsx
View File

@@ -1,5 +1,5 @@
import { useSystemTheme } from "@probo/hooks"; import { useSystemTheme } from "@probo/hooks";
import { Logo } from "@probo/ui"; import { Card, Logo } from "@probo/ui";
import { type PreloadedQuery, usePreloadedQuery } from "react-relay"; import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
import { Outlet } from "react-router"; import { Outlet } from "react-router";
import { graphql } from "relay-runtime"; import { graphql } from "relay-runtime";
@@ -26,25 +26,19 @@ export function AuthLayout(props: { queryRef: PreloadedQuery<AuthLayoutQuery> })
: compliancePage.logoFileUrl; : compliancePage.logoFileUrl;
return ( return (
<div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen text-txt-primary"> <div className="min-h-screen text-txt-primary bg-level-0 flex flex-col items-center justify-center">
<div className="bg-level-0 flex flex-col items-center justify-center"> <Card className="w-full max-w-lg px-12 py-8 flex flex-col items-center justify-center gap-8">
<div className="w-full max-w-md px-6"> {logoFileUrl
<Outlet /> ? (
</div> <img
</div> alt=""
<div className="hidden lg:flex bg-dialog font-bold flex-col items-center justify-center p-8 text-txt-primary lg:p-10"> src={logoFileUrl}
<div className="flex flex-col items-center justify-center gap-4"> className="h-20 rounded-2xl"
{logoFileUrl />
? ( )
<img : <Logo withPicto className="w-[440px]" />}
alt="" <Outlet />
src={logoFileUrl} </Card>
className="size-[440px] rounded-2xl"
/>
)
: <Logo withPicto className="w-[440px]" />}
</div>
</div>
</div> </div>
); );
} }

6
apps/trust/src/pages/auth/ConnectPage.tsx
View File

@@ -128,7 +128,7 @@ export function ConnectPage(props: {
<div className="space-y-6 w-full max-w-md mx-auto"> <div className="space-y-6 w-full max-w-md mx-auto">
<div className="space-y-2 text-center"> <div className="space-y-2 text-center">
<h1 className="text-3xl font-bold"> <h1 className="text-3xl font-bold">
{__(`Connect to ${organization.name}'s compliance page`)} {__("Connect to Compliance Page")}
</h1> </h1>
<p className="text-txt-tertiary"> <p className="text-txt-tertiary">
{__( {__(
@@ -137,7 +137,7 @@ export function ConnectPage(props: {
</p> </p>
</div> </div>
<form onSubmit={e => void handleSubmit(e)} className="space-y-4"> <form onSubmit={e => void handleSubmit(e)} className="space-y-6">
<Field <Field
label={__("Email")} label={__("Email")}
placeholder="john.doe@acme.com" placeholder="john.doe@acme.com"
@@ -156,7 +156,7 @@ export function ConnectPage(props: {
<Button <Button
type="submit" type="submit"
className="w-full" className="w-xs h-10 mx-auto"
disabled={formState.isSubmitting || (magicLinkSent && timer !== 0)} disabled={formState.isSubmitting || (magicLinkSent && timer !== 0)}
> >
{magicLinkSent {magicLinkSent

4
apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx
View File

@@ -94,7 +94,7 @@ export default function VerifyMagicLinkPagePageMutation() {
</p> </p>
</div> </div>
<form onSubmit={e => void handleSubmit(e)} className="space-y-4"> <form onSubmit={e => void handleSubmit(e)} className="space-y-6">
<Field <Field
label={__("Confirmation Token")} label={__("Confirmation Token")}
type="text" type="text"
@@ -109,7 +109,7 @@ export default function VerifyMagicLinkPagePageMutation() {
<Button <Button
type="submit" type="submit"
className="w-full" className="w-xs h-10 mx-auto"
disabled={form.formState.isSubmitting} disabled={form.formState.isSubmitting}
> >
{form.formState.isSubmitting {form.formState.isSubmitting