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

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;