Merge branch 'zouhir-auth' into feat-streaks

Author: medyo

src/components/Elements/Modal/ConfirmModal.tsx

@@ -0,0 +1,42 @@
+import { Button, Modal } from 'src/components/Elements'
+import './confirmModal.css'
+
+interface LogoutModalProps {
+  showModal: boolean
+  title: string
+  description: string
+  onClose: () => void
+  onConfirm: () => void
+}
+
+export const ConfirmModal = ({
+  showModal,
+  title,
+  description,
+  onClose,
+  onConfirm,
+}: LogoutModalProps) => {
+  return (
+    <Modal
+      showModal={showModal}
+      onClose={onClose}
+      header={{
+        title: title,
+        className: undefined,
+        icon: undefined,
+      }}
+      className="confirmModal">
+      <div className="content">
+        <p className="description">{description}</p>
+        <div className="buttons">
+          <Button onClick={onClose} size="medium">
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} size="medium">
+            Confirm
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

src/components/Elements/Modal/confirmModal.css

@@ -0,0 +1,20 @@
+@media (min-width: 768px) {
+  .confirmModal {
+    width: 400px;
+    overflow-y: hidden;
+  }
+}
+
+.confirmModal .content {
+  display: flex;
+  flex-direction: column;
+}
+.confirmModal .description {
+  font-size: 1em;
+}
+.confirmModal .buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-self: flex-end;
+}

src/components/Elements/Modal/index.ts

@@ -1 +1,2 @@
+export * from './ConfirmModal'
 export * from './Modal'

src/features/auth/hooks/useAuth.ts

@@ -1,5 +1,7 @@
+import { signOut } from 'firebase/auth'
 import { AuthModalStore, AuthStore } from 'src/features/auth'
 import { trackUserDisconnect } from 'src/lib/analytics'
+import { firebaseAuth } from 'src/lib/firebase'
 
 export const useAuth = () => {
   const { isAuthModalOpen, openAuthModal, closeAuthModal } = AuthModalStore()
@@ -8,9 +10,11 @@ export const useAuth = () => {
 
   const isConnected = () => user != null
 
-  const logout = () => {
+  const logout = async () => {
     trackUserDisconnect()
+    signOut(firebaseAuth)
     clear()
+    return await firebaseAuth.signOut()
   }
 
   return {

src/features/settings/components/GeneralSettings/GeneralSettings.tsx

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { FaGithub } from 'react-icons/fa'
+import { FcGoogle } from 'react-icons/fc'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
-import { Button, ChipsSet } from 'src/components/Elements'
+import { Button, ChipsSet, ConfirmModal } from 'src/components/Elements'
 import { Footer } from 'src/components/Layout'
 import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayout'
 import { useAuth, User } from 'src/features/auth'
@@ -20,26 +22,42 @@ import { Option } from 'src/types'
 import { DNDSettings } from './DNDSettings'
 import './generalSettings.css'
 
+// TODO Maybe we should create a separate folder in components for UserInfo ?
 interface UserInfoProps {
   user: User
 }
 
 const UserInfo = ({ user }: UserInfoProps) => {
   const { logout, providerId } = useAuth()
   const providerName = providerId?.split('.')[0] || 'Unknown'
+  const [showLogout, setShowLogout] = useState(false)
 
   return (
     <div className="userContent">
+      <ConfirmModal
+        showModal={showLogout}
+        title="Logout !"
+        description="Are you sure you want to logout ?"
+        onClose={() => setShowLogout(false)}
+        onConfirm={logout}
+      />
       {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
       <div className="userInfos">
         <div className="userName">{user.name}</div>
-        <div className="sub providerId">
+        <div className="sub">
+          {providerId == 'github.com' ? (
+            <FaGithub size={18} />
+          ) : providerId == 'google.com' ? (
+            <FcGoogle size={18} />
+          ) : null}
           Connected with <span className="capitalize">{providerName}</span>
         </div>
+        <div>
+          <Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
+            Logout
+          </Button>
+        </div>
       </div>
-      <Button onClick={logout} size="small">
-        Logout
-      </Button>
     </div>
   )
 }
@@ -49,7 +67,6 @@ export const GeneralSettings = () => {
     openLinksNewTab,
     listingMode,
     theme,
-    searchEngine,
     maxVisibleCards,
     setTheme,
     setListingMode,

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -98,7 +98,7 @@ Select styles
 
 .userContent {
   width: auto;
-  padding: 20px 10px;
+  padding: 20px 0px;
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--card-content-divider);
@@ -107,19 +107,25 @@ Select styles
   width: 50px;
   height: 50px;
   border-radius: 100%;
+  align-self: flex-start;
 }
 .userContent .userInfos {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   width: auto;
   margin-left: 10px;
 }
 .userContent .userName {
   font-weight: 600;
 }
+
 .userContent .sub {
   font-size: 0.9em;
   opacity: 0.9;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 4px;
 }