feat: add login animation

frontend/package.json

@@ -7,11 +7,15 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
+    "bootstrap": "^5.3.1",
+    "gsap": "^3.12.2",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.14.2",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "reactstrap": "^9.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/src/pages/Login/Login.css

@@ -1,3 +1,66 @@
+/* styles.css */
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Adjust the color and opacity */
+    opacity: 0; /* Initial opacity */
+    pointer-events: none; /* Allow interactions with underlying elements */
+    transition: opacity 0.3s ease-in-out;
+  }
+
+.overlay.active {
+    opacity: 1; /* Opacity when active */
+    pointer-events: auto; /* Disable interactions with underlying elements */
+  }
+
+
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to { 
+        transform: rotate(360deg);
+    }
+}
+
+
+ @-webkit-keyframes rotate {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to { 
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+.load {
+	width: 100px;
+	height: 100px;
+	margin: 110px auto 0;
+	border:solid 10px #f1dbf0;
+	border-radius: 50%;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	 -webkit-transition: all 0.5s ease-in;
+    -webkit-animation-name:             rotate; 
+    -webkit-animation-duration:         1.0s; 
+    -webkit-animation-iteration-count:  infinite;
+    -webkit-animation-timing-function: linear;
+
+    	 transition: all 0.5s ease-in;
+    animation-name:             rotate; 
+    animation-duration:         1.0s; 
+    animation-iteration-count:  infinite;
+    animation-timing-function: linear; 
+}
+
+
+
+
 .wrongPass {
     display: none;
     color: red;

frontend/src/pages/Login/Login.js

@@ -3,13 +3,14 @@ import axios from 'axios';
 import Logo from '../../assets/logoname.png'
 import './Login.css'
 import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
-import { Form, FormGroup, Label, Input, Button, Col } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, Col } from 'reactstrap';
 
 
 function Login({ history }) {
   const [email, setEmail] = useState(''); // Khởi tạo trạng thái cho tên người dùng
   const [password, setPassword] = useState(''); // Khởi tạo trạng thái cho mật khẩu người dùng
   const [data, setData] = useState({"status": "unreceived"}); // Khởi tạo trạng thái cho lỗi
+  const [showLoadingAnimation, setShowLoadingAnimation] = useState(false); // Khởi tạo trạng thái cho animation
   let errorHappened = false;
   const errorHappenedRef = useRef(errorHappened);
   // TODO: add logic change for isVisible
@@ -60,6 +61,8 @@ function Login({ history }) {
   };
 
   const handleSubmit = async (event) => {
+    setShowLoadingAnimation(true);
+
     await event.preventDefault();
 
     axios.get(`http://localhost:3000/api/login?email=${email}&password=${password}`)
@@ -119,6 +122,9 @@ function Login({ history }) {
               * Sai tên đăng nhập hoặc mật khẩu
             </div>
 
+            <div className={`overlay ${showLoadingAnimation ? 'active' : ''}`}></div>
+            <div className={`load ${showLoadingAnimation ? 'visible' : 'hidden'}`}></div>
+
             <FormGroup row>
               <Col sm={{ size: 6, offset: 3 }}>
                 <Button className='buttonClass' color="primary" type="submit">Đăng nhập</Button>
@@ -128,12 +134,9 @@ function Login({ history }) {
           </Form>
         </div>
 
-
-        {/* <Link to='/homepage'>
-          <button>LOGIN</button>
-        </Link> */}
       </section>
 
+
     </div>
   );
 }

server/helper.js

@@ -2,7 +2,7 @@ const { getDataFromBigQuery } = require('./big_query/query.js');
 const { insertDataToBigQuery } = require('./big_query/insert.js');
 const { updateDataInBigQuery } = require('./big_query/update.js');
 const { bigqueryClient } = require('./big_query_client.js');
-const { get } = require('mongoose');
+// const { get } = require('mongoose');
 
 // Student informations
 async function getStudent(user_id) {

server/index.js

@@ -4,7 +4,7 @@ const { BigQuery } = require('@google-cloud/bigquery');
 const { Storage } = require('@google-cloud/storage');
 const cors = require('cors');
 const { getStudent, getUser, getCourse, getLesson, getStudentCourses, getStudentLessons, getFinishedCourses, getRanking, getLatestThreads, getThread, getThreadComment, getInsideCourse, getTopicLesson } = require('./helper');
-const { get } = require('mongoose');
+// const { get } = require('mongoose');
 
 const app = express();
 const port = 3000;