Coding info page & other

Coding info page, login menu & other fixes

reactapp/src/components/LoginMenu.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { motion } from "framer-motion";
 
 interface LoginMenuProps {
@@ -6,6 +6,12 @@ interface LoginMenuProps {
 }
 
 export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Element {
+    const [isLoginMode, setIsLoginMode] = useState(true);
+
+    const toggleMode = () => {
+        setIsLoginMode(!isLoginMode);
+    }
+    
     return(
         <>
             <div className="background-blackout" onClick={toggleLoginMenu}></div>
@@ -16,7 +22,7 @@ export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Elem
                             SusMarket <span>ID</span>
                         </h5>
                         <p className="top-container__text">
-                            Войдите с SusMarket ID
+                            {isLoginMode ? 'Войдите с SusMarket ID' : 'Зарегистрируйтесь с SusMarket ID'}
                         </p>
                     </div>
                 </div>
@@ -25,15 +31,16 @@ export default function LoginMenu({ toggleLoginMenu }: LoginMenuProps): JSX.Elem
                     <input type="password" name="userPassword" id="userPassword"  className="popup-login__password-input" placeholder="Пароль"/>
                 </div>
                 <div className="popup-login__bottom-container">
-                    <p className="popup-menu__prompt-url">
-                        У вас нет аккаунта? <u>Зарегестрироваться</u>
+                    <p className="popup-login__prompt-url" onClick={toggleMode}>
+                        {isLoginMode ? 'У вас нет аккаунта? ' : 'У вас есть аккаунт? '}
+                        <u>{isLoginMode ? 'Зарегистрироваться' : 'Войти'}</u>
                     </p>
                     <motion.button 
                         className="popup-login__login-button"
                         whileTap={{scale: 0.98}}
                         transition={{duration: 0.2, type: "spring"}}
                     >
-                        Войти
+                        {isLoginMode ? 'Войти' : 'Зарегистрироваться'}
                     </motion.button>
                 </div>
             </form>