diff --git a/src/components/loginComponents/login.js b/src/components/loginComponents/login.js index e2385bb..9a939a1 100644 --- a/src/components/loginComponents/login.js +++ b/src/components/loginComponents/login.js @@ -1,14 +1,20 @@ import React from "react"; import { Link } from "react-router-dom"; import AuthenticationService from "../../services/authenticationService"; - +import { redirect } from "../redirect"; +import {setID} from "../../services/sessionStorageManipulation"; class Login extends React.Component { constructor(props) { super(props); this.authentication = new AuthenticationService(); this.state = this.initialState(); + this.bindThisAndThats(); + } + + bindThisAndThats(){ this.changeState = this.changeState.bind(this); this.onClickLogin = this.onClickLogin.bind(this); + this.failLogin = this.failLogin.bind(this); } initialState() { return { @@ -19,17 +25,35 @@ class Login extends React.Component { changeState(event) { this.setState({ - [event.target.name]: event.target.value + [event.target.name]: event.target.value, + badUsernameOrPassword: "" + }); + } + + successLogin(a) { + setID (a.sessionId); + redirect("/"); + } + failLogin(e) { + this.setState({ + badUsernameOrPassword: e.response.data.error.message }); } onClickLogin(event) { + const {username, password} = this.state; event.preventDefault(); + if( username === "" || password === ""){ + this.setState({ + badUsernameOrPassword: "These fields must not be empty" + }); + return; + } let dataObj = { - username: this.state.username, - password: this.state.password + "username": username, + "password": password }; - this.authentication.login(dataObj); + this.authentication.login(dataObj, this.successLogin, this.failLogin); } // onKeyDown(event) { // event.preventDefault(); @@ -74,6 +98,8 @@ class Login extends React.Component { +
{this.state.badUsernameOrPassword}
+
diff --git a/src/components/loginComponents/register.js b/src/components/loginComponents/register.js index dfe478b..96eb904 100644 --- a/src/components/loginComponents/register.js +++ b/src/components/loginComponents/register.js @@ -12,7 +12,8 @@ class Register extends React.Component { bindThisAndThats() { this.onClickRegister = this.onClickRegister.bind(this); this.handleChange = this.handleChange.bind(this); - this.serverErrorHandler = this.serverErrorHandler.bind(this); + this.failRegister = this.failRegister.bind(this); + this.succesRegister = this.successRegister.bind(this); } initialState() { return { @@ -37,7 +38,11 @@ class Register extends React.Component { }); } - serverErrorHandler(e) { + successRegister(a) { + redirect("/"); + + } + failRegister(e) { this.setState({ badUsername: e.response.data.error.message @@ -48,8 +53,8 @@ class Register extends React.Component { const { username, name, email, password1, password2 } = this.state; event.preventDefault(); - if (name === "") { this.setState({ badName: "This field is required" }); return; } - if (username === "") { this.setState({ badUsername: "This field is required" }); return; } + if (name === "") { this.setState({ badName: "Name field is required" }); return; } + if (username === "") { this.setState({ badUsername: "Username field is required" }); return; } if (!validateEmail(email)) { this.setState({ badEmail: "Email address is bad!" }); return; } if (password1.length < 6) { this.setState({ badPass: "Password must be at least 6 characters long" }); return; } if (password1 === password2) { @@ -60,7 +65,7 @@ class Register extends React.Component { "email": email }; - this.authentication.register(dataObj, this.serverErrorHandler); + this.authentication.register(dataObj, this.succesRegister, this.failRegister); } else { this.setState({ badSecondPass: "Passwords do not match" }); diff --git a/src/components/navMenu.js b/src/components/navMenu.js index 3b84549..f134135 100644 --- a/src/components/navMenu.js +++ b/src/components/navMenu.js @@ -1,7 +1,7 @@ import React from "react"; import { Link } from "react-router-dom"; import MainFeedPage from "./mainFeedPage"; -import comObj from "../services/communicationService"; +import {clearID} from "../services/sessionStorageManipulation"; // import PostPage from "./postPage"; import ProfilePage from "./profilePage"; @@ -12,8 +12,7 @@ class NavMenu extends React.Component { } logout() { - comObj.clearID(); - + clearID(); } render() { diff --git a/src/components/profilePage.js b/src/components/profilePage.js index e1ec67c..33ce4f4 100644 --- a/src/components/profilePage.js +++ b/src/components/profilePage.js @@ -1,23 +1,66 @@ import React from "react"; import dataObj from "../services/dataService"; +import { Link } from "react-router-dom"; // MainPage = Feed Page class ProfilePage extends React.Component { constructor(props) { super(props); + this.state = this.initialState(); + this.bindThisAndThats(); + } + bindThisAndThats() { + this.getProfileSucces = this.getProfileSucces.bind(this); + } + initialState() { + return { + name: "Nicolas Cage", + picture: "profile.png", + }; + } + componentWillMount() { + + dataObj.getProfile(this.getProfileSucces, this.getProfileFail); } + getProfileSucces(a) { + console.log(a); + if (a.avatarUrl) { + this.setState({ + name: a.name, + picture: a.avatarUrl, + about: a.about, + aboutShort: a.aboutShort, + commentsCount: a.commentsCount, + postsCount: a.postsCount + }); + }else { + this.setState({ + name: a.name, + about: a.about, + aboutShort: a.aboutShort, + commentsCount: a.commentsCount, + postsCount: a.postsCount + + }); + } + } + getProfileFail(a) { + console.log(a); + console.log("FAIL"); + } render() { - dataObj.getProfile(); + const { name, picture, edit } = this.state; return (
- +
-

My Name

+

{name}

+ Edit Profile

Beogradski institut za tehnologiju – BIT je škola za programiranje osnovana u Beogradu, s ciljem da svoje polaznike uči praktičnim i primenljivim znanjima u IT industriji. Tehnički deo programa je FrontEnd Stack, najčešće tražen od strane poslodavaca. diff --git a/src/frontpage-background.jpg b/src/frontpage-background.jpg deleted file mode 100644 index 428b0ad..0000000 Binary files a/src/frontpage-background.jpg and /dev/null differ diff --git a/src/frontpage-background2.jpg b/src/frontpage-background2.jpg deleted file mode 100644 index 218d772..0000000 Binary files a/src/frontpage-background2.jpg and /dev/null differ diff --git a/src/services/authenticationService.js b/src/services/authenticationService.js index d9132b4..a1ac1b4 100644 --- a/src/services/authenticationService.js +++ b/src/services/authenticationService.js @@ -8,33 +8,15 @@ class AuthenticationService { bindThisAndThats() { this.login = this.login.bind(this); this.register = this.register.bind(this); - this.successLogin = this.successLogin.bind(this); - this.succesRegister = this.successRegister.bind(this); + } - successLogin(a) { - comObj.setID(a.sessionId); - console.log(a); - redirect("/"); - } - failLogin(a) { - console.log("Sranje si!"); - console.log(a); - } - login(dataObj) { + login(dataObj, callbackSucces, callbackFail) { if (comObj.getID()) { alert("Vec postoji ulogovan korisnik"); return; } - comObj.post("login", dataObj, this.successLogin, this.failLogin); - - } - successRegister(a) { - redirect("/"); + comObj.post("login", dataObj, callbackSucces, callbackFail); } - failRegister(error) { - console.log(error.response.data.error.message); - - } - register(dataObj, callbackFail) { - comObj.post("register", dataObj, this.succesRegister, callbackFail); + register(dataObj, callbackSucces, callbackFail) { + comObj.post("register", dataObj, callbackSucces, callbackFail); } logout() { comObj.clearID(); @@ -43,6 +25,16 @@ class AuthenticationService { isAuthenticated() { return !!sessionStorage.getItem("sessionID"); } + getID() { + return sessionStorage.getItem(this.key); + + } + setID(item){ + sessionStorage.setItem(this.key, item); + } + clearID(){ + sessionStorage.clear(); + } } export default AuthenticationService; \ No newline at end of file diff --git a/src/services/profileDTO.js b/src/services/profileDTO.js index 260143e..a11aab4 100644 --- a/src/services/profileDTO.js +++ b/src/services/profileDTO.js @@ -8,6 +8,13 @@ class ProfileDTO{ this._avatarUrl = input.avatarUrl; this._postsCount = input.postsCount; this._commentsCount = input.commentsCount; + this._userId = input.userId; + } + get userId(){ + return this._userId; + } + set userId(a){ + this._userId=a; } get name() { return this._name; diff --git a/src/services/sessionStorageManipulation.js b/src/services/sessionStorageManipulation.js new file mode 100644 index 0000000..cc9d62b --- /dev/null +++ b/src/services/sessionStorageManipulation.js @@ -0,0 +1,5 @@ +const a = "sessionID"; +export const setID = (id) => sessionStorage.setItem(a, id); +export const getID = () => sessionStorage.getItem(a); +export const clearID = () => sessionStorage.removeItem(a); +export const isAuthenticated = () => !!sessionStorage.getItem("sessionID"); diff --git a/src/style.css b/src/style.css index 858ee91..432fe2e 100644 --- a/src/style.css +++ b/src/style.css @@ -73,7 +73,8 @@ a { max-width: 75%; } .intro .outer__wrapper .inner__wrapper--left { float: left; - max-width: 50%; } + max-width: 40%; + margin-right: 5% } .intro .outer__wrapper .inner__wrapper--left .h1__main-page { font-size: 2rem; padding-top: 50px; }