frontdev/no-copy-admin-panel-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update login page

Browse Source
This commit is contained in:
smanylov
2026-04-06 17:04:53 +07:00
parent a301e57c8b
commit bac1151c8e
9 changed files with 82 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/layout.tsx
+1 -15
View File
@@ -1,23 +1,13 @@
import type { Metadata } from "next";
import Providers from '@/app/providers/getQueryServer'
import { NextIntlClientProvider, hasLocale } from 'next-intl';
import { notFound } from 'next/navigation';
import { getQueryClient } from '@/app/providers/getQueryClient';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { prefetchLayoutQueries } from '@/app/lib/prefetch-queries';
import { routing } from '@/i18n/routing';
import AdminLayoutWrapper from '@/app/components/admin-layout-wrapper';
// @ts-expect-error - CSS modules types not defined
import "../styles/globals.css";
// @ts-expect-error - CSS modules types not defined
import "../styles/global-styles.scss"
export const metadata: Metadata = {
title: "Admin panel no copy",
description: "Admin panel no copy",
};
export async function generateStaticParams() {
return routing.locales.map((locale: any) => ({ locale }));
}
@@ -30,16 +20,12 @@ export default async function RootLayout({
params: Promise<{ locale: string }>;
}>) {
const { locale } = await params;
if (!hasLocale(routing.locales, locale)) {
notFound();
}
const queryClient = getQueryClient();
await prefetchLayoutQueries(queryClient);
return (
<html lang="en">
<html lang={locale}>
<body>
<NextIntlClientProvider>
<Providers>
src/app/[locale]/login/layout.tsx
-29
View File
@@ -1,29 +0,0 @@
import { hasLocale } from 'next-intl';
import { notFound } from 'next/navigation';
import { getQueryClient } from '@/app/providers/getQueryClient';
import { prefetchLayoutQueries } from '@/app/lib/prefetch-queries';
import { routing } from '@/i18n/routing';
export default async function RootLayout({
children,
params
}: Readonly<{
children: React.ReactNode;
params: Promise<{ locale: string }>;
}>) {
const { locale } = await params;
if (!hasLocale(routing.locales, locale)) {
notFound();
}
const queryClient = getQueryClient();
await prefetchLayoutQueries(queryClient);
return (
<div className="">
<main className="main-containter">
{children}
</main>
</div>
);
}
src/app/[locale]/login/page.tsx
+3 -8
View File
@@ -1,18 +1,13 @@
import LoginForm from '@/app/ui/forms/login-form';
import Link from 'next/link';
export default function Page() {
return (
<div>
<div
className="login-page"
>
<LoginForm />
<br />
<Link
href={'/pages/'}
>
link
</Link>
</div>
)
}
src/app/actions/session.ts
+3 -2
View File
@@ -1,9 +1,10 @@
'use server';
/* import 'server-only'; */
import { cookies } from 'next/headers'
import { SignJWT, jwtVerify } from 'jose'
import { cookies } from 'next/headers';
import { SignJWT, jwtVerify } from 'jose';
import { redirect } from 'next/navigation';
import { headers } from 'next/headers';
/* const secretKey = process.env.SESSION_SECRET */
const secretKey = 'AAA+sq1yKte/gMgUUu/B/OyXqr45/LMYplPVOlWc+uo='
src/app/styles/global-styles.scss
+32
View File
@@ -88,6 +88,38 @@
}
}
.login-page {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.show-password-button {
cursor: pointer;
position: absolute;
top: 50%;
right: 0px;
padding: 10px;
transform: translateY(-50%);
svg {
width: 16px;
color: var(--secondary-hover);
transition: color 0.2s ease;
&:hover {
color: var(--primary-hover);
}
}
&.show {
svg {
color: var(--primary-hover);
}
}
}
}
.admin-panel {
.admin-sidebar {
width: var(--side-bar-width);
src/app/styles/module/login.module.scss
+9 -3
View File
@@ -39,6 +39,12 @@
}
}
.form-wrapper {
max-width: 640px;
width: 100%;
padding: 20px;
}
.form-group {
margin-bottom: 18px;
}
@@ -83,7 +89,7 @@
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #374151;
color: #2563eb;
font-size: 14px;
}
@@ -170,7 +176,7 @@
.btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
background: #2563eb;
color: white;
border: none;
border-radius: 10px;
@@ -182,7 +188,7 @@
margin: 20px 0 0 0;
&:hover:not(:disabled) {
transform: translateY(-2px);
background: #1d4ed8;
}
&:disabled {
src/app/ui/forms/login-form.tsx
+6 -6
View File
@@ -28,7 +28,10 @@ export default function LoginForm() {
}, [])
return (
<form action={formAction}>
<form
className={`${styles['form-wrapper']}`}
action={formAction}
>
<div className={`${styles['form-group']}`}>
<label className={`${styles['form-label']}`}>
{t('email-adress')}
@@ -83,7 +86,7 @@ export default function LoginForm() {
{t(state?.error.server)}
</p>
)}
<div className={`${styles['form-options']}`}>
{/* <div className={`${styles['form-options']}`}>
<div className={`${styles['form-checkbox']}`}>
<input type="checkbox" id="remember" name="remember" ref={checkBoxRememberMe} />
<label
@@ -97,10 +100,7 @@ export default function LoginForm() {
{t('remember-me')}
</label>
</div>
<a href="forgot-password" className={`${styles['forgot-password']}`} >
{t('forgot-password')}?
</a>
</div>
</div> */}
<button
type="submit"
className={`${styles['btn']}`}
src/proxy.ts
+27 -22
View File
@@ -9,40 +9,45 @@ const intlMiddleware = createIntlMiddleware(routing);
export default async function proxy(request: NextRequest) {
const path = request.nextUrl.pathname;
const cookie = (await cookies()).get('session')?.value;
const session = await decrypt(cookie);
console.log(session);
if (
path.startsWith('/_next') ||
path.includes('.')
path.includes('/api/')
) {
return NextResponse.next()
return NextResponse.next();
}
const requestHeaders = new Headers(request.headers);
requestHeaders.set('x-pathname', path);
const pathname = request.nextUrl.pathname;
const locale = pathname.split('/')[1];
const isValidLocale = routing.locales.includes(locale as any);
if (!isValidLocale && !path.includes('/login')) {
const defaultLocale = routing.defaultLocale;
const newUrl = new URL(`/${defaultLocale}${path}`, request.url);
return NextResponse.redirect(newUrl);
}
const isLoginPage = path.includes(`/${locale}/login`) || path === '/login';
const isPublicPage = isLoginPage || path.includes('/api/');
if (!isPublicPage) {
const cookie = (await cookies()).get('session')?.value;
const session = await decrypt(cookie);
if (!session?.token) {
const targetLocale = isValidLocale ? locale : routing.defaultLocale;
const loginUrl = new URL(`/${targetLocale}/login`, request.url);
return NextResponse.redirect(loginUrl);
}
}
const intlResponse = intlMiddleware(request);
if (intlResponse) {
const response = new NextResponse(intlResponse.body, intlResponse);
response.headers.set('x-pathname', path);
/* if (!session?.token) {
const loginUrl = new URL('/login', request.nextUrl)
loginUrl.searchParams.set('locale', request.nextUrl.locale || 'ru')
return NextResponse.redirect(loginUrl)
} */
return intlResponse;
return response;
}
return NextResponse.next({
request: {
headers: requestHeaders,
},
});
return NextResponse.next();
}
export const config = {