Express js react app

.vscode/c_cpp_properties.json

@@ -0,0 +1,20 @@
+{
+    "configurations": [
+        {
+            "name": "Mac",
+            "includePath": [
+                "${workspaceFolder}/**"
+            ],
+            "defines": [],
+            "macFrameworkPath": [
+                "/System/Library/Frameworks",
+                "/Library/Frameworks"
+            ],
+            "compilerPath": "/usr/bin/clang",
+            "cStandard": "c11",
+            "cppStandard": "c++98",
+            "intelliSenseMode": "macos-clang-x64"
+        }
+    ],
+    "version": 4
+}

package.json

@@ -9,8 +9,11 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.26.0",
     "body-parser": "^1.19.0",
+    "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "express-session": "^1.17.2",
+    "font-awesome": "^4.7.0",
     "mysql": "^2.18.1",
     "path": "^0.12.7",
     "react": "^17.0.2",

src/App.js

@@ -1,3 +1,4 @@
+import Account from "./Pages/AccountPage/AccountPage";
 import React, { useEffect, useState } from "react";
 import Registration from "./Pages/RegistrationPage/RegistrationPage";
 import Home from "./Pages/HomePage/HomePage"

src/GeneralStyles.css

@@ -1,7 +1,7 @@
 button {
   border: none;
   margin-left: 1%;
-  background-color: rgb(102, 255, 0);
+  background-color: lightseagreen;
   border-radius: 10px;
 }
 

src/Pages/AccountPage/AccountPage.css

@@ -0,0 +1,170 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+
+
+
+.body{
+  /* height: 500%;
+  width:500%; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 100px;
+  background: linear-gradient(135deg, #71b7e6, #9b59b6);
+}
+
+.nav {
+  background-color: grey;
+  height: 30px;
+}
+.a{
+  color: white;
+  margin-right: 2em;
+  text-decoration: none;
+
+}
+.container{
+  max-width: 700px;
+  width: 100%;
+  background-color: #fff;
+  padding: 25px 30px;
+  border-radius: 5px;
+  border: blue;
+  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
+}
+.container .title{
+  font-size: 25px;
+  font-weight: 500;
+  position: relative;
+}
+.container .title::before{
+  content: "";
+  position: absolute;
+  left: auto;
+  bottom: auto;
+  height: 3px;
+  width: 30px;
+  border-radius: 5px;
+  background: linear-gradient(135deg, #71b7e6, #9b59b6);
+}
+.content form .user-details{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 20px 0 12px 0;
+}
+div.positioning{
+  margin-left: auto;
+    margin-right: auto;
+    width: 8em
+}
+form .user-details .input-box{
+  margin-bottom: 15px;
+  width: calc(100% / 2 - 20px);
+}
+form .input-box span.details{
+  display: block;
+  font-weight: 500;
+  margin-bottom: 20px;
+}
+.user-details .input-box input{
+  height: 45px;
+  width: 100%;
+  outline: none;
+  font-size: 16px;
+  border-radius: 5px;
+  padding-left: 15px;
+  border: 1px solid black;
+  border-bottom-width: 2px;
+  transition: all 0.3s ease;
+}
+.user-details .input-box input:focus,
+.user-details .input-box input:valid{
+  border-color: #9b59b6;
+}
+ form .gender-details .gender-title{
+  font-size: 20px;
+  font-weight: 500;
+ }
+ form .category{
+   display: flex;
+   width: 80%;
+   margin: 14px 0 ;
+   justify-content: space-between;
+ }
+ form .category label{
+   display: flex;
+   align-items: center;
+   cursor: pointer;
+ }
+ form .category label .dot{
+  height: 18px;
+  width: 18px;
+  border-radius: 50%;
+  margin-right: 10px;
+  background-color: #15a05a;
+  border: 5px solid transparent;
+  transition: all 0.3s ease;
+}
+ #dot-1:checked ~ .category label .one,
+ #dot-2:checked ~ .category label .two,
+ #dot-3:checked ~ .category label .three{
+    background: #9b59b6;
+    border-color: #d9d9d9;
+ }
+ form .input[type="radio"]{
+   display: none;
+ }
+ form .button{
+   height: 45px;
+   margin: 35px 0
+ }
+ form .button input{
+   height: 100%;
+   width: 100%;
+   border-radius: 5px;
+   border: none;
+   color: rgb(229, 236, 238);
+   font: bold;
+   font-size: 18px;
+   font-weight: 500;
+   letter-spacing: 1px;
+   cursor: pointer;
+   transition: all 0.3s ease;
+   background: linear-gradient(135deg, #71b7e6, #9b59b6);
+ }
+ form .button input:hover{
+  /* transform: scale(0.99); */
+  background: linear-gradient(-135deg, #71b7e6, #9b59b6);
+  }
+ @media(max-width: 584px){
+ .container{
+  max-width: 100%;
+}
+form .user-details .input-box{
+    margin-bottom: 15px;
+    width: 100%;
+  }
+  form .category{
+    width: 100%;
+  }
+  .content form .user-details{
+    max-height: 300px;
+    overflow-y: scroll;
+  }
+  .user-details::-webkit-scrollbar{
+    width: 5px;
+  }
+  }
+  @media(max-width: 459px){
+  .container .content .category{
+    flex-direction: column;
+  }
+
+  .nav {
+    background-color: grey;
+    height: 30px;
+    padding-left: 20px;
+    color: red !important;
+
+  }
+}

src/Pages/AccountPage/AccountPage.js

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import "./AccountPage.css"
+import Axios from "axios";
+import { useHistory } from "react-router-dom";
+
+
+
+function getAccountInformation() {
+
+return (
+<positioning>
+  <div class="container">
+    <div class="title">Profile</div>
+    <div class="content">
+      <form action="#">
+        <div class="user-details">
+          <div class="input-box">
+            <span class="details"><strong>Full Name</strong></span>
+            <input type="text" required></input>
+          </div>
+          <div class="input-box">
+            <span class="details"><strong>Username</strong></span>
+            <input type="text"required></input>
+          </div>
+          <div class="input-box">
+            <span class="details"><strong>Email</strong></span>
+            <input type="text" required></input>
+          </div>
+          <div class="input-box">
+            <span class="details"> <strong>Phone Number</strong></span>
+            <input type="text" required></input>
+          </div>
+          <div class="input-box">
+            <span class="details"><strong>Password</strong></span>
+            <input type="text" required></input>
+          </div>
+          <div class="input-box">
+            <span class="details"><strong>Confirm Password</strong></span>
+            <input type="text" required></input>
+          </div>
+        </div>
+        <div class="button">
+          <input type="submit" value="Profile"></input>
+        </div>
+      </form>
+    </div>
+	</div>
+	</positioning>
+);
+
+	}
+export default getAccountInformation;