React -> Upgrade forms & simple fixes

src/components/forms/formGenerator.js

@@ -14,10 +14,10 @@ export const FormGenerator = ({
     const handler = async (event) => {
         event.preventDefault()
         for (let i = 0; i < refList.length; i++) {
-            if ( 
-                refList[i].current.value === '' 
+            if (refList[i].current.value === ''
                 && inputList[0].action !== 'Update'
-                || i === 0 && refList.length !== 1
+                || i === 0
+                && refList.length !== 1
             ) {
                 refList[i].current.focus()
             } else if (i === refList.length - 1) {
@@ -43,6 +43,14 @@ export const FormGenerator = ({
                                 key={key}
                             />
                         )
+                    } else if (input.type === 'password') {
+                        return (
+                            <PasswordInputGenerator 
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
                     } else if (input.type === 'file') {
                         return (
                             <UploadInputGenerator
@@ -54,7 +62,9 @@ export const FormGenerator = ({
                     }
                 })
             }
-            <button type='submit' />
+            <button type='submit'>
+                { info.button_value }
+            </button>
         </form>
     )
 }
@@ -89,6 +99,37 @@ const TextInputGenerator = ({
     )
 }
 
+/**
+ * Text input generator, example:
+ * @param {
+ * {    
+ *  type: 'password',   
+ *  name: 'name',       
+ *  ref: React.createRef()  
+ * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const PasswordInputGenerator = ({
+    input, info
+}) => {
+    return (
+        <div>
+            {input.name + ':'}
+            <input
+                id={input.name + info.action + info.endpoint + 'Input'}
+                autoComplete='off'
+                ref={input.ref}
+                type='password'
+            />
+        </div>
+    )
+}
+
 /**
  * Upload file input generator, example:
  * @param {

src/components/forms/user_auth/userLogin.js

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserLoginForm = () => {
+
+    const usernameInput = React.createRef()
+    const passwordInput = React.createRef()
+
+    const dispatch = useDispatch()
+
+    let refList = [
+        usernameInput,
+        passwordInput
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/auth/login',
+            button_value: 'Sign In'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        },
+        {
+            type: 'password',
+            name: 'Password',
+            ref: passwordInput
+        }
+    ]
+
+    const login = async ( refs ) => {
+        let pass = {
+            username: refs[0].current.value,
+            password: refs[1].current.value
+        }
+        dispatch(
+            userAuthAsyncThunk.fetchLogin(
+                pass
+            )
+        )
+    }
+
+    return (
+        <>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ login }
+            />
+        </>
+    )
+
+}
+
+export default UserLoginForm

src/components/forms/user_auth/userRegister.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
+import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserRegisterForm = () => {
+
+    const usernameInput = React.createRef()
+    const passwordInput = React.createRef()
+    const emailInput = React.createRef()
+
+    const dispatch = useDispatch()
+
+    let refList = [
+        usernameInput,
+        passwordInput,
+        emailInput
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/auth/login',
+            button_value: 'Sign In'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        },
+        {
+            type: 'password',
+            name: 'Password',
+            ref: passwordInput
+        },
+        {
+            type: 'text',
+            name: 'Email',
+            ref: emailInput
+        }
+    ]
+
+    const register = async ( refs ) => {
+        let pass = {
+            username: refs[0].current.value,
+            password: refs[1].current.value,
+            email: refs[2].current.value,
+        }
+        dispatch(
+            userCrudAsyncThunk.fetchRegister(
+                pass
+            )
+        )
+    }
+
+    return (
+        <>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ register }
+            />
+        </>
+    )
+
+}
+
+export default UserRegisterForm

src/pages/func_group/rootUtils.js

@@ -80,7 +80,7 @@ const __verifyUserSession = (token, user)  => {
     if ( user.id !== 0 && user.username !== '' && user.email !== '' && token !== '' )
         return true
     else
-        return true
+        return false
     
 }
 

src/pages/func_group/user_auth/userAuthIndex.js

@@ -1,9 +1,13 @@
 import React, { useState, useEffect } from 'react'
 
+import UserLoginForm from '../../../components/forms/user_auth/userLogin'
+
+
 const UserAuthIndex = () => {
 
     return (
         <div>
+            <UserLoginForm />
         </div>
     )
 }

src/redux/asyncThunks/abstracts/abstractService.js

@@ -74,31 +74,53 @@ const responseAbstract = async (endpoint, method, token, body) => {
 
 const headerBuilder = (url, method, token, body) => {
     let headers_r = {
-        'Authorization': token,
+        'authorization': token,
+        'x-csrftoken': getCookie('csrftoken'),
         'accept': 'application/json',
-        'Content-Type': 'application/json',
+        'content-type': 'application/json',
     }
     if ('file' in body) {
         headers_r = {
-            'Authorization': token,
+            'authorization': token,
+            'x-csrftoken': getCookie('csrftoken'),
             'accept': 'multipart/form-data',
-            'Content-Type': 'multipart/form-data',
+            'content-type': 'multipart/form-data',
         }
     }
     let headers = {
         url: url,
         method: method,
-        headers: headers_r
+        headers: headers_r,
+        credentials: 'same-origin'
     }
     if (method === 'PUT' || method === 'POST' || method === 'PATCH') {
         headers = Object.assign({}, headers, {
             data: JSON.stringify(body),
-            withCredentials: true,
         })
     }
+    console.log(headers)
     return headers
 }
 
+/**
+ * get cookie method for CSRF verification
+ * @param {string} name - name of handled cookie
+ */
+const getCookie = (name) => {
+    if (!document.cookie) {
+        return null;
+    }
+    const token = document.cookie.split(';')
+        .map(c => c.trim())
+        .filter(c => c.startsWith(name + '='));
+
+    if (token.length === 0) {
+        return null;
+    }
+    return decodeURIComponent(token[0].split('=')[1]);
+}
+
+
 
 export default {
   APIAddress,

src/redux/slices/userAuthSlice.js

@@ -15,11 +15,15 @@ const userAuthSlice = createSlice(
         reducers: {},
         extraReducers: {
             [userAuthAsyncThunk.fetchLogin.fulfilled.type]: (state, action) => {
+                try {
                     state.token = action.payload.data.Authorization
                     state.user.id = action.payload.data.user.id
                     state.user.username = action.payload.data.user.username
                     state.user.email = action.payload.data.user.email
                     state.info = 'login success'
+                } catch {
+                    state.info = 'login failed'
+                }
             },
             [userAuthAsyncThunk.fetchLogout.fulfilled.type]: (state, action) => {
                 state.token = ''