Implement last logged in button (#453)

* store last used in localstorage

* implement last logged in

* add last badge

* move the lastUsed

* add new schema

* wrong branch, roll it back

* rollback prisma

* fix useeffect deps

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
This commit is contained in:
CactusBlue 2025-02-21 10:12:28 -08:00 committed by GitHub
parent 180b455d4f
commit dfadf809eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 3 deletions

View File

@ -69,6 +69,7 @@ function Inner (props: Props) {
const project = props.mockProject || projectFromHook;
const { t } = useTranslation();
useEffect(() => {
if (props.automaticRedirect) {
if (user && !props.mockProject) {

View File

@ -2,7 +2,7 @@
import { BrandIcons, Button } from '@stackframe/stack-ui';
import Color from 'color';
import { useId } from 'react';
import { useEffect, useId, useState } from 'react';
import { useStackApp } from '..';
import { useTranslation } from '../lib/translations';
@ -26,6 +26,11 @@ export function OAuthButton({
const stackApp = useStackApp();
const styleId = useId().replaceAll(':', '-');
const [lastUsed, setLastUsed] = useState<string | null>(null);
useEffect(() => {
setLastUsed(localStorage.getItem('_STACK_AUTH.lastUsed'));
}, []);
let style : {
backgroundColor?: string,
textColor?: string,
@ -161,9 +166,17 @@ export function OAuthButton({
<>
<style>{styleSheet}</style>
<Button
onClick={() => stackApp.signInWithOAuth(provider)}
className={`stack-oauth-button-${styleId} stack-scope`}
onClick={async () => {
localStorage.setItem('_STACK_AUTH.lastUsed', provider);
await stackApp.signInWithOAuth(provider);
}}
className={`stack-oauth-button-${styleId} stack-scope relative`}
>
{lastUsed === provider && (
<span className="absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md">
last
</span>
)}
<div className='flex items-center w-full gap-4'>
{style.icon}
<span className='flex-1'>