feat: create body editor

package.json

@@ -15,17 +15,21 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.1",
     "@reduxjs/toolkit": "^2.9.0",
     "@remix-run/node-fetch-server": "^0.8.0",
     "compression": "^1.8.1",
     "cross-env": "^10.0.0",
     "express": "^5.1.0",
     "normalize.css": "^8.0.1",
+    "react-intl": "^7.1.11",
+    "firebase": "^12.2.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-intl": "^7.1.11",
+    "react-hook-form": "^7.62.0",
     "react-redux": "^9.2.0",
-    "react-router": "7.7.0"
+    "react-router": "7.7.0",
+    "yup": "^1.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

src/Types/Types.ts

@@ -1 +1,8 @@
 export type Lang = 'en' | 'ru';
+
+export interface FormDataItem {
+  key: string;
+  value: string;
+}
+
+export type BodyValue = null | string | FormData;

src/components/BodyEditor/BodyEditor.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import FormDataEditor from '../FormDataEditor/FormDataEditor';
+import type { BodyValue, FormDataItem } from '../../Types/Types';
+
+type BodyType = 'none' | 'raw' | 'form-data';
+
+interface BodyEditorProps {
+  value: BodyValue;
+  onChange: (val: BodyValue) => void;
+  readOnly?: boolean;
+}
+
+export default function BodyEditor({
+  value,
+  onChange,
+  readOnly = false,
+}: BodyEditorProps) {
+  const [error, setError] = useState<string | null>(null);
+  const [bodyType, setBodyType] = useState<BodyType>('none');
+  const [rawValue, setRawValue] = useState('');
+  const [formDataValue, setFormDataValue] = useState<FormDataItem[]>([]);
+
+  const intl = useIntl();
+
+  useEffect(() => {
+    if (typeof value === 'string') {
+      setBodyType('raw');
+      setRawValue(value);
+    } else if (value instanceof FormData) {
+      setBodyType('form-data');
+
+      const arr: FormDataItem[] = [];
+      value.forEach((val, key) => arr.push({ key, value: String(val) }));
+      setFormDataValue(arr);
+    } else {
+      setBodyType('none');
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (bodyType === 'raw') {
+      try {
+        const parsedBody = JSON.parse(rawValue);
+        setRawValue(JSON.stringify(parsedBody, null, 2));
+        setError(null);
+        onChange(rawValue);
+      } catch {
+        setError('Invalid JSON');
+      }
+    }
+  }, [rawValue, bodyType, onChange]);
+
+  useEffect(() => {
+    if (bodyType === 'form-data') {
+      const fd = new FormData();
+      formDataValue.forEach((item) => {
+        if (item.key) fd.append(item.key, item.value);
+      });
+      onChange(fd);
+    }
+  }, [formDataValue, bodyType, onChange]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+      <select
+        value={bodyType}
+        onChange={(e) => setBodyType(e.target.value as BodyType)}
+      >
+        <option value="none">
+          {intl.formatMessage({ id: 'app.BodyEditorSelectNone' })}
+        </option>
+        <option value="raw">
+          {intl.formatMessage({ id: 'app.BodyEditorSelectRow' })}
+        </option>
+        <option value="form-data">
+          {intl.formatMessage({ id: 'app.BodyEditorSelectFormData' })}
+        </option>
+      </select>
+
+      {bodyType === 'raw' && (
+        <textarea
+          value={rawValue}
+          onChange={(e) => setRawValue(e.target.value)}
+          readOnly={readOnly}
+          placeholder={intl.formatMessage({ id: 'app.phBodyEditorRow' })}
+          style={{
+            width: '100%',
+            minHeight: '200px',
+            fontFamily: 'monospace',
+            backgroundColor: readOnly ? '#f9f9f9' : 'white',
+          }}
+        />
+      )}
+
+      {bodyType === 'form-data' && (
+        <FormDataEditor
+          value={formDataValue}
+          onChange={setFormDataValue}
+          readOnly={readOnly}
+        />
+      )}
+
+      {error && !readOnly && (
+        <span style={{ color: 'red' }}>
+          {intl.formatMessage({ id: 'app.ErrorJSONParse' })}
+        </span>
+      )}
+    </div>
+  );
+}

src/components/FormDataEditor/FormDataEditor.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import type { FormDataItem } from '../../Types/Types';
+import { useIntl } from 'react-intl';
+
+interface FormDataEditorProps {
+  value: FormDataItem[];
+  onChange: (val: FormDataItem[]) => void;
+  readOnly?: boolean;
+}
+
+export default function FormDataEditor({
+  value,
+  onChange,
+  readOnly = false,
+}: FormDataEditorProps) {
+  const intl = useIntl();
+
+  const handleKeyChange = (index: number, key: string) => {
+    const newValue = [...value];
+    newValue[index] = { ...newValue[index], key };
+    onChange(newValue);
+  };
+
+  const handleValueChange = (index: number, val: string) => {
+    const newValue = [...value];
+    newValue[index].value = val;
+    onChange(newValue);
+  };
+
+  const handleAddRow = () => {
+    onChange([...value, { key: '', value: '' }]);
+  };
+
+  const handleRemoveRow = (index: number) => {
+    const newValue = [...value];
+    newValue.splice(index, 1);
+    onChange(newValue);
+  };
+
+  return (
+    <div>
+      {value.map((item, index) => (
+        <div
+          key={index}
+          style={{ display: 'flex', gap: '8px', marginBottom: '4px' }}
+        >
+          <input
+            type="text"
+            placeholder={intl.formatMessage({ id: 'app.phFormDataKey' })}
+            readOnly={readOnly}
+            value={item.key}
+            onChange={(e) => handleKeyChange(index, e.target.value)}
+          />
+          <input
+            type="text"
+            placeholder={intl.formatMessage({ id: 'app.phFormDataValue' })}
+            readOnly={readOnly}
+            value={item.value}
+            onChange={(e) => handleValueChange(index, e.target.value)}
+          />
+          <button onClick={() => handleRemoveRow(index)}>
+            {intl.formatMessage({ id: 'app.FormDataValueRemoveBtn' })}
+          </button>
+        </div>
+      ))}
+      <button onClick={handleAddRow}>
+        {intl.formatMessage({ id: 'app.FormDataValueAddRowBtn' })}
+      </button>
+    </div>
+  );
+}

src/components/Header/Header.tsx

@@ -1,20 +1,40 @@
 'use client';
 
 import s from './Header.module.sass';
-import { type JSX } from 'react';
+import { useState, type JSX } from 'react';
 import classNames from 'classnames';
 import { NavLink } from 'react-router';
 import { useAppState } from '../../redux/useAppSelector';
 import { useActions } from '../../redux/useActions';
 import { FormattedMessage } from 'react-intl';
+import { auth } from '../../config/firebase';
+import { signOut } from 'firebase/auth';
 
 export function Header(): JSX.Element {
   const headerStyles = classNames('header ', s.header);
   const headerContainerStyles = classNames('container ', s.headerContainer);
+  const [name, setName] = useState('unknown');
 
   const { isLogin } = useAppState();
   const { login, logout, switchLanguage } = useActions();
 
+  auth.onAuthStateChanged((user) => {
+    if (user) {
+      if (!isLogin) {
+        login();
+      }
+      setName(user?.email ? user.email : 'unknown');
+    } else {
+      setName('unknown');
+      logout();
+    }
+  });
+
+  const handleLogout = () => {
+    signOut(auth);
+    console.log('user signOut');
+  };
+
   return (
     <header className={headerStyles}>
       <div className={headerContainerStyles}>
@@ -33,11 +53,14 @@ export function Header(): JSX.Element {
               <NavLink to="/history">History</NavLink>
             </li>
             <li>
-              <NavLink to="/login">Sign In / Sign Up</NavLink>
+              <NavLink to="/login">Sign Up</NavLink>
+            </li>
+            <li>
+              <NavLink to="/signIn">Sign In</NavLink>
             </li>
           </ul>
+          <div>Logged as {name}</div>
         </nav>
-
         <label className={s.switch}>
           <input
             type="checkbox"
@@ -51,7 +74,7 @@ export function Header(): JSX.Element {
           <span className={s.switchButton}>en/ru</span>
         </label>
 
-        <button onClick={() => (isLogin ? logout() : login())}>
+        <button onClick={() => (isLogin ? handleLogout() : login())}>
           {isLogin ? (
             <FormattedMessage id="app.signOutButton" />
           ) : (

src/components/passwordStr/passwordStr.ts

@@ -0,0 +1,35 @@
+export interface passwordStrInterface {
+  score: number;
+  level: 'empty' | 'weak' | 'medium' | 'strong';
+  color: 'red' | 'orange' | 'yellow' | 'green';
+}
+
+export const getPasswordStrength = (password: string): passwordStrInterface => {
+  if (!password)
+    return {
+      score: 0,
+      level: 'empty',
+      color: 'red',
+    };
+
+  let score = 0;
+  const checks = [
+    password.length >= 8,
+    /\d/.test(password),
+    /[a-z]/.test(password),
+    /[A-Z]/.test(password),
+    /[!@#$%^&*(),.?":{}|<>]/.test(password),
+  ];
+
+  score = checks.filter(Boolean).length;
+  console.log(score);
+  if (score === 0) {
+    return { score, level: 'empty', color: 'red' };
+  } else if (score <= 2) {
+    return { score, level: 'weak', color: 'red' };
+  } else if (score === 3 || score === 4) {
+    return { score, level: 'medium', color: 'orange' };
+  } else {
+    return { score, level: 'strong', color: 'green' };
+  }
+};

src/config/firebase.ts

@@ -0,0 +1,14 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+const firebaseConfig = {
+  apiKey: 'AIzaSyBPGKPIQ4QHwhM5VZVU2NY42orf7Ai88Ds',
+  authDomain: 'rss-project-postman.firebaseapp.com',
+  projectId: 'rss-project-postman',
+  storageBucket: 'rss-project-postman.firebasestorage.app',
+  messagingSenderId: '571102150844',
+  appId: '1:571102150844:web:16a5f2f963d8bf8ca1d0b9',
+  measurementId: 'G-HFH1H34D2C',
+};
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);

src/lang/en.json

@@ -1,5 +1,14 @@
 {
   "app.signUpButton": "SignUp",
   "app.signInButton": "SignIn",
-  "app.signOutButton": "SignOut"
+  "app.signOutButton": "SignOut",
+  "app.phFormDataKey": "Key",
+  "app.phFormDataValue": "Value",
+  "app.FormDataValueRemoveBtn": "Remove",
+  "app.FormDataValueAddRowBtn": "Add",
+  "app.BodyEditorSelectNone": "None",
+  "app.BodyEditorSelectRow": "Row (JSON)",
+  "app.BodyEditorSelectFormData": "Data Form",
+  "app.phBodyEditorRow": "Input JSON ...",
+  "app.ErrorJSONParse": "Invalid JSON"
 }

src/lang/ru.json

@@ -1,5 +1,14 @@
 {
   "app.signUpButton": "Регистрация",
   "app.signInButton": "Войти",
-  "app.signOutButton": "Выход"
+  "app.signOutButton": "Выход",
+  "app.phFormDataKey": "Ключ",
+  "app.phFormDataValue": "Значение",
+  "app.FormDataValueRemoveBtn": "Удалить",
+  "app.FormDataValueAddRowBtn": "Добавить",
+  "app.BodyEditorSelectNone": "Нет",
+  "app.BodyEditorSelectRow": "JSON",
+  "app.BodyEditorSelectFormData": "Данные формы",
+  "app.phBodyEditorRow": "Введите JSON ...",
+  "app.ErrorJSONParse": "Некорректный формат JSON"
 }

src/routes/config.ts

@@ -32,6 +32,11 @@ export function routes() {
           path: 'rest',
           lazy: () => import('./rest/route'),
         },
+        {
+          id: 'signin',
+          path: 'signIn',
+          lazy: () => import('./signIn/route'),
+        },
       ],
     },
   ] satisfies RSCRouteConfig;

src/routes/login/login.sass

@@ -0,0 +1,7 @@
+.form 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 15px;
+