Skip to content

Redesign auth pages #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicosammito merged 1 commit into from
Feb 15, 2026
Merged

Redesign auth pages #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 43 additions & 39 deletions src/app/(auth)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
"use client"

import {Col, Container, ContextStoreProvider, DFullScreen, DUserView, Flex, Text} from "@code0-tech/pictor";
import {
AuroraBackground,
Col,
Container,
ContextStoreProvider,
DFullScreen,
DUserView,
Flex, Spacing,
Text
} from "@code0-tech/pictor";
import {UserService} from "@edition/user/services/User.service";
import {useApolloClient} from "@apollo/client/react";
import {GraphqlClient} from "@core/util/graphql-client";
import Image from "next/image";
import React from "react";
import {usePersistentReactiveArrayService} from "@/hooks/usePersistentReactiveArrayService";
import {View} from "@code0-tech/pictor/dist/utils/view";

export default function AuthLayout({children}: Readonly<{ children: React.ReactNode }>) {

Expand All @@ -16,47 +24,43 @@ export default function AuthLayout({children}: Readonly<{ children: React.ReactN

return (
<DFullScreen>
<div style={{
backgroundImage: "url(/CodeZero_Rainbow.png)",
backgroundRepeat: "no-repeat",
backgroundPosition: "center bottom",
width: "100%",
height: "100%",
}}>
<ContextStoreProvider services={[[store, service]]}>
<Container h={"100%"} w={"100%"}>
<Flex h={"100%"} w={"100%"} align={"center"} justify={"center"}>
<Col xs={4}>
{children}
</Col>
</Flex>
</Container>
</ContextStoreProvider>
<div style={{
position: "absolute",
width: "100%",
boxSizing: "border-box",
padding: "1.3rem",
bottom: 0,
left: 0
}}>
<Flex justify={"space-between"} align={"end"} style={{gap: "1.3rem"}}>
<Text maw={"25%"} style={{fontSize: "2rem", fontWeight: "600", lineHeight: "1"}} hierarchy={"primary"}
display={"inline-block"}>
Every great idea starts at zero. {" "}
<AuroraBackground/>
<ContextStoreProvider services={[[store, service]]}>
<Container h={"100%"} w={"100%"}>
<Flex h={"100%"} w={"100%"} align={"center"} justify={"center"}>
<Col xs={4}>
<Image src={"/CodeZero_Logo.png"} alt={"CodeZero Logo"}
width={40}
height={40}/>
<Spacing spacing={"xl"}/>
<Text style={{fontSize: "2rem", fontWeight: "600", lineHeight: "1"}}
hierarchy={"tertiary"} display={"inline"}>
Start with CodeZero.
hierarchy={"primary"}
display={"inline-block"}>
Every great idea starts at zero. {" "}
<Text style={{fontSize: "2rem", fontWeight: "600", lineHeight: "1"}}
hierarchy={"tertiary"} display={"inline"}>
Start with CodeZero.
</Text>
</Text>
</Text>
<Flex align={"center"} style={{gap: "1.3rem"}}>
<Text>All rights reserved &copy; Code0 UG (haftungsbeschränkt)</Text>
<Image src={"/CodeZero_Banner_MVP.png"} alt={"CodeZero Banner"} width={150} height={0}
style={{width: '150px', height: 'auto'}}/>
</Flex>
<Spacing spacing={"xl"}/>
{children}
</Col>
</Flex>
</div>
</Container>
</ContextStoreProvider>
<div style={{
position: "absolute",
width: "100%",
boxSizing: "border-box",
padding: "1.3rem",
bottom: 0,
left: 0
}}>
<Flex justify={"center"} align={"center"} w={"100%"} style={{gap: "1.3rem"}}>
<Text>All rights reserved &copy; Code0 UG (haftungsbeschränkt) i.G.</Text>
</Flex>
</div>

</DFullScreen>
);
}
8 changes: 2 additions & 6 deletions src/packages/ce/src/user/pages/UserEmailVerificationPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@ export const UserEmailVerificationPage: React.FC = () => {
})

return <>
<Image src={"/CodeZero_Logo.png"} alt={"CodeZero Logo"}
width={40}
height={40}
style={{marginBottom: "1.3rem"}}/>
<Text mb={0.7} size={"lg"} hierarchy={"primary"} display={"block"}>
Verify your email address
</Text>
Expand All @@ -54,10 +50,10 @@ export const UserEmailVerificationPage: React.FC = () => {
<Button color={"info"} w={"100%"} mb={1.3} onClick={validate}>
Verify
</Button>
<Text display={"block"} hierarchy={"tertiary"} size={"md"}>
<Text display={"flex"} hierarchy={"tertiary"} size={"md"}>
Don't have an account yet
<Link href={"/login"}>
<Text ml={0.35} hierarchy={"primary"} size={"md"}>
<Text ml={0.35} hierarchy={"primary"} display={"flex"} size={"md"}>
Log in
</Text>
</Link>
Expand Down
8 changes: 2 additions & 6 deletions src/packages/ce/src/user/pages/UserForgotPasswordPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@ export const UserForgotPasswordPage: React.FC = () => {
})

return <>
<Image src={"/CodeZero_Logo.png"} alt={"CodeZero Logo"}
width={40}
height={40}
style={{marginBottom: "1.3rem"}}/>
<Text mb={0.7} size={"lg"} hierarchy={"primary"} display={"block"}>
Forgot your password?
</Text>
Expand All @@ -54,10 +50,10 @@ export const UserForgotPasswordPage: React.FC = () => {
<Button color={"info"} w={"100%"} mb={1.3} onClick={validate}>
Send reset token
</Button>
<Text display={"block"} hierarchy={"tertiary"} size={"md"}>
<Text display={"flex"} hierarchy={"tertiary"} size={"md"}>
Didn't forget your password?
<Link href={"/login"}>
<Text ml={0.35} hierarchy={"primary"} size={"md"}>
<Text ml={0.35} hierarchy={"primary"} display={"flex"} size={"md"}>
Log in
</Text>
</Link>
Expand Down
7 changes: 1 addition & 6 deletions src/packages/ce/src/user/pages/UserLoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,6 @@ export const UserLoginPage: React.FC = () => {
})

return <>
<Spacing spacing={"xl"}/>
<Image src={"/CodeZero_Logo.png"} alt={"CodeZero Logo"}
width={40}
height={40}
style={{marginBottom: "1.3rem"}}/>
<Text mb={0.7} size={"lg"} hierarchy={"primary"} display={"block"}>
Login to CodeZero
</Text>
Expand All @@ -80,7 +75,7 @@ export const UserLoginPage: React.FC = () => {
<div style={{marginBottom: "1.3rem"}}/>
<PasswordInput placeholder={"Password"} {...inputs.getInputProps("password")}/>
<div style={{marginBottom: "1.3rem"}}/>
<Button color={"info"} w={"100%"} mb={1.3} onClick={validate}>
<Button color={"success"} w={"100%"} mb={1.3} onClick={validate}>
Login
</Button>
<Link href={"/password"}>
Expand Down
8 changes: 2 additions & 6 deletions src/packages/ce/src/user/pages/UserRegistrationPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,6 @@ export const UserRegistrationPage: React.FC = () => {
})

return <>
<Image src={"/CodeZero_Logo.png"} alt={"CodeZero Logo"}
width={40}
height={40}
style={{marginBottom: "1.3rem"}}/>
<Text mb={0.7} size={"lg"} hierarchy={"primary"} display={"block"}>
Sign up to CodeZero
</Text>
Expand All @@ -94,10 +90,10 @@ export const UserRegistrationPage: React.FC = () => {
<Button color={"info"} w={"100%"} mb={1.3} onClick={validate}>
Sign up
</Button>
<Text display={"block"} hierarchy={"tertiary"} size={"md"}>
<Text display={"flex"} hierarchy={"tertiary"} size={"md"}>
Have an account
<Link href={"/login"}>
<Text ml={0.35} hierarchy={"primary"} size={"md"}>
<Text ml={0.35} hierarchy={"primary"} display={"flex"} size={"md"}>
Log in
</Text>
</Link>
Expand Down
8 changes: 2 additions & 6 deletions src/packages/ce/src/user/pages/UserResetPasswordPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,6 @@ export const UserResetPasswordPage: React.FC = () => {
})

return <>
<Image src={"/CodeZero_Logo.png"} alt={"CodeZero Logo"}
width={40}
height={40}
style={{marginBottom: "1.3rem"}}/>
<Text mb={0.7} size={"lg"} hierarchy={"primary"} display={"block"}>
Reset your password
</Text>
Expand All @@ -76,10 +72,10 @@ export const UserResetPasswordPage: React.FC = () => {
<Button color={"info"} w={"100%"} mb={1.3} onClick={validate}>
Reset password
</Button>
<Text display={"block"} hierarchy={"tertiary"} size={"md"}>
<Text display={"flex"} hierarchy={"tertiary"} size={"md"}>
Don't have an account yet
<Link href={"/login"}>
<Text ml={0.35} hierarchy={"primary"} size={"md"}>
<Text ml={0.35} hierarchy={"primary"} display={"flex"} size={"md"}>
Log in
</Text>
</Link>
Expand Down