все скрипты для фронта страницы с формой аутентификации

2026-03-14 20:27:12 +03:00
parent 8d1b19bfa4
commit 5c83b8717c
4 changed files with 81 additions and 0 deletions
@@ -0,0 +1,34 @@
 import React from "react";
 import { useEffect, useState } from "react";
 import { getCsrfToken } from './../services/getCsrfService';
 function MagicLogin ()
 {
  //Состояние с введенным логином
  const [userLogin, setUserLogin] = useState<string>('');
  return (
    <div id="login-container">
      <div id="login-container__magic-name">Magic</div>
      <div id="login-container__form">
        <form action="login" method="POST" autoComplete="on">
          <input 
            type="hidden" 
            name="_token" 
            value={getCsrfToken()}
          />
          <input name="_auth_login" type="text" onChange={ (e) => setUserLogin(e.target.value) } placeholder="Логин" required/>
          <input name="_auth_password" type="password" placeholder="Пароль" required/>
          <button type="submit" onClick={ () => {
            //При сабмите кладем логин в локалсторадж для того, чтобы при вызове api ендпоинтов передавать его в заголовках
            //гаврилов
            //ТОЧНО ЛИ ЭТО НУЖНО? МОЖЕТ, ЛУЧШЕ ВСЕ API ЕНДПОИНТЫ ПЕРЕПИСАТ ПОД ВЫЗОВ WEB РОУТОВ?
            localStorage.setItem('magic_auth_login', userLogin);
            } }>Вход</button>
        </form>
      </div>
    </div>
  );
 }
 export default MagicLogin;
@@ -0,0 +1,7 @@
 import { createRoot } from 'react-dom/client';
 import MagicLogin from './components/MagicLogin.tsx';
 import React from 'react';
 const container = document.getElementById('root')!;
 const root = createRoot(container);
 root.render(<MagicLogin />);
@@ -0,0 +1,20 @@
 /**
 * Сервис для полуения csrt токена для размещения в формах
 * @date 24.07.2025
 * @author dgavrilov
 */
 export const getCsrfToken = ():string => {
  const METATAG:HTMLElement|null = document.querySelector('meta[name="csrf-token"]');
  if (!METATAG) {
    return '';
  }
  const CSRFTOKEN:string|null = METATAG.getAttribute('content');
  if (!CSRFTOKEN) {
    return '';
  }
  return CSRFTOKEN;
 }
@@ -0,0 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel + React</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Без команды ниже корректно не обрабатывается React скрипт -->
    @viteReactRefresh
    <!-- файл со стилями resources/css/magicLogin.css не создан, так как не успел приступить к доделке меню -->
    @vite(['resources/css/magicLogin.css', 'resources/js/magicLogin.tsx'])
 </head>
 <body>
    <div id="root"></div>
 </body>
 </html>