Authentication & Profile Page Implemented.

MohammadAkthamObeidat · Jan 24, 2020 · 0805ce3 · 0805ce3
1 parent 8316e1a
commit 0805ce3
Show file tree

Hide file tree

Showing 9 changed files with 320 additions and 72 deletions.
diff --git a/view/src/Assets/CSS/Nav.css b/view/src/Assets/CSS/Nav.css
@@ -63,6 +63,7 @@
     border: none;
 }
 
+
 .movies-btn {
     background-color: rgba(0, 0, 0, 0);
     color: white;
@@ -89,3 +90,5 @@
     top: 33%;
     min-width: 22px;
 }
+
+
diff --git a/view/src/Assets/CSS/Profile.css b/view/src/Assets/CSS/Profile.css
@@ -11,18 +11,22 @@
 .avatar {
     border-radius: 50%;
     width: 10%;
-    margin-top: -30%;
-    margin-left: 45%;
+    background-color: rgb(182, 182, 182);
+    padding:1%;
+    position: absolute;
+    top: 15%;
+    left: 45%;
 }
 .user-name {
     display: inline;
     text-align: center;
-    position: absolute;
-    top: 43%;
     color: #fff;
-    left: 45%;
+    position: absolute;
+    top: 36%;
+    left: 38%;
 }
 .profile-cover {
+    position: relative;
     width: 100%;
     height: 2%;
 }
@@ -53,8 +57,26 @@
     display: inline;
     align-self: center;
     margin: 0 auto;
+    cursor: pointer;
+}
+
+.select-input{
+    margin-top: -10px;
+    border-radius: 10px;
+    padding: 5px;
+    color: #ed1c24;
+    border : solid 1px #ed1c24;
+}
+
+.header-btns:hover{
+    color: #ed1c24;
 }
 
 .lists {
     padding-left: 2%;
 }
+
+.empty{
+    margin: 10% 0 10% 0 ;
+    max-width: 30%;
+}
diff --git a/view/src/Assets/CSS/index.css b/view/src/Assets/CSS/index.css
@@ -21,4 +21,13 @@ code {
 
 }
 
+.link-behaviour{
+    color:white;
+}
+
+.link-behaviour:hover{
+    color:#ed1c24;
+    text-decoration: none;
+}
+
 
diff --git a/view/src/Assets/Images/Empty.svg b/view/src/Assets/Images/Empty.svg
diff --git a/view/src/Assets/Images/user.svg b/view/src/Assets/Images/user.svg
diff --git a/view/src/Layouts/Home.js b/view/src/Layouts/Home.js
@@ -7,19 +7,22 @@ import AuthHelper from '../Utils/AuthHelper';
 class Home extends Component {
     constructor(props) {
         super(props);
-        this.state = {};
-        this.isLoggedIn = false;
-        this.userID = '';
+        this.state = {
+            isLoggedIn: false,
+            userID: ''
+        };
     }
 
     componentDidMount = () => {
         const Auth = new AuthHelper();
-        // Auth.getConfirm();
-        // console.log('Auth.getConfirm :', Auth.getConfirm());
         try {
             const response = Auth.getConfirm();
-            this.isLoggedIn = true;
-            this.userID = response.id;
+            if (response.id.length > 0) {
+                this.setState({
+                    isLoggedIn: true,
+                    userID: response.id
+                });
+            }
         } catch (error) {
             console.log('error :', error);
         }
@@ -31,8 +34,8 @@ class Home extends Component {
                 path="/"
                 exact
                 render={() => {
-                    if (!this.isLoggedIn) {
-                        return <Profile/>;
+                    if (this.state.isLoggedIn) {
+                        return <Profile />;
                     } else {
                         return (
                             <div className="home-page">
@@ -48,8 +51,8 @@ class Home extends Component {
                                         Discover, Organize & Stay Updated.
                                     </p>
                                     <button className="join-btn">
-                                        <Link to="/register">
-                                            JOIN MOIVES GALAXY IT'S FREE
+                                        <Link to="/register" className = 'link-behaviour' >
+                                            JOIN MOVIES GALAXY IT'S FREE
                                         </Link>
                                     </button>
                                 </div>

diff --git a/view/src/Layouts/Login.js b/view/src/Layouts/Login.js
@@ -3,7 +3,7 @@ import NavBar from '../components/NavBar';
 import '../Assets/CSS/Login.css';
 import axios from 'axios';
 import AuthHelper from '../Utils/AuthHelper';
-import { Redirect } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 class Login extends Component {
     state = {
         email: '',
@@ -24,7 +24,6 @@ class Login extends Component {
         const { token } = user.data;
         const Auth = new AuthHelper();
         Auth.setToken(token);
-        return <Redirect to="/profile" />;
     };
 
     render() {