feat: add providerId handling and last connection indicator in AuthModal

Author: medyo

src/features/auth/components/AuthModal.tsx

@@ -20,7 +20,7 @@ const githubAuthProvider = new GithubAuthProvider()
 
 type AuthProvider = GoogleAuthProvider | GithubAuthProvider
 export const AuthModal = ({ showAuth }: AuthModalProps) => {
-  const { closeAuthModal, authError, setAuthError } = useAuth()
+  const { closeAuthModal, authError, setAuthError, providerId } = useAuth()
   const [selectedProvider, setSelectedProvider] = useState<AuthProvider>(googleAuthProvider)
   const getOauthLink = useGetOauthLink()
 
@@ -96,14 +96,18 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {
             onClick={() => {
               signIn(githubAuthProvider)
             }}
+            className="relative"
             size="medium">
+            {providerId === 'github.com' && <span className="lastFlag">Last</span>}
             Connect with Github
           </Button>
           <Button
             isLoading={getOauthLink.isLoading && getOauthLink.data?.['provider'] === 'google.com'}
             startIcon={<FcGoogle style={{ fontSize: '1.5em' }} />}
             onClick={() => signIn(googleAuthProvider)}
+            className="relative"
             size="medium">
+            {providerId === 'google.com' && <span className="lastFlag">Last</span>}
             Connect with Google
           </Button>
         </div>

src/features/auth/components/authModal.css

@@ -16,7 +16,19 @@
   width: 100%;
   margin: 0 0 20px 0;
 }
-
+.authModal .relative {
+  position: relative;
+}
+.authModal .lastFlag {
+  position: absolute;
+  right: -6px;
+  top: -6px;
+  background: var(--tooltip-accent-color);
+  font-size: 0.7em;
+  color: white;
+  border-radius: 12px;
+  padding: 0 4px;
+}
 .authModal .description {
   padding: 20px;
   text-align: center;