gitea/bogazici-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login page update #3

Merged
gitea merged 1 commits from develop into test 2026-03-27 22:13:06 +03:00
Conversation 0 Commits 1 Files Changed 4 +77 -57
4 changed files with 77 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/features/auth/auth-layout.tsx
View File

@@ -1,63 +1,79 @@
import { Logo } from '@/assets/logo'
type AuthLayoutProps = { type AuthLayoutProps = {
children: React.ReactNode children: React.ReactNode
} }
export function AuthLayout({ children }: AuthLayoutProps) { export function AuthLayout({ children }: AuthLayoutProps) {
return ( return (
<div className='relative grid min-h-svh overflow-hidden bg-[radial-gradient(circle_at_top,_rgba(56,103,184,0.22),_transparent_38%),linear-gradient(180deg,_#07162e_0%,_#0a2347_48%,_#f4f7fb_48%,_#f4f7fb_100%)] px-6 py-10'> <div className='relative grid min-h-svh overflow-hidden bg-[#0a1e3d]'>
<div className='pointer-events-none absolute inset-0 bg-[linear-gradient(135deg,transparent_0%,rgba(255,255,255,0.04)_50%,transparent_100%)]' /> {/* Background pattern */}
<div className='relative mx-auto grid w-full max-w-6xl items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]'> <div className='pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(56,103,184,0.15),transparent_50%),radial-gradient(ellipse_at_bottom_right,rgba(30,64,120,0.1),transparent_50%)]' />
<section className='hidden lg:block'>
<div className='max-w-xl text-white'> <div className='relative mx-auto flex w-full max-w-300 items-center gap-0 px-6 py-10 lg:gap-16'>
<div className='mb-8 inline-flex items-center gap-3 rounded-full border border-white/14 bg-white/6 px-4 py-2 text-xs font-semibold tracking-[0.28em] text-white/72 uppercase backdrop-blur'> {/* Left - Branding */}
<Logo className='size-5 text-[#d7b16d]' /> <section className='hidden flex-1 lg:block'>
Bogazici Denizcilik Yonetim Merkezi <div className='max-w-lg'>
</div> <img
<h1 className='max-w-lg text-5xl leading-tight font-semibold tracking-tight'> src='/images/white-logo.svg'
Operasyon, personel ve icerik akisini tek ekranda yonetin. alt='Bogazici Denizcilik'
className='mb-12 h-14'
/>
<h1 className='text-[2.75rem] leading-[1.15] font-semibold tracking-tight text-white'>
Yonetim
<br />
Paneli
</h1> </h1>
<p className='mt-6 max-w-lg text-base leading-7 text-white/72'>
Premium yonetim deneyimi; hizli karar alma, net yetkilendirme ve <div className='mt-6 h-px w-16 bg-linear-to-r from-[#3b7ddd] to-transparent' />
kurumsal icerik kontrolu icin tasarlandi.
<p className='mt-6 max-w-sm text-[15px] leading-relaxed text-white/55'>
Kurs, icerik ve operasyon yonetimini tek bir merkezden kontrol
edin.
</p> </p>
<div className='mt-10 grid max-w-md grid-cols-3 gap-4'>
<div className='rounded-2xl border border-white/10 bg-white/6 p-4 backdrop-blur'> <div className='mt-12 flex items-center gap-8'>
<p className='text-3xl font-semibold'>24/7</p> <div>
<p className='mt-2 text-sm text-white/65'> <p className='text-2xl font-semibold text-white'>15+</p>
Operasyon gorunurlugu <p className='mt-1 text-xs tracking-wide text-white/40 uppercase'>
Yonetim Modulu
</p> </p>
</div> </div>
<div className='rounded-2xl border border-white/10 bg-white/6 p-4 backdrop-blur'> <div className='h-8 w-px bg-white/10' />
<p className='text-3xl font-semibold'>RBAC</p> <div>
<p className='mt-2 text-sm text-white/65'>Rol bazli erisim</p> <p className='text-2xl font-semibold text-white'>RBAC</p>
<p className='mt-1 text-xs tracking-wide text-white/40 uppercase'>
Rol Tabanli Erisim
</p>
</div> </div>
<div className='rounded-2xl border border-white/10 bg-white/6 p-4 backdrop-blur'> <div className='h-8 w-px bg-white/10' />
<p className='text-3xl font-semibold'>v1</p> <div>
<p className='mt-2 text-sm text-white/65'> <p className='text-2xl font-semibold text-white'>24/7</p>
Canli API entegrasyonu <p className='mt-1 text-xs tracking-wide text-white/40 uppercase'>
Erisim
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<div className='mx-auto flex w-full max-w-[520px] flex-col justify-center space-y-2'> {/* Right - Login card */}
<div className='mb-5 flex items-center justify-center gap-3 text-slate-900 lg:hidden'> <div className='mx-auto w-full max-w-110 shrink-0'>
<Logo className='size-7 text-[#1f4b87]' /> {/* Mobile logo */}
<div className='text-center'> <div className='mb-8 flex justify-center lg:hidden'>
<p className='text-lg font-semibold tracking-tight'> <img
Bogazici Admin src='/images/white-logo.svg'
</p> alt='Bogazici Denizcilik'
<p className='text-xs tracking-[0.24em] text-slate-500 uppercase'> className='h-10'
Denizcilik Yonetim Paneli />
</p>
</div>
</div> </div>
<div className='rounded-[28px] border border-white/70 bg-white/92 p-3 shadow-[0_32px_80px_rgba(6,22,45,0.18)] backdrop-blur sm:p-4'>
<div className='rounded-2xl border border-white/8 bg-white/4 p-8 shadow-2xl backdrop-blur-sm sm:p-10'>
{children} {children}
</div> </div>
<p className='mt-6 text-center text-xs text-white/30'>
Bogazici Denizcilik Egitim Kurumlari
</p>
</div> </div>
</div> </div>
</div> </div>

20
src/features/auth/sign-in/components/user-auth-form.tsx
View File

@@ -86,9 +86,13 @@ export function UserAuthForm({
name='email' name='email'
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>E-posta</FormLabel> <FormLabel className='text-white/70'>E-posta</FormLabel>
<FormControl> <FormControl>
<Input placeholder='yonetici@bogazici.com.tr' {...field} /> <Input
placeholder='yonetici@bogazici.com.tr'
className='border-white/10 bg-white/5 text-white placeholder:text-white/30 focus-visible:border-white/25 focus-visible:ring-0'
{...field}
/>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -99,23 +103,27 @@ export function UserAuthForm({
name='password' name='password'
render={({ field }) => ( render={({ field }) => (
<FormItem className='relative'> <FormItem className='relative'>
<FormLabel>Sifre</FormLabel> <FormLabel className='text-white/70'>Sifre</FormLabel>
<FormControl> <FormControl>
<PasswordInput placeholder='Sifrenizi girin' {...field} /> <PasswordInput
placeholder='Sifrenizi girin'
className='border-white/10 bg-white/5 text-white placeholder:text-white/30 focus-visible:border-white/25 focus-visible:ring-0'
{...field}
/>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<Button <Button
className='mt-3 h-11 rounded-xl bg-[#1f4b87] text-white hover:bg-[#183b6b]' className='mt-3 h-11 rounded-xl bg-[#3b7ddd] text-white hover:bg-[#2d6bc4]'
disabled={isLoading} disabled={isLoading}
> >
{isLoading ? <Loader2 className='animate-spin' /> : <LogIn />} {isLoading ? <Loader2 className='animate-spin' /> : <LogIn />}
Oturum ac Oturum ac
</Button> </Button>
<div className='rounded-2xl border border-[#d8e2f0] bg-[#f6f9fc] px-4 py-3 text-sm text-[#496381]'> <div className='rounded-xl border border-white/8 bg-white/5 px-4 py-3 text-xs text-white/40'>
Eger yetki sorunu yasarsaniz sistem yoneticinizden yeni rol ve Eger yetki sorunu yasarsaniz sistem yoneticinizden yeni rol ve
permission atamasi talep edin. permission atamasi talep edin.
</div> </div>

16
src/features/auth/sign-in/index.tsx
View File

@@ -15,24 +15,20 @@ export function SignIn() {
return ( return (
<AuthLayout> <AuthLayout>
<Card className='gap-4 border-0 py-4 shadow-none'> <Card className='gap-4 border-0 bg-transparent py-4 shadow-none'>
<CardHeader className='gap-3'> <CardHeader className='gap-3'>
<div className='inline-flex w-fit items-center rounded-full bg-[#eef4fb] px-3 py-1 text-[11px] font-semibold tracking-[0.22em] text-[#3c5f90] uppercase'> <CardTitle className='text-2xl tracking-tight text-white'>
Guvenli Giris Oturum Ac
</div>
<CardTitle className='text-2xl tracking-tight text-[#102948]'>
Yonetici girisi
</CardTitle> </CardTitle>
<CardDescription> <CardDescription className='text-white/50'>
Personel, rol ve yonetim modullerine erismek icin yetkili Yonetim paneline erismek icin hesap bilgilerinizi girin.
hesabinizla oturum acin.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<UserAuthForm redirectTo={redirect} /> <UserAuthForm redirectTo={redirect} />
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<p className='px-2 text-center text-sm text-muted-foreground'> <p className='px-2 text-center text-xs text-white/30'>
Bu panel yalnizca yetkili personel icindir. Tum islemler kayit Bu panel yalnizca yetkili personel icindir. Tum islemler kayit
altina alinabilir. altina alinabilir.
</p> </p>

2
src/routes/_authenticated/route.tsx
View File

@@ -9,7 +9,7 @@ export const Route = createFileRoute('/_authenticated')({
throw redirect({ throw redirect({
to: '/sign-in', to: '/sign-in',
search: { search: {
redirect: location.href, redirect: location.href === '/' ? undefined : location.href,
}, },
}) })
} }