fix RWD problem & implement logout

fix RWD problem
- adjust rem unit
- standardization most units from vh, vw and px... into rem
- make login block full screen when is mobile devices

src/App.jsx

@@ -18,6 +18,7 @@ import "react-toastify/dist/ReactToastify.css";
 import 'sweetalert2/src/sweetalert2.scss';
 import "./App.scss";
 import TestComponent from "./containers/TestComponent";
+import Logout from "./containers/Logout";
 
 
 function App(){
@@ -44,6 +45,7 @@ function App(){
                 <Route path="/join_us" element={<IndexPage />} />
                 <Route path="/post_article" element={<PostPage />} />
                 <Route path="/login" element={<Login />} />
+                <Route path="/logout" element={<Logout />} />
                 <Route path="/signup" element={<SignUP/>}/>
                 <Route path="/forget" element={<Forget/>}/>
                 <Route path="/profile" element={<ProfilePage />} />

src/Nav.jsx

@@ -39,7 +39,7 @@ function Nav() {
         <div>
             <div className={`bg-white z-[5] top-0 fixed w-full px-16 items-center h-[100rem] transform ${ isOpen ? '' : (visible ? '' : 'translate-y-[-100%]') } transition-all duration-150 ease-out`}/>
             <div className={` bg-transparent z-[7] top-0 fixed w-full px-16 items-center h-[100rem] transform ${ isOpen ? '' : (visible ? '' : 'translate-y-[-100%]') } transition-all duration-150 ease-out`}>
-                <div className="menu-transparent mr-[20px] flex justify-between items-center">
+                <div className="menu-transparent mr-[30.3519152817rem] flex justify-between items-center">
                     <span className="h-[100rem]"><Icon/></span>
                     <div className={` cursor-pointer ${isOpen ? 'open' : ''}`} onClick={toggleMenu}>
                         <span className="line l1"></span>
@@ -55,7 +55,7 @@ function Nav() {
                     <li onClick={toggleMenu}><Link to="working_project" name="企劃進度" subtext="Project Progress" /></li>
                     <li onClick={toggleMenu}><Link to="join_us" name="加入我們" subtext="Join Us" /></li>
                     {!loginStatus && <li onClick={toggleMenu}><Link to="login" name="登入" subtext="Login"/></li>}
-                    {loginStatus && <li onClick={logout}><Link to="" name="登出" subtext="Logout"/></li>}
+                    {loginStatus && <li onClick={logout}><Link to="logout" name="登出" subtext="Logout"/></li>}
                     {loginStatus && <li onClick={toggleMenu}><Link to="profile" name="帳號" subtext="Profile"/></li>}
                     {loginStatus && <li onClick={toggleMenu}><Link to="post_article" name="發文" subtext="Post"/></li>}
                 </ul>

src/Nav.scss

@@ -4,16 +4,16 @@ $breakpoint-lg: 992px;
 
 .line {
     display: block;
-    width: 25px;
-    height: 3px;
-    margin: 5px 0;
+    width: 37.9398941022rem;
+    height: 4.55278729226rem;
+    margin:  7.58797882043rem;
     background-color: #333;
     transition: transform 0.2s, opacity 0.2s;
 }
 
 .menu{
     top: 0;
-    width: 15vw;
+    width: 285.51894946rem;
     height: 100vh;
     position: fixed;
     right: 0vw;
@@ -63,19 +63,19 @@ div.menu-overlay.menu-hidden{
 }
 
 .menu-hidden{
-    right: -15vw;
+    right: -285.51894946rem;
 }
 
 .open .line:nth-child(1) {
-    transform: translateY(8px) rotate(45deg);
+    transform: translateY(12.1407661127rem) rotate(45deg);
 }
 
 .open .line:nth-child(2) {
     opacity: 0;
 }
 
 .open .line:nth-child(3) {
-    transform: translateY(-8px) rotate(-45deg);
+    transform: translateY(-12.1407661127rem) rotate(-45deg);
 }
 
 .nav-link{

src/containers/AccountPortal/style.scss

@@ -11,14 +11,14 @@
 		// border: #24558b 1px solid;
 		border-radius: 5px;
 		padding: 21rem;
-		width: 600rem;
-		height: fit-content;
+		width: max(600rem, calc(100% * var(--is-protrait)));
+		height: max(auto);
 		box-shadow: 0px 0px 10px 0px #dcdcdc; 
 		overflow: hidden;
 		position: absolute;
 
 		h1 {
-			font-size: 30px;
+			font-size: 45.5278729226rem;
 			// text-align: center;
 			float: left;
 			font-weight: 200;
@@ -28,7 +28,7 @@
 		}
 
 		h2{
-			font-size: 17px;
+			font-size: 25.7991279895rem;
 			color: #24558b;
 		}
 
@@ -40,7 +40,7 @@
 			outline: none;
 			border: rgb(169, 169, 169) 2px solid;
 			border-radius: 5px;
-			font-size: 15px; 
+			font-size: 22.7639364613rem; 
 			background-color: #ffffff;
 
 		}
@@ -61,12 +61,12 @@
 		}
 
 		button {
-		  	font-size: 15px;
+		  	font-size: 22.7639364613rem;
 		  	border-radius:5px;
 		  	background: #24558b;
 		  	color: #fff;
 		  	cursor: pointer;
-		  	padding: 5px 10px;
+		  	padding: 7.58797882043rem 15.1759576409rem;
 		  	height: 70rem;
 		  	width: 100%;
 		  	margin-bottom: 30rem;

src/containers/IndexPage/IdeaShow.scss

@@ -44,10 +44,10 @@ div.container-ideashow{
 @media (orientation: portrait) {
     div.container-ideashow {
         div.text-container {
-            width: 80vw;
+            width: 60rem*10;
         }
         div.text-container p.slogan {
-            font-size: 20rem;
+            font-size: 60rem;
         }
 
         img.char {

src/containers/Logout.jsx

@@ -0,0 +1,31 @@
+
+
+import { useSelector } from 'react-redux';
+import UserAPI from '../utils/UserAPI';
+import { useNavigate } from 'react-router';
+import { useEffect } from 'react';
+
+const Logout = () => {
+    const navigate = useNavigate();
+    const {loginStatus} = useSelector((state) => state.userState);
+    useEffect(()=>{
+        async function logout() {
+            if (!loginStatus) {
+                navigate('/');
+            }
+            else {
+                await UserAPI.logout();
+                navigate('/');
+                window.location.reload();
+            }
+        }
+        logout();
+    }, [loginStatus]);
+
+    return (
+        <>
+        </>
+    );
+};
+
+export default Logout;

src/index.css

@@ -5,7 +5,11 @@
 html{
     width: 100%;
     height: 100%;
-    font-size: calc(100vw / 1920); /* 1px = 1rem in 1920px wide */
+    /* font-size: calc( calc(100vw + 100vh) / calc(1920 + 1080) ); */
+    font-size: calc(100vw / 1920);
+    --is-protrait: 0;
+    /* font-size: calc(100vw / 1920); */
+    /*  */
 }
 
 body{
@@ -17,6 +21,7 @@ body{
 
 @media (orientation: portrait) {
     html {
-        font-size: calc(100vw / 375); /* 1px = 1rem in 375px wide */
+        font-size: calc(100vw / 800); /* 1px = 1rem in 375px wide */
+        --is-protrait: 1;
     }
 }

src/utils/UserAPI.jsx

@@ -2,6 +2,7 @@ import axios from 'axios';
 import sha256 from 'crypto-js/sha256';
 
 var userApiPath = "http://localhost:3000/api/users";
+axios.defaults.withCredentials = true;
 
 String.prototype.reverse = function (){
     return this.split("").reverse().join("");
@@ -65,8 +66,7 @@ class UserAPI{
     static async refreshLoad(){
         try {
             var response = await axios.get(
-                `${userApiPath}/get_login_state`,
-                {withCredentials: true}
+                `${userApiPath}/get_login_state`
             );
             UserAPI.currentUserId = response.data.user_id;
             UserAPI.currentUserName = response.data.realname;
@@ -102,12 +102,17 @@ class UserAPI{
             {
                 user_id: userId,
                 password: password
-            },
-            {withCredentials: true}
+            }
         );
 
     }
 
+    static async logout(){
+        await axios.put(
+            `${userApiPath}/${UserAPI.currentUserId}/logout`
+        );
+    }
+
     /**
      * @param {string} userId
      * @param {string} password
@@ -116,8 +121,7 @@ class UserAPI{
     static async register(userId, password){
         var password = password.passwordProcess();
         var response = await axios.post(`${userApiPath}/${userId}/normal`,
-            {password: password},
-            {withCredentials: true}
+            {password: password}
         );
         return response.data.user_id;
     }
@@ -131,8 +135,7 @@ class UserAPI{
             {
                 verificationCode: verificationCode,
                 email: email
-            },
-            {withCredentials: true}
+            }
         );
     }
 
@@ -160,8 +163,7 @@ class UserAPI{
      */
     static async getUserInfo(userId){
         var response = await axios.get(
-            `${userApiPath}/${userId}`,
-            {withCredentials: true}
+            `${userApiPath}/${userId}`
         );
         /**
          * @type {{[key: string]: ValueInfo}}
@@ -252,8 +254,7 @@ class UserAPI{
     static async updateUserInfo(userId, config) {
         var res = await axios.put(
             `${userApiPath}/${userId}`,
-            config,
-            {withCredentials: true}
+            config
         );
         return res.data;
     }