rework session work
This commit is contained in:
smanylov
@@ -0,0 +1,118 @@
|
||||
'use client'
|
||||
|
||||
import styles from '@/app/styles/module/login.module.scss'
|
||||
import { useActionState, useState, useRef, useEffect } from 'react';
|
||||
import { authorization } from '@/app/actions/auth';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { IconEye } from '@/app/ui/icons/icons';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
export default function LoginForm() {
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
authorization,
|
||||
undefined,
|
||||
);
|
||||
const t = useTranslations('Login-register-form');
|
||||
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
function showPassowrd() {
|
||||
setShowPassword(!showPassword);
|
||||
}
|
||||
|
||||
const checkBoxRememberMe = useRef<HTMLInputElement>(null);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
queryClient.clear();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<form action={formAction}>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']}`}>
|
||||
{t('email-adress')}
|
||||
</label>
|
||||
<input
|
||||
type="readOnly"
|
||||
id="email"
|
||||
name="email"
|
||||
className={`${styles['form-input']}`}
|
||||
placeholder={t('enter-email')}
|
||||
defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
|
||||
onChange={(e) => {
|
||||
e.target.value = e.target.value.toLocaleLowerCase();
|
||||
}}
|
||||
/>
|
||||
{state?.error?.email && (
|
||||
<p className={`${styles['form-error']}`}>
|
||||
{t(state?.error?.email)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
<label className={`${styles['form-label']}`}>
|
||||
{t('password')}
|
||||
</label>
|
||||
<div className={`${styles['password-wrapper']}`}>
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
id="password"
|
||||
name="password"
|
||||
className={`${styles['form-input']} ${styles['password']}`}
|
||||
placeholder={t('enter-password')}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
showPassowrd();
|
||||
}}
|
||||
type="button"
|
||||
className={`show-password-button ${showPassword ? 'show' : ''}`}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
</div>
|
||||
{state?.error?.password && (
|
||||
<p className={`${styles['form-error']}`}>
|
||||
{t(state?.error?.password)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{state?.error.server && (
|
||||
<p className={`${styles['form-error']}`}>
|
||||
{t(state?.error.server)}
|
||||
</p>
|
||||
)}
|
||||
<div className={`${styles['form-options']}`}>
|
||||
<div className={`${styles['form-checkbox']}`}>
|
||||
<input type="checkbox" id="remember" name="remember" ref={checkBoxRememberMe} />
|
||||
<label
|
||||
onClick={() => {
|
||||
if (checkBoxRememberMe.current) {
|
||||
checkBoxRememberMe.current.click();
|
||||
}
|
||||
}}
|
||||
className="select-none"
|
||||
>
|
||||
{t('remember-me')}
|
||||
</label>
|
||||
</div>
|
||||
<a href="forgot-password" className={`${styles['forgot-password']}`} >
|
||||
{t('forgot-password')}?
|
||||
</a>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className={`${styles['btn']}`}
|
||||
disabled={isPending}
|
||||
>
|
||||
{t("sign-in")}
|
||||
{isPending && (
|
||||
<div className="loading-animation">
|
||||
<div className="global-spinner"></div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -4,70 +4,73 @@ import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import clsx from 'clsx';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { logout } from '@/app/actions/auth';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
export default function AdminNavLinks() {
|
||||
const pathname = usePathname().replace('/en/', '/').replace('/ru/', '/');
|
||||
const t = useTranslations('Global');
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const links = [
|
||||
{
|
||||
name: 'dashboard',
|
||||
href: '/',
|
||||
href: '/pages',
|
||||
img: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z'
|
||||
},
|
||||
{
|
||||
name: 'users',
|
||||
href: '/users',
|
||||
href: '/pages/users',
|
||||
img: 'M16 17v2H2v-2s0-4 7-4s7 4 7 4m-3.5-9.5A3.5 3.5 0 1 0 9 11a3.5 3.5 0 0 0 3.5-3.5m3.44 5.5A5.32 5.32 0 0 1 18 17v2h4v-2s0-3.63-6.06-4M15 4a3.4 3.4 0 0 0-1.93.59a5 5 0 0 1 0 5.82A3.4 3.4 0 0 0 15 11a3.5 3.5 0 0 0 0-7'
|
||||
},
|
||||
{
|
||||
name: 'subscriptions',
|
||||
href: '/subscriptions',
|
||||
href: '/pages/subscriptions',
|
||||
img: 'M22 6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2zm-2 2H4V6h16zM4 11h16v7H4z'
|
||||
},
|
||||
{
|
||||
name: 'tariff management',
|
||||
href: '/tariff-management',
|
||||
href: '/pages/tariff-management',
|
||||
img: 'M4 14v-2h7v2zm0-4V8h11v2zm0-4V4h11v2zm9 14v-3.075l5.525-5.5q.225-.225.5-.325t.55-.1q.3 0 .575.113t.5.337l.925.925q.2.225.313.5t.112.55t-.1.563t-.325.512l-5.5 5.5zm6.575-5.6l.925-.975l-.925-.925l-.95.95z'
|
||||
},
|
||||
{
|
||||
name: 'content',
|
||||
href: '/content',
|
||||
href: '/pages/content',
|
||||
img: 'M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h6l2 2h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20zm0-2h16V8h-8.825l-2-2H4zm0 0V6z'
|
||||
},
|
||||
{
|
||||
name: 'violations',
|
||||
href: '/violations',
|
||||
href: '/pages/violations',
|
||||
img: 'M1 21L12 2l11 19zm3.45-2h15.1L12 6zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m-1-3h2v-5h-2zm1-2.5'
|
||||
},
|
||||
{
|
||||
name: 'dmc',
|
||||
href: '/dmc',
|
||||
href: '/pages/dmc',
|
||||
img: 'M12 20a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m-1-6h2v2h-2zm0-10h2v8h-2z'
|
||||
},
|
||||
{
|
||||
name: 'email notification',
|
||||
href: '/email-notification',
|
||||
href: '/pages/email-notification',
|
||||
img: 'M2 20V4h20v16zm10-7L4 8v10h16V8zm0-2l8-5H4zM4 8V6v12z'
|
||||
},
|
||||
{
|
||||
name: 'api control',
|
||||
href: '/api-control',
|
||||
href: '/pages/api-control',
|
||||
img: 'M13.26 10.5h2v1h-2zM8.4 15L8 13.77H6.06L5.62 15H4l2.2-6h1.62L10 15Zm8.36-3.5a1.47 1.47 0 0 1-1.5 1.5h-2v2h-1.5V9h3.5a1.47 1.47 0 0 1 1.5 1.5ZM20 15h-1.5V9H20ZM6.43 12.77h1.16l-.58-1.59zM20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2'
|
||||
},
|
||||
{
|
||||
name: 'analitic',
|
||||
href: '/analitic',
|
||||
href: '/pages/analitic',
|
||||
img: 'm16 11.78l4.24-7.33l1.73 1l-5.23 9.05l-6.51-3.75L5.46 19H22v2H2V3h2v14.54L9.5 8z'
|
||||
},
|
||||
{
|
||||
name: 'system logs',
|
||||
href: '/system-logs',
|
||||
href: '/pages/system-logs',
|
||||
img: 'M4.5 2.25v19.5h15V7.195l-.21-.235l-4.5-4.5l-.236-.21H4.5zm1.5 1.5h7.5v4.5h4.5v12H6zm9 1.078L16.922 6.75H15zM8.25 9.75v1.5h7.5v-1.5zm0 3v1.5h7.5v-1.5zm0 3v1.5h7.5v-1.5z'
|
||||
},
|
||||
{
|
||||
name: 'system',
|
||||
href: '/system',
|
||||
href: '/pages/system',
|
||||
img: 'M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m-2 12c-.25 0-.46-.18-.5-.42l-.37-2.65c-.63-.25-1.17-.59-1.69-.99l-2.49 1.01c-.22.08-.49 0-.61-.22l-2-3.46a.493.493 0 0 1 .12-.64l2.11-1.66L4.5 12l.07-1l-2.11-1.63a.493.493 0 0 1-.12-.64l2-3.46c.12-.22.39-.31.61-.22l2.49 1c.52-.39 1.06-.73 1.69-.98l.37-2.65c.04-.24.25-.42.5-.42h4c.25 0 .46.18.5.42l.37 2.65c.63.25 1.17.59 1.69.98l2.49-1c.22-.09.49 0 .61.22l2 3.46c.13.22.07.49-.12.64L19.43 11l.07 1l-.07 1l2.11 1.63c.19.15.25.42.12.64l-2 3.46c-.12.22-.39.31-.61.22l-2.49-1c-.52.39-1.06.73-1.69.98l-.37 2.65c-.04.24-.25.42-.5.42zm1.25-18l-.37 2.61c-1.2.25-2.26.89-3.03 1.78L5.44 7.35l-.75 1.3L6.8 10.2a5.55 5.55 0 0 0 0 3.6l-2.12 1.56l.75 1.3l2.43-1.04c.77.88 1.82 1.52 3.01 1.76l.37 2.62h1.52l.37-2.61c1.19-.25 2.24-.89 3.01-1.77l2.43 1.04l.75-1.3l-2.12-1.55c.4-1.17.4-2.44 0-3.61l2.11-1.55l-.75-1.3l-2.41 1.04a5.42 5.42 0 0 0-3.03-1.77L12.75 4z'
|
||||
}
|
||||
];
|
||||
@@ -104,8 +107,10 @@ export default function AdminNavLinks() {
|
||||
key={t('exit')}
|
||||
href='/login'
|
||||
className="admin-nav-item"
|
||||
onClick={(e) => {
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
queryClient.clear();
|
||||
await logout();
|
||||
}}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
|
||||
Reference in New Issue
Block a user