From 101863b2f3c9cce50d1c15bfa5e4dc6971409b35 Mon Sep 17 00:00:00 2001
From: realtradam <github@tradam.dev>
Date: Fri, 28 Jun 2024 20:12:25 -0400
Subject: add logout button

---
 .../app/controllers/api/v1/auth_controller.rb      | 15 ++++++++++---
 rails-backend/config/routes.rb                     |  1 +
 react-frontend/src/components/Layout.tsx           | 25 ++++++++++++++++------
 react-frontend/src/routes/index.tsx                |  6 ++++--
 4 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/rails-backend/app/controllers/api/v1/auth_controller.rb b/rails-backend/app/controllers/api/v1/auth_controller.rb
index 590be3b..cfcb253 100644
--- a/rails-backend/app/controllers/api/v1/auth_controller.rb
+++ b/rails-backend/app/controllers/api/v1/auth_controller.rb
@@ -7,11 +7,10 @@ class Api::V1::AuthController < ApplicationController
 
   def data
     if !cookies[:session].nil?
+      puts "Logged in"
       puts cookies[:session]
       #render json: Api::V1::AuthController.user_table[cookies[:session]]
       result = User.find_by(access_token_digest: cookies[:session])
-      puts "--- RESULT: ---"
-      puts result
       render json: result
     else
       puts "Not logged in"
@@ -37,7 +36,7 @@ class Api::V1::AuthController < ApplicationController
       value: access_token_digest,
       #domain: :all,
       #same_site: :none,
-      secure:    true
+      #secure:    true
     }
     #user_params = {
     #  # access_token_digest: hashed_token,
@@ -53,6 +52,16 @@ class Api::V1::AuthController < ApplicationController
     #redirect_to 'http://localhost:5173/', allow_other_host: true
     redirect_to "#{ENV['ROOT_DOMAIN']}/closewindow", allow_other_host: true
   end
+  def logout
+    if !cookies[:session].nil?
+      puts cookies[:session]
+      cookies.delete :session
+    else
+      puts "cookies not found"
+    end
+    #cookies.delete :session, domain: 'localhost'
+    #redirect_to "#{ENV['ROOT_DOMAIN']}", allow_other_host: true
+  end
 
   private
 
diff --git a/rails-backend/config/routes.rb b/rails-backend/config/routes.rb
index ba4c647..4c65fb1 100644
--- a/rails-backend/config/routes.rb
+++ b/rails-backend/config/routes.rb
@@ -31,6 +31,7 @@ Rails.application.routes.draw do
       # AUTH
       get 'auth/callback', to: 'auth#callback'
       get 'auth/data', to: 'auth#data'
+      get 'auth/logout', to: 'auth#logout'
       #end
 
     end
diff --git a/react-frontend/src/components/Layout.tsx b/react-frontend/src/components/Layout.tsx
index 979dacb..db31b55 100644
--- a/react-frontend/src/components/Layout.tsx
+++ b/react-frontend/src/components/Layout.tsx
@@ -1,25 +1,36 @@
-import { Outlet } from "react-router-dom";
+import { Dispatch } from 'react';
+import { Outlet, useNavigate } from "react-router-dom";
 import { IconButton, Button, ButtonGroup } from 'rsuite';
 import { Icon } from '@rsuite/icons';
 import { FaUser } from "react-icons/fa6";
 import { FaGamepad } from "react-icons/fa";
 import { GiCowboyHolster } from "react-icons/gi";
 import { GrAdd } from "react-icons/gr";
+import { UserType } from "../routes/index";
 
-export type userData = { userData: { name: string } };
+export type userData = { name: string };
 
-						//{ userData.name ? <div className="flex items-end gap-2 pb-2"> <div className="text-xs"> Logged in as: </div> <div>{userData.name}</div> </div> : <a href="" onClick={loginLink} className="pb-2"> Login with Github </a> }
 
-
-export default function Layout({userData} : userData)
+export default function Layout(prop : { userData: userData, setUserData : Dispatch<UserType> })
 {
+	const navigate = useNavigate();
+
 	const loginLink = () => {
 		window.open(`https://github.com/login/oauth/authorize?client_id=${import.meta.env.VITE_GITHUB_CLIENTID}`);
 	};
 
+	const logoutLink = () => {
+		fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/auth/logout`, { credentials: "include" }).then(function() {
+			prop.setUserData({name: ""})
+			navigate('/');
+		});
+	};
+
 
 	const loggedout_element = <IconButton onClick={loginLink} appearance="primary" color="green" icon={<Icon as={FaUser}/>}>Log In</IconButton>;
-	const loggedin_element = <ButtonGroup className="flex"><Button appearance="ghost" style={{width:"100%"}}>{userData.name}</Button><Button appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button></ButtonGroup>;
+	const loggedin_element = <ButtonGroup className="flex"><Button appearance="ghost" style={{width:"100%"}}>{prop.userData.name}</Button><Button onClick={logoutLink} appearance="subtle" style={{paddingLeft:"1.4em", paddingRight:"1.4em"}}>Log Out</Button></ButtonGroup>;
+
+	console.log(prop);
 
 	return(
 		<>
@@ -27,7 +38,7 @@ export default function Layout({userData} : userData)
 				<div className="flex flex-col h-screen overflow-y-auto overflow-x-hidden w-72 bg-stone-100">
 					<div className="flex flex-col bg-stone-800">
 					<div className="m-4 mb-0 flex flex-col flex-grow">
-						{ userData.name ? loggedin_element : loggedout_element }
+						{ prop.userData.name ? loggedin_element : loggedout_element }
 					</div>
 					</div>
 					<div className="border-green-500 p-2 mb-2 text-red-700 bg-stone-800 rounded-b-xl"><Icon as={GiCowboyHolster} style={{width:"100%", height:"100%"}}/></div>
diff --git a/react-frontend/src/routes/index.tsx b/react-frontend/src/routes/index.tsx
index e22bcc4..6876ce5 100644
--- a/react-frontend/src/routes/index.tsx
+++ b/react-frontend/src/routes/index.tsx
@@ -4,10 +4,12 @@ import Home from "../pages/Home";
 import Layout from "../components/Layout";
 import CloseWindow from "../pages/CloseWindow";
 
+export type UserType = { name: string };
+
 export default function Index()
 {
 
-	const [userData, setUserData] = useState({ name: '' });
+	const [userData, setUserData] = useState<UserType>({ name: '' });
 	useEffect(() => {
 		const update_login_status = () => {
 			//localStorage.removeItem("logged in trigger");
@@ -30,7 +32,7 @@ export default function Index()
 	return (<>
 				<Router>
 					<Routes>
-						<Route path="/" element = {<Layout userData={userData}/>}>
+						<Route path="/" element = {<Layout userData={userData} setUserData={setUserData}/>}>
 							<Route index element={<Home />} />
 							<Route path="/closewindow" element={<CloseWindow />} />
 						</Route>
-- 
cgit v1.2.3