From 2a56274ca98079d2c148fa0277258de44261bf6e Mon Sep 17 00:00:00 2001 From: Nikolai Petukhov Date: Sat, 21 Sep 2024 17:03:09 +0300 Subject: [PATCH] login pages are done --- images/user.svg | 9 ++++ package-lock.json | 10 +++++ package.json | 1 + src/components/home/Header.jsx | 14 ++++++ src/components/home/css/accountLink.css | 38 ++++++++++++++++ src/components/home/index.css | 3 +- src/components/reg/InputField.jsx | 12 +++-- src/components/reg/LoginButtons.jsx | 28 ++++++++++++ src/components/reg/css/input.css | 0 src/components/reg/css/login.css | 58 +++++++++++++++++++++++++ src/components/reg/index.css | 2 +- src/components/reg/loginTitle.jsx | 12 +++++ src/index.css | 1 - src/outer/Header.jsx | 9 ---- src/outer/css/header.css | 0 src/outer/index.css | 1 - src/pages/Home.jsx | 11 +++-- src/pages/SignIn.jsx | 23 ++++++++-- src/pages/SignUp.jsx | 31 ++++++++++--- src/pages/css/home.css | 6 +++ src/pages/css/input.css | 8 ++++ src/pages/index.css | 3 +- 22 files changed, 248 insertions(+), 32 deletions(-) create mode 100644 images/user.svg create mode 100644 src/components/home/Header.jsx create mode 100644 src/components/home/css/accountLink.css create mode 100644 src/components/reg/LoginButtons.jsx delete mode 100644 src/components/reg/css/input.css create mode 100644 src/components/reg/css/login.css create mode 100644 src/components/reg/loginTitle.jsx delete mode 100644 src/outer/Header.jsx delete mode 100644 src/outer/css/header.css delete mode 100644 src/outer/index.css create mode 100644 src/pages/css/input.css diff --git a/images/user.svg b/images/user.svg new file mode 100644 index 0000000..c8613bd --- /dev/null +++ b/images/user.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/package-lock.json b/package-lock.json index 933ff25..0de0bfb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "express": "^4.19.2", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.26.1", "styled-components": "^6.1.13", "typescript": "^5.5.4" @@ -7734,6 +7735,15 @@ "react": ">= 16.8.0" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index a328dce..9c1e758 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "express": "^4.19.2", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.26.1", "styled-components": "^6.1.13", "typescript": "^5.5.4" diff --git a/src/components/home/Header.jsx b/src/components/home/Header.jsx new file mode 100644 index 0000000..248e18b --- /dev/null +++ b/src/components/home/Header.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { URLs } from "../../__data__/urls"; +import { FaHome } from 'react-icons/fa'; + +const Header = () => { + return ( + + +

My profile

+ + ); +}; + +export default Header; diff --git a/src/components/home/css/accountLink.css b/src/components/home/css/accountLink.css new file mode 100644 index 0000000..4e3452a --- /dev/null +++ b/src/components/home/css/accountLink.css @@ -0,0 +1,38 @@ +.houseIcon { + transition: color 0.3s ease-in; +} + +.accountLink { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.accountLink p { + font-size: 1.5vw; + transition: color 0.3s ease-out; +} + +.accountLink svg { + font-size: 3vw; + transition: fill 0.3s ease-in; +} + +.accountLink:hover p { + color: white; +} + +.accountLink:hover svg { + fill: orange; +} + +@media only screen and (max-width: 800px) { + .accountLink p { + font-size: 1.8vh; + } + + .accountLink svg { + font-size: 4vh; + } +} diff --git a/src/components/home/index.css b/src/components/home/index.css index e1d6cb3..f0e5fb7 100644 --- a/src/components/home/index.css +++ b/src/components/home/index.css @@ -1,2 +1,3 @@ @import url("./css/card.css"); -@import url("./css/homeTitle.css"); \ No newline at end of file +@import url("./css/homeTitle.css"); +@import url("./css/accountLink.css"); \ No newline at end of file diff --git a/src/components/reg/InputField.jsx b/src/components/reg/InputField.jsx index b3158f6..c50ddf2 100644 --- a/src/components/reg/InputField.jsx +++ b/src/components/reg/InputField.jsx @@ -2,10 +2,14 @@ import React from 'react'; const InputField = (props) => { return ( - props.setValue(e.target.value)} - value={props.value} - /> +
+

{props.title}

+ props.setValue(e.target.value)} + value={props.value} + className="Input" + /> +
); }; diff --git a/src/components/reg/LoginButtons.jsx b/src/components/reg/LoginButtons.jsx new file mode 100644 index 0000000..d1c8cc0 --- /dev/null +++ b/src/components/reg/LoginButtons.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { URLs } from "../../__data__/urls"; + +const LoginButtons = (props) => { + const ref = props.isAuth ? URLs.reg.url : URLs.auth.url + + return ( +
+
+ ( + props.submitHandler() + )}> + {props.isAuth + ?

Login

+ :

Register

} + + + + {props.isAuth + ?

Registration

+ :

I have an account

} + +
+
+ ); +}; + +export default LoginButtons; diff --git a/src/components/reg/css/input.css b/src/components/reg/css/input.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/reg/css/login.css b/src/components/reg/css/login.css new file mode 100644 index 0000000..05c4fb9 --- /dev/null +++ b/src/components/reg/css/login.css @@ -0,0 +1,58 @@ +.LoginButtons { + margin-top: 5rex; + + display: flex; + flex-direction: column; + + align-items: center; +} + +.LoginButtons a { + margin-bottom: 15px; + width: 12rem; + display: flex; +} + +.Input { + border: 0; + background-color: black; + color: orange; + border-radius: 5px; + + padding: 10px; + + width: 18rem; +} + +.MyButton.loginButton { + padding: 0; +} + +.MyButton.loginButton p { + color: orange; + transition: color 0.3s ease-in; + + font-size: 1.3vw; + font-weight: 500; +} + +.loginTitle { + font-size: 4vw; + + transition: color 0.3s ease-in; +} + +.loginTitle:hover { + color: orange; +} + +@media only screen and (max-width: 800px) { + .MyButton.loginButton p { + font-size: 1.5vh; + } +} + +.loginButton:hover p { + color: black; +} + diff --git a/src/components/reg/index.css b/src/components/reg/index.css index a02dd8d..3b55301 100644 --- a/src/components/reg/index.css +++ b/src/components/reg/index.css @@ -1 +1 @@ -@import url("./css/input.css"); \ No newline at end of file +@import url("./css/login.css"); \ No newline at end of file diff --git a/src/components/reg/loginTitle.jsx b/src/components/reg/loginTitle.jsx new file mode 100644 index 0000000..4f213ea --- /dev/null +++ b/src/components/reg/loginTitle.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { URLs } from "../../__data__/urls"; + +const LoginTitle = () => { + return ( + +

Enterfront

+ + ); +}; + +export default LoginTitle; diff --git a/src/index.css b/src/index.css index ae7bd07..3b4c243 100644 --- a/src/index.css +++ b/src/index.css @@ -4,7 +4,6 @@ @import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap'); @import url("pages/index.css"); -@import url("outer/index.css"); @import url("components/index.css"); diff --git a/src/outer/Header.jsx b/src/outer/Header.jsx deleted file mode 100644 index dbad24f..0000000 --- a/src/outer/Header.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -const Header = () => { - return ( -
Header
- ); -}; - -export default Header; diff --git a/src/outer/css/header.css b/src/outer/css/header.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/outer/index.css b/src/outer/index.css deleted file mode 100644 index cff8028..0000000 --- a/src/outer/index.css +++ /dev/null @@ -1 +0,0 @@ -@import url("./css/header.css"); \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 0bdfba2..7d29b33 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,6 +1,7 @@ import React from "react"; import HomeTitle from "../components/home/HomeTitle.jsx"; import ChatsList from "../components/home/ChatsList.jsx"; +import Header from "../components/home/Header.jsx"; const Home = () => { @@ -61,9 +62,13 @@ const Home = () => { return (
- -

Your chats

- +
+
+
+ + +

Your chats

+
) } diff --git a/src/pages/SignIn.jsx b/src/pages/SignIn.jsx index a462a4c..fa11d9d 100644 --- a/src/pages/SignIn.jsx +++ b/src/pages/SignIn.jsx @@ -1,11 +1,26 @@ -import React from 'react'; +import React, {useState} from 'react'; import InputField from "../components/reg/InputField.jsx"; +import LoginButtons from "../components/reg/LoginButtons.jsx"; +import LoginTitle from "../components/reg/loginTitle.jsx"; const SignIn = () => { + const [name, setName] = useState(""); + const [password, setPassword] = useState(""); + + const submit = (e) => { + console.log('Sign In!') + } + return ( -
-

SignIn

- +
+ + + + +
); }; diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx index 8acab9d..3d102a6 100644 --- a/src/pages/SignUp.jsx +++ b/src/pages/SignUp.jsx @@ -1,13 +1,30 @@ -import React from 'react'; +import React, {useState} from 'react'; import InputField from "../components/reg/InputField.jsx"; +import LoginButtons from "../components/reg/LoginButtons.jsx"; +import LoginTitle from "../components/reg/loginTitle.jsx"; const SignUp = () => { - return ( -
-

SignUp

- -
- ); + const [name, setName] = useState(""); + const [password, setPassword] = useState(""); + const [repeatPassword, setRepeatPassword] = useState(""); + + const submit = (e) => { + console.log('Sign Up!') + } + + return ( +
+ + + + + + +
+ ); }; export default SignUp; diff --git a/src/pages/css/home.css b/src/pages/css/home.css index cd5f43d..5d4d84f 100644 --- a/src/pages/css/home.css +++ b/src/pages/css/home.css @@ -23,3 +23,9 @@ margin: 3rem; } + +.headerPos { + position: absolute; + top: 3vw; + right: 3vw; +} diff --git a/src/pages/css/input.css b/src/pages/css/input.css new file mode 100644 index 0000000..73f3fb4 --- /dev/null +++ b/src/pages/css/input.css @@ -0,0 +1,8 @@ +.LoginList { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + margin-top: 2rem; +} diff --git a/src/pages/index.css b/src/pages/index.css index 1436fc1..aeabed2 100644 --- a/src/pages/index.css +++ b/src/pages/index.css @@ -1,2 +1,3 @@ @import url("css/init.css"); -@import url("css/home.css"); \ No newline at end of file +@import url("css/home.css"); +@import url("css/input.css"); \ No newline at end of file