From 5c6a235eceb232b017f3966a77c03b9a421ff4a5 Mon Sep 17 00:00:00 2001 From: smanylov Date: Thu, 27 Nov 2025 13:48:24 +0700 Subject: [PATCH] add login, register layout --- src/app/api/action.ts | 28 +++++ src/app/login/page.tsx | 41 ++++++- src/app/register/page.tsx | 29 +++++ src/app/styles/global-styles.scss | 24 ++++ src/app/styles/login.module.scss | 175 ++++++++++++++++++++++++++++++ src/app/ui/login-form.tsx | 36 ++++++ src/app/ui/logo-icon.tsx | 11 ++ src/app/ui/register-form.tsx | 61 +++++++++++ src/app/ui/ui.module.scss | 17 +++ 9 files changed, 420 insertions(+), 2 deletions(-) create mode 100644 src/app/register/page.tsx create mode 100644 src/app/styles/login.module.scss create mode 100644 src/app/ui/login-form.tsx create mode 100644 src/app/ui/logo-icon.tsx create mode 100644 src/app/ui/register-form.tsx diff --git a/src/app/api/action.ts b/src/app/api/action.ts index be669f3..ddfd324 100644 --- a/src/app/api/action.ts +++ b/src/app/api/action.ts @@ -38,4 +38,32 @@ export async function testConnect() { } catch (error) { throw error; } +} + +export async function authenticate( + prevState: string | undefined, + formData: FormData, +) { + try { + console.log(formData); + } catch (error) { + if (error) { + return 'Something went wrong.'; + } + throw error; + } +} + +export async function registration( + prevState: string | undefined, + formData: FormData, +) { + try { + console.log(formData); + } catch (error) { + if (error) { + return 'Something went wrong.'; + } + throw error; + } } \ No newline at end of file diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 8a76d4e..89bec9c 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,4 +1,8 @@ import { Metadata } from 'next'; +import styles from '@/app/styles/login.module.scss' +import LogoIcon from '@/app/ui/logo-icon'; +import Link from 'next/link'; +import LoginForm from '@/app/ui/login-form'; export const metadata: Metadata = { title: 'Login', @@ -6,8 +10,41 @@ export const metadata: Metadata = { export default function Home() { return ( -
- plz login +
+
+
+ +

NO COPY

+

Защита авторских прав

+
+ +
+ или войти через +
+
+

Нет аккаунта? Зарегистрироваться

+
+
+
+ + + + Защита контента скрытыми водяными знаками +
+
+ + + + Мониторинг нарушений в реальном времени +
+
+ + + + Надежное хранение и безопасность данных +
+
+
); } diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx new file mode 100644 index 0000000..e91c4ff --- /dev/null +++ b/src/app/register/page.tsx @@ -0,0 +1,29 @@ +import LogoIcon from '@/app/ui/logo-icon'; +import styles from '@/app/styles/login.module.scss' +import Link from 'next/link'; +import RegisterForm from '@/app/ui/register-form'; + +export default function Home() { + return ( +
+
+
+ +

NO COPY

+

Создать аккаунт

+
+
+

🎉 Бесплатный старт

+

При регистрации вы получаете подписку "ДЕМО" с возможностью маркировки до 3 файлов в месяц и 10 МБ хранилища.

+
+ +
+ или зарегистрироваться через +
+
+

Уже есть аккаунт? Войти

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index ff45462..9197429 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -24,4 +24,28 @@ transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); } +} + +.divider { + text-align: center; + margin: 20px 0; + position: relative; + color: #9ca3af; + font-size: 14px; + + &::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: #e5e7eb; + } + + span { + background: white; + padding: 0 15px; + position: relative; + } } \ No newline at end of file diff --git a/src/app/styles/login.module.scss b/src/app/styles/login.module.scss new file mode 100644 index 0000000..9ae68c3 --- /dev/null +++ b/src/app/styles/login.module.scss @@ -0,0 +1,175 @@ +.login-container-wrapper { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + color: #333; +} + +.login-container { + background: white; + border-radius: 20px; + padding: 40px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 500px; +} + +.logo { + text-align: center; + margin-bottom: 30px; + + h1 { + font-size: 28px; + font-weight: 700; + color: #1f2937; + margin-bottom: 5px; + } + + p { + color: #6b7280; + font-size: 14px; + } +} + +.form-group { + margin-bottom: 20px; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; + margin-bottom: 20px; +} + +.form-label { + display: block; + margin-bottom: 8px; + font-weight: 500; + color: #374151; + font-size: 14px; +} + +.form-label.required::after { + content: ' *'; + color: #dc2626; +} + +.form-input { + width: 100%; + padding: 12px 16px; + border: 2px solid #e5e7eb; + border-radius: 10px; + font-size: 16px; + transition: all 0.3s; + background: #f9fafb; +} + +.form-options { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.form-checkbox { + display: flex; + align-items: center; + + input { + width: 18px; + height: 18px; + margin-right: 10px; + accent-color: #6366f1; + } + + label { + font-size: 14px; + color: #6b7280; + cursor: pointer; + + a { + color: #6366f1; + text-decoration: none; + } + } +} + +.forgot-password { + font-size: 14px; + color: #6366f1; + text-decoration: none; + font-weight: 500; + transition: color 0.3s; +} + +.btn { + width: 100%; + padding: 14px; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + color: white; + border: none; + border-radius: 10px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s; + margin-bottom: 20px; +} + +.register-link { + text-align: center; + margin-top: 20px; + + a { + color: #6366f1; + text-decoration: none; + font-weight: 500; + transition: color 0.3s; + } +} + +.features { + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid #e5e7eb; +} + +.feature { + display: flex; + align-items: center; + margin-bottom: 10px; + font-size: 13px; + color: #6b7280; +} + +.feature-icon { + width: 16px; + height: 16px; + margin-right: 8px; + color: #10b981; +} + +.subscription-info { + background: #f0f9ff; + border: 1px solid #bae6fd; + border-radius: 10px; + padding: 15px; + margin-bottom: 20px; + + h4 { + color: #0369a1; + font-size: 14px; + font-weight: 600; + margin-bottom: 8px; + } + + p { + color: #0c4a6e; + font-size: 13px; + line-height: 1.4; + } +} \ No newline at end of file diff --git a/src/app/ui/login-form.tsx b/src/app/ui/login-form.tsx new file mode 100644 index 0000000..b93195a --- /dev/null +++ b/src/app/ui/login-form.tsx @@ -0,0 +1,36 @@ +'use client' + +import styles from '@/app/styles/login.module.scss' +import { useActionState } from 'react'; +import { authenticate } from '@/app/api/action'; + +export default function LoginForm() { + const [errorMessage, formAction, isPending] = useActionState( + authenticate, + undefined, + ); + + return ( +
+
+ + +
+
+ + +
+ {errorMessage && ( +

{errorMessage}

+ )} +
+
+ + +
+ Забыли пароль? +
+ +
+ ) +} \ No newline at end of file diff --git a/src/app/ui/logo-icon.tsx b/src/app/ui/logo-icon.tsx new file mode 100644 index 0000000..2a540de --- /dev/null +++ b/src/app/ui/logo-icon.tsx @@ -0,0 +1,11 @@ +import style from "./ui.module.scss" + +export default function LogoIcon() { + return ( +
+ + + +
+ ) +} \ No newline at end of file diff --git a/src/app/ui/register-form.tsx b/src/app/ui/register-form.tsx new file mode 100644 index 0000000..578d06f --- /dev/null +++ b/src/app/ui/register-form.tsx @@ -0,0 +1,61 @@ +'use client' + +import styles from '@/app/styles/login.module.scss'; +import { useActionState } from 'react'; +import { registration } from '@/app/api/action'; + +export default function RegisterForm() { + const [errorMessage, formAction, isPending] = useActionState( + registration, + undefined, + ); + + return ( +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+ {errorMessage && ( +

{errorMessage}

+ )} +
+ + +
+ +
+ ) +} \ No newline at end of file diff --git a/src/app/ui/ui.module.scss b/src/app/ui/ui.module.scss index 98e6aed..8086a1f 100644 --- a/src/app/ui/ui.module.scss +++ b/src/app/ui/ui.module.scss @@ -83,4 +83,21 @@ height: 32px; margin-right: 15px; } +} + +.logo-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 60px; + height: 60px; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + border-radius: 15px; + margin-bottom: 15px; + + svg { + width: 30px; + height: 30px; + fill: white; + } } \ No newline at end of file