webinar with email reset password done FRONT

src/App.tsx

@@ -7,6 +7,7 @@ import Register from "./containers/Register/Register";
 import PrivateRoute from "./utils/PrivateRoute";
 import UserForm from "./components/UserForm/UserForm";
 import ForgotPasswordForm from "./components/ForgotPasswordForm/ForgotPasswordForm";
+import ResetPasswordForm from "./components/ResetPasswordForm/ResetPasswordForm";
 
 const App = () => {
   return (
@@ -22,6 +23,7 @@ const App = () => {
       <Route path={"/login"} element={<Login />} />
       <Route path={"/register"} element={<Register />} />
       <Route path={"/forgot-password"} element={<ForgotPasswordForm />} />
+      <Route path={"/reset-password"} element={<ResetPasswordForm />} />
     </Routes>
   );
 };

src/api/userApi.ts

@@ -79,6 +79,21 @@ class UserApi {
             return response
         }
     }
+
+    public resetPassword = async (data: {password: string, token: string}): Promise<IResponse<undefined>> => {
+        try {
+            const response = await instance.put(`/users/reset-password`, data)
+            return response.data
+        } catch (err: unknown) {
+            const error = err as Error
+            const response: IResponse<undefined> = {
+                status: EStatuses.NOT_OK,
+                result: undefined,
+                message: error.message
+            }
+            return response
+        }
+    }
 }
 
 export const userApi = new UserApi()
\ No newline at end of file

src/components/ResetPasswordForm/ResetPasswordForm.module.css

+.ResetPasswordForm {
+    width: 80%;
+    margin: 20px auto;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.ResetPasswordForm__input {
+    margin: 10px 0;
+    min-height: 20px;
+    border-radius: 7px;
+    padding: 10px;
+    min-width: 400px;
+}
+
+.ResetPasswordForm__button {
+    background: inherit;
+    border: 1px solid blueviolet;
+    padding: 10px 15px;
+    border-radius: 5px;
+}
+
+.ResetPasswordForm__fileInput {
+    display: none;
+}
\ No newline at end of file

src/components/ResetPasswordForm/ResetPasswordForm.tsx

+import React, {FormEvent, useState, ChangeEvent} from 'react'
+import { useDispatch } from 'react-redux'
+import { useSearchParams } from 'react-router-dom'
+import { AppDispatch } from '../../store/store'
+import { resetPassword } from '../../store/users/users.slice'
+import styles from './ResetPasswordForm.module.css'
+
+
+const ResetPasswordForm: React.FunctionComponent = (): React.ReactElement => {
+    const dispatch: AppDispatch = useDispatch()
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [errorMessage, setErrorMessage] = useState<string>('')
+    const [userValues, setUserValues] = useState<{token: string, password: string, password_repeat: string}>({
+        token: searchParams.get('token') || '',
+        password: '',
+        password_repeat: ''
+    })
+    const inputHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+        setUserValues(prevState => {
+            return {...prevState, [e.target.name]: e.target.value}
+        })
+    }
+    const submitHandler = (e: FormEvent) => {
+        e.preventDefault()
+        if (userValues.password !== userValues.password_repeat) {
+            setErrorMessage('Passwords are different')
+            return
+        }
+        dispatch(resetPassword({password: userValues.password, token: userValues.token}))
+    }
+    return (
+        <div className={styles.ResetPasswordForm__frame}>
+            <form className={styles.ResetPasswordForm} onSubmit={submitHandler}>
+                <h6>{errorMessage}</h6>
+                <input 
+                    name={'password'} 
+                    type="text" 
+                    placeholder="Password" 
+                    value={userValues.password}
+                    onChange={inputHandler}
+                    className={styles.ResetPasswordForm__input}
+                />
+                <input 
+                    name={'password_repeat'} 
+                    type="text" 
+                    placeholder="Repeat password" 
+                    value={userValues.password_repeat}
+                    onChange={inputHandler}
+                    className={styles.ResetPasswordForm__input}
+                />
+                <button className={styles.ResetPasswordForm__button}>SEND</button>
+            </form>
+        </div>
+    )
+}
+
+export default ResetPasswordForm
\ No newline at end of file

src/store/users/users.slice.ts

@@ -43,6 +43,13 @@ export const sendEmailPassword = createAppAsyncThunk(
     }
 )
 
+export const resetPassword = createAppAsyncThunk(
+    `${namespace}/resetPassword`,
+    async (data: {password: string, token: string}) => {
+        return userApi.resetPassword(data)
+    }
+)
+
 const initialState: IUsersState = {
     user: {} as IUser,
     isAuth: false,
@@ -50,6 +57,7 @@ const initialState: IUsersState = {
     messageUser: ''
 }
 
+
 export const usersSlice = createSlice({
     name: namespace,
     initialState: initialState,
@@ -131,6 +139,16 @@ export const usersSlice = createSlice({
                 state.loadingUser = false
                 state.messageUser = action.payload.message
             })
+            .addCase(resetPassword.rejected, (state) => {
+                state.loadingUser = false
+            })
+            .addCase(resetPassword.pending, (state) => {
+                state.loadingUser = true
+            })
+            .addCase(resetPassword.fulfilled, (state, action) => {
+                state.loadingUser = false
+                state.messageUser = action.payload.message
+            })
     }
 })