msgReduser loginWorstka

chat_final_bootstrap/src/App.scss

@@ -98,6 +98,10 @@ body {
     overflow: auto;
 }
 
+.fonRomaska {
+    background: url("./images/romashki_1920x1080.jpg");
+}
+
 .Messages {
     img {
         width: 50px;
@@ -146,3 +150,4 @@ body {
 }
 
 @import "/node_modules/bootstrap/scss/bootstrap";
+@import "./login.scss";

chat_final_bootstrap/src/Pages/PageLogin.js

@@ -4,74 +4,159 @@ import { actionLogin, actionRegistration } from "../Actions";
 import history from "../history";
 import { store } from "../Reducers";
 
-const LoginForm = ({ onLogin = null, isLoggedIn, mode = "Login" }) => {
+const LoginForm = ({ onLogin = null, onRegistration = null, isLoggedIn, mode = "Login" }) => {
     const [login, setLogin] = useState("");
     const [pass, setPass] = useState("");
     const [nick, setNick] = useState("");
-    const input_ref = useRef(null);
+    const login_ref = useRef(null);
+    const login2_ref = useRef(null);
     const pass_ref = useRef(null);
+    const pass2_ref = useRef(null);
     const nick_ref = useRef(null);
     const btn_ref = useRef(null);
+    const containerR_ref = useRef(null);
+
+    // console.log(login, pass, nick);
+    console.log(isLoggedIn, !!isLoggedIn);
 
     //FIXME: надо засунуть router в redux
     if (store.getState().auth && store.getState().auth.login && localStorage.authToken) {
         history.push(`/main/${store.getState().auth.payloadId}`);
     }
 
+    const clearHooks = () => {
+        setLogin("");
+        setPass("");
+        setNick("");
+    };
+
+    const doSignInBtn = () => {
+        containerR_ref.current.classList.remove("right-panel-active");
+        clearHooks();
+    };
+
+    const doSignUpBtn = () => {
+        containerR_ref.current.classList.add("right-panel-active");
+        clearHooks();
+    };
+
     return (
-        <div className="LoginForm">
-            <input
-                ref={input_ref}
-                readOnly={isLoggedIn}
-                type="text"
-                placeholder="Login"
-                onChange={(e) => {
-                    setLogin(e.target.value);
-                }}
-            ></input>
-            <input
-                ref={pass_ref}
-                readOnly={isLoggedIn}
-                type="password"
-                placeholder="Password"
-                onChange={(e) => {
-                    setPass(e.target.value);
-                }}
-            ></input>
-            {mode !== "Login" && (
-                <input
-                    ref={nick_ref}
-                    readOnly={isLoggedIn}
-                    type="tex"
-                    placeholder="NickName"
-                    onChange={(e) => {
-                        setNick(e.target.value);
-                    }}
-                ></input>
-            )}
+        <div className="romashka">
+            <div className="container " ref={containerR_ref}>
+                {/* <!-- Sign Up --> */}
+                <div className="container__form container--signup">
+                    <div className="form">
+                        <h2 className="form__title">Sign Up</h2>
+                        <input
+                            value={login}
+                            type="text"
+                            placeholder="Login"
+                            className="input"
+                            ref={login_ref}
+                            onChange={(e) => {
+                                setLogin(e.target.value);
+                            }}
+                        />
+                        <input
+                            value={nick}
+                            type="text"
+                            placeholder="Nick"
+                            className="input"
+                            ref={nick_ref}
+                            onChange={(e) => {
+                                setNick(e.target.value);
+                            }}
+                        />
+                        <input
+                            value={pass}
+                            type="password"
+                            placeholder="Password"
+                            className="input"
+                            ref={pass_ref}
+                            onChange={(e) => {
+                                setPass(e.target.value);
+                            }}
+                        />
+                        <button
+                            className="btn_view"
+                            onClick={() => {
+                                onRegistration(login, pass, nick);
+                                console.log("кнопка регистрации нажата");
+                            }}
+                            disabled={isLoggedIn || !login || !pass || !nick}
+                        >
+                            Sign Up
+                        </button>
+                    </div>
+                </div>
+
+                {/* <!-- Sign In --> */}
+                <div className="container__form container--signin">
+                    <div className="form">
+                        <h2 className="form__title">Sign In</h2>
+                        <input
+                            value={login}
+                            type="text"
+                            placeholder="Login"
+                            className="input"
+                            ref={login2_ref}
+                            onChange={(e) => {
+                                setLogin(e.target.value);
+                            }}
+                        />
+                        <input
+                            value={pass}
+                            type="password"
+                            placeholder="Password"
+                            className="input"
+                            ref={pass2_ref}
+                            onChange={(e) => {
+                                setPass(e.target.value);
+                            }}
+                        />
+                        <br />
+                        <br />
+                        <button
+                            className="btn_view"
+                            onClick={() => {
+                                onLogin(login, pass, nick);
+                                console.log("кнопка лагин нажата");
+                            }}
+                            disabled={isLoggedIn || !login || !pass}
+                        >
+                            Sign In
+                        </button>
+                    </div>
+                </div>
 
-            <button
-                ref={btn_ref}
-                onClick={() => {
-                    onLogin(login, pass, nick);
-                    console.log("кнопка лагин нажата");
-                }}
-                disabled={isLoggedIn || !login || !pass || (mode !== "Login" && !nick)}
-            >
-                {mode}
-            </button>
+                {/* <!-- Overlay --> */}
+                <div className="container__overlay">
+                    <div className="overlay">
+                        <div className="overlay__panel overlay--left">
+                            <button className="btn_view" onClick={doSignInBtn}>
+                                Sign In
+                            </button>
+                        </div>
+                        <div className="overlay__panel overlay--right">
+                            <button className="btn_view" onClick={doSignUpBtn}>
+                                Sign Up
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };
 
-const CLoginForm = connect((s) => ({ isLoggedIn: s.auth.login, mode: "Login" }), { onLogin: actionLogin })(LoginForm);
+const CLoginForm = connect((s) => ({ isLoggedIn: s.auth.login, mode: "Login" }), {
+    onLogin: actionLogin,
+    onRegistration: actionRegistration,
+})(LoginForm);
 // prettier-ignore
-const CRegForm = connect((s) => ({ isLoggedIn: s.auth.login, mode: "Registration" }), { onLogin: actionRegistration })(LoginForm);
 
 export const PageLogin = () => (
     <div className="PageLogin">
-        <b>PageLogin</b>
         <CLoginForm />
-        <CRegForm />
     </div>
 );

chat_final_bootstrap/src/Pages/PageLogin2.js

@@ -0,0 +1,77 @@
+import React, { useState, useRef } from "react";
+import { connect } from "react-redux";
+import { actionLogin, actionRegistration } from "../Actions";
+import history from "../history";
+import { store } from "../Reducers";
+
+const LoginForm = ({ onLogin = null, isLoggedIn, mode = "Login" }) => {
+    const [login, setLogin] = useState("");
+    const [pass, setPass] = useState("");
+    const [nick, setNick] = useState("");
+    const input_ref = useRef(null);
+    const pass_ref = useRef(null);
+    const nick_ref = useRef(null);
+    const btn_ref = useRef(null);
+
+    //FIXME: надо засунуть router в redux
+    if (store.getState().auth && store.getState().auth.login && localStorage.authToken) {
+        history.push(`/main/${store.getState().auth.payloadId}`);
+    }
+
+    return (
+        <div className="LoginForm">
+            <input
+                ref={input_ref}
+                readOnly={isLoggedIn}
+                type="text"
+                placeholder="Login"
+                onChange={(e) => {
+                    setLogin(e.target.value);
+                }}
+            ></input>
+            <input
+                ref={pass_ref}
+                readOnly={isLoggedIn}
+                type="password"
+                placeholder="Password"
+                onChange={(e) => {
+                    setPass(e.target.value);
+                }}
+            ></input>
+            {mode !== "Login" && (
+                <input
+                    ref={nick_ref}
+                    readOnly={isLoggedIn}
+                    type="tex"
+                    placeholder="NickName"
+                    onChange={(e) => {
+                        setNick(e.target.value);
+                    }}
+                ></input>
+            )}
+
+            <button
+                ref={btn_ref}
+                onClick={() => {
+                    onLogin(login, pass, nick);
+                    console.log("кнопка лагин нажата");
+                }}
+                disabled={isLoggedIn || !login || !pass || (mode !== "Login" && !nick)}
+            >
+                {mode}
+            </button>
+        </div>
+    );
+};
+
+const CLoginForm = connect((s) => ({ isLoggedIn: s.auth.login, mode: "Login" }), { onLogin: actionLogin })(LoginForm);
+// prettier-ignore
+const CRegForm = connect((s) => ({ isLoggedIn: s.auth.login, mode: "Registration" }), { onLogin: actionRegistration })(LoginForm);
+
+export const PageLogin = () => (
+    <div className="PageLogin">
+        <b>PageLogin</b>
+        <CLoginForm />
+        <CRegForm />
+    </div>
+);

chat_final_bootstrap/src/Pages/PageMain.js

@@ -45,7 +45,7 @@ const PageMain = ({
                     {/* {_userId + ` - подмена id`} */}
                     <Sidebar/>
                 </div>
-                <div className="col-md-8">
+                <div className="col-md-8 fonRomaska">
                     <ChatContain _chatId={_chatId} />
                 </div>
             </div>

chat_final_bootstrap/src/login.scss

@@ -0,0 +1,218 @@
+:root {
+    /* COLORS */
+    --white: #e9e9e9;
+    --gray: #333;
+    --blue: #007621;
+    --lightblue: #02a74c;
+    --lightgray: #919191;
+
+    /* RADII */
+    --button-radius: 0.3rem;
+
+    /* SIZES */
+    --max-width: 758px;
+    --max-height: 420px;
+
+    font-size: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+        "Helvetica Neue", sans-serif;
+}
+
+.romashka {
+    margin-top: -20px;
+    align-items: center;
+    background-color: var(--white);
+    background: url("./images/romashki_1920x1080.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: grid;
+    height: 100vh;
+    place-items: center;
+}
+
+.form__title {
+    font-weight: 300;
+    margin: 0;
+    margin-bottom: 1.25rem;
+}
+
+.link {
+    color: var(--gray);
+    font-size: 0.9rem;
+    margin: 1.5rem 0;
+    text-decoration: none;
+}
+
+.container {
+    background-color: var(--white);
+    border-radius: var(--button-radius);
+    box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
+    height: var(--max-height);
+    max-width: var(--max-width);
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+
+.container__form {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    transition: all 0.6s ease-in-out;
+}
+
+.container--signin {
+    left: 0;
+    width: 50%;
+    z-index: 2;
+}
+
+.container.right-panel-active .container--signin {
+    transform: translateX(100%);
+}
+
+.container--signup {
+    left: 0;
+    opacity: 0;
+    width: 50%;
+    z-index: 1;
+}
+
+.container.right-panel-active .container--signup {
+    animation: show 0.6s;
+    opacity: 1;
+    transform: translateX(100%);
+    z-index: 5;
+}
+
+.container__overlay {
+    height: 100%;
+    left: 50%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    transition: transform 0.6s ease-in-out;
+    width: 50%;
+    z-index: 100;
+}
+
+.container.right-panel-active .container__overlay {
+    transform: translateX(-100%);
+}
+
+.overlay {
+    background-color: var(--lightblue);
+    background: url("./images/romashki_1920x1080.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    left: -100%;
+    position: relative;
+    transform: translateX(0);
+    transition: transform 0.6s ease-in-out;
+    width: 200%;
+}
+
+.container.right-panel-active .overlay {
+    transform: translateX(50%);
+}
+
+.overlay__panel {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    transform: translateX(0);
+    transition: transform 0.6s ease-in-out;
+    width: 50%;
+}
+
+.overlay--left {
+    transform: translateX(-20%);
+}
+
+.container.right-panel-active .overlay--left {
+    transform: translateX(0);
+}
+
+.overlay--right {
+    right: 0;
+    transform: translateX(0);
+}
+
+.container.right-panel-active .overlay--right {
+    transform: translateX(20%);
+}
+
+.btn_view {
+    background-color: var(--blue);
+    background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
+    border-radius: 20px;
+    border: 1px solid var(--blue);
+    color: var(--white);
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-weight: bold;
+    letter-spacing: 0.1rem;
+    padding: 0.9rem 4rem;
+    text-transform: uppercase;
+    transition: transform 80ms ease-in;
+}
+
+.form > .btn_view {
+    margin-top: 1.5rem;
+}
+
+.btn_view:active {
+    transform: scale(0.95);
+}
+
+.btn_view:focus {
+    outline: none;
+}
+.btn_view:disabled {
+    background-color: var(--lightgray);
+    background-image: var(--lightgray);
+    // background-image: linear-gradient(90deg, var(--gray) 0%, var(--gray) 74%);
+}
+
+.form {
+    background-color: var(--white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    padding: 0 3rem;
+    height: 100%;
+    text-align: center;
+}
+
+.input {
+    background-color: #fff;
+    border: none;
+    padding: 0.9rem 0.9rem;
+    margin: 0.5rem 0;
+    width: 100%;
+}
+
+@keyframes show {
+    0%,
+    49.99% {
+        opacity: 0;
+        z-index: 1;
+    }
+
+    50%,
+    100% {
+        opacity: 1;
+        z-index: 5;
+    }
+}