Auth: SignIn, SignUp (TODO: rewrite into react-hook-form)

2024-06-24 17:06:41 +09:00
parent d6906503d1
commit 62695acf74
20 changed files with 617 additions and 71 deletions
--- a/frontend_reactjs/src/pages/auth/SignIn.tsx
+++ b/frontend_reactjs/src/pages/auth/SignIn.tsx
@ -1,9 +1,99 @@
-import React from 'react'
+import React, { useState, ChangeEvent, FormEvent } from 'react';
+import { TextField, Button, Container, Typography, Box } from '@mui/material';
+import axios, { AxiosResponse } from 'axios';
+import { SignInFormData, ApiResponse } from '../../types/auth';
+import { UserData, useAuthStore } from '../../store/auth';
+import { useNavigate } from 'react-router-dom';
+import axiosInstance from '../../http/axiosInstance';
+import AuthService from '../../services/AuthService';

 const SignIn = () => {
-  return (
-    <div>SignIn</div>
-  )
-}
+  const [formData, setFormData] = useState<SignInFormData>({
+    username: '',
+    password: '',
+    grant_type: 'password',
+    scope: '',
+    client_id: '',
+    client_secret: ''
+  });

-export default SignIn
+  const authStore = useAuthStore();
+
+  const navigate = useNavigate();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    const formBody = new URLSearchParams();
+    for (const key in formData) {
+      formBody.append(key, formData[key as keyof SignInFormData] as string);
+    }
+
+    try {
+      const response: AxiosResponse<ApiResponse> = await axiosInstance.post(`/auth/login`, formBody, {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+      });
+      console.log('Вход произошел успешно:', response.data);
+      const token = response.data.access_token
+
+      const userDataResponse: AxiosResponse<ApiResponse> = await AuthService.getCurrentUser(token)
+
+      console.log('Пользователь:', userDataResponse.data)
+
+      authStore.setUserData(JSON.stringify(userDataResponse.data))
+
+      authStore.login(token)
+
+      navigate('/');
+    } catch (error) {
+      console.error('Ошибка при входе:', error);
+    }
+  };
+
+  return (
+    <Container maxWidth="sm">
+      <Box my={4}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Вход
+        </Typography>
+        <form onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            margin="normal"
+            name="username"
+            label="Логин"
+            value={formData.username}
+            onChange={handleChange}
+            required
+          />
+          <TextField
+            fullWidth
+            margin="normal"
+            type="password"
+            name="password"
+            label="Пароль"
+            value={formData.password}
+            onChange={handleChange}
+            required
+          />
+          <Button type="submit" variant="contained" color="primary">
+            Вход
+          </Button>
+          <Button href="/auth/signup" type="button" variant="text" color="primary">
+            Регистрация
+          </Button>
+        </form>
+      </Box>
+    </Container>
+  );
+};
+
+export default SignIn;
--- a/frontend_reactjs/src/pages/auth/SignUp.tsx
+++ b/frontend_reactjs/src/pages/auth/SignUp.tsx
@ -0,0 +1,105 @@
+// src/components/SignUp.tsx
+
+import React, { useState, ChangeEvent, FormEvent } from 'react';
+import { TextField, Button, Container, Typography, Box } from '@mui/material';
+import axios, { AxiosResponse } from 'axios';
+import { SignUpFormData, ApiResponse } from '../../types/auth';
+import axiosInstance from '../../http/axiosInstance';
+
+const SignUp: React.FC = () => {
+    const [formData, setFormData] = useState<SignUpFormData>({
+        email: '',
+        login: '',
+        phone: '',
+        name: '',
+        surname: '',
+        is_active: true,
+        password: '',
+    });
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setFormData({
+            ...formData,
+            [e.target.name]: e.target.value,
+        });
+    };
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        try {
+            const response: AxiosResponse<ApiResponse> = await axiosInstance.post(`${import.meta.env.VITE_API_AUTH_URL}/auth/user`, formData);
+            console.log('Успешная регистрация:', response.data);
+        } catch (error) {
+            console.error('Ошибка регистрации:', error);
+        }
+    };
+
+    return (
+        <Container maxWidth="sm">
+            <Box my={4}>
+                <Typography variant="h4" component="h1" gutterBottom>
+                    Регистрация
+                </Typography>
+                <form onSubmit={handleSubmit}>
+                    <TextField
+                        fullWidth
+                        margin="normal"
+                        name="email"
+                        label="Email"
+                        value={formData.email}
+                        onChange={handleChange}
+                        required
+                    />
+                    <TextField
+                        fullWidth
+                        margin="normal"
+                        name="login"
+                        label="Логин"
+                        value={formData.login}
+                        onChange={handleChange}
+                        required
+                    />
+                    <TextField
+                        fullWidth
+                        margin="normal"
+                        name="phone"
+                        label="Телефон"
+                        value={formData.phone}
+                        onChange={handleChange}
+                    />
+                    <TextField
+                        fullWidth
+                        margin="normal"
+                        name="name"
+                        label="Имя"
+                        value={formData.name}
+                        onChange={handleChange}
+                    />
+                    <TextField
+                        fullWidth
+                        margin="normal"
+                        name="surname"
+                        label="Фамилия"
+                        value={formData.surname}
+                        onChange={handleChange}
+                    />
+                    <TextField
+                        fullWidth
+                        margin="normal"
+                        type="password"
+                        name="password"
+                        label="Пароль"
+                        value={formData.password}
+                        onChange={handleChange}
+                        required
+                    />
+                    <Button type="submit" variant="contained" color="primary">
+                        Зарегистрироваться
+                    </Button>
+                </form>
+            </Box>
+        </Container>
+    );
+};
+
+export default SignUp;