feat: add last used indicator to the login page

frontend/elements/src/components/form/Button.tsx

@@ -8,6 +8,7 @@ import styles from "./styles.sass";
 import LoadingSpinner from "../icons/LoadingSpinner";
 import Icon, { IconName } from "../icons/Icon";
 import { AppContext, UIAction } from "../../contexts/AppProvider";
+import LastUsed from "./LastUsed";
 
 type Props = {
   uiAction?: UIAction;
@@ -19,6 +20,7 @@ type Props = {
   isSuccess?: boolean;
   disabled?: boolean;
   autofocus?: boolean;
+  showLastUsed?: boolean;
   onClick?: (event: Event) => void;
   icon?: IconName;
 };
@@ -30,6 +32,7 @@ const Button = ({
   secondary,
   dangerous,
   autofocus,
+  showLastUsed,
   onClick,
   icon,
   ...props
@@ -93,7 +96,10 @@ const Button = ({
         {icon ? (
           <Icon name={icon} secondary={secondary} disabled={disabled} />
         ) : null}
-        {children}
+        <div className={styles.caption}>
+          <span>{children}</span>
+          {showLastUsed ? <LastUsed /> : null}
+        </div>
       </LoadingSpinner>
     </button>
   );

frontend/elements/src/components/form/LastUsed.tsx

@@ -0,0 +1,11 @@
+import cx from "classnames";
+import styles from "./styles.sass";
+import { useContext } from "preact/compat";
+import { TranslateContext } from "@denysvuika/preact-translate";
+
+const LastUsed = () => {
+  const { t } = useContext(TranslateContext);
+  return <span className={cx(styles.lastUsed)}>{t("labels.lastUsed")}</span>;
+};
+
+export default LastUsed;

frontend/elements/src/components/form/styles.sass

@@ -32,7 +32,7 @@
   white-space: nowrap
   width: 100%
   min-width: variables.$button-min-width
-  height: variables.$item-height
+  min-height: variables.$item-height
   outline: none
   cursor: pointer
   transition: 0.1s ease-out
@@ -68,7 +68,7 @@
     color: variables.$color
     background: variables.$background-color
     border-color: variables.$color
-    justify-content: left
+    justify-content: flex-start
 
   &.secondary:hover
     color: variables.$color
@@ -92,7 +92,18 @@
     flex-grow: 0
     width: auto
 
+// Last Used Styles
+.lastUsed
+ color: variables.$color-shade-1
+ font-size: smaller
+
 // Input Styles
+.caption
+  flex-grow: 1
+  flex-wrap: wrap
+  display: flex
+  justify-content: space-between
+  align-items: baseline
 
 .inputWrapper
   flex-grow: 1

frontend/elements/src/components/icons/styles.sass

@@ -50,6 +50,7 @@
   height: 100%
   margin: 0 5px
   justify-content: inherit
+  flex-wrap: inherit
 
   &.centerContent
     justify-content: center

frontend/elements/src/i18n/bn.ts

@@ -149,6 +149,7 @@ export const bn: Translation = {
     authenticatorAppAdd: "সেট আপ করুন",
     configured: "কনফিগার করা হয়েছে",
     useAnotherMethod: "আরেকটি পদ্ধতি ব্যবহার করুন",
+    lastUsed: "সর্বশেষ ব্যবহৃত",
   },
   errors: {
     somethingWentWrong:

frontend/elements/src/i18n/de.ts

@@ -155,6 +155,7 @@ export const de: Translation = {
     authenticatorAppAdd: "Einrichten",
     configured: "konfiguriert",
     useAnotherMethod: "Eine andere Methode verwenden",
+    lastUsed: "Zuletzt verwendet",
   },
   errors: {
     somethingWentWrong:

frontend/elements/src/i18n/en.ts

@@ -150,6 +150,7 @@ export const en: Translation = {
     authenticatorAppAdd: "Set up",
     configured: "configured",
     useAnotherMethod: "Use another method",
+    lastUsed: "Last used",
   },
   errors: {
     somethingWentWrong:

frontend/elements/src/i18n/fr.ts

@@ -155,6 +155,7 @@ export const fr: Translation = {
     authenticatorAppAdd: "Configurer",
     configured: "configuré",
     useAnotherMethod: "Utiliser une autre méthode",
+    lastUsed: "Dernière utilisation",
   },
   errors: {
     somethingWentWrong:

frontend/elements/src/i18n/it.ts

@@ -151,6 +151,7 @@ export const it: Translation = {
     authenticatorAppAdd: "Imposta",
     configured: "configurato",
     useAnotherMethod: "Usa un altro metodo",
+    lastUsed: "Ultimo utilizzo",
   },
   errors: {
     somethingWentWrong: "Si è verificato un errore tecnico. Riprova più tardi.",

frontend/elements/src/i18n/pt-BR.ts

@@ -154,6 +154,7 @@ export const ptBR: Translation = {
     authenticatorAppAdd: "Configurar",
     configured: "configurado",
     useAnotherMethod: "Usar outro método",
+    lastUsed: "Último uso",
   },
   errors: {
     somethingWentWrong:

frontend/elements/src/i18n/translations.ts

@@ -138,6 +138,7 @@ export interface Translation {
     currentSession: string;
     newSecurityKeyName: string;
     createSecurityKey: string;
+    lastUsed: string;
   };
   errors: {
     somethingWentWrong: string;

frontend/elements/src/i18n/zh.ts

@@ -146,6 +146,7 @@ export const zh: Translation = {
     authenticatorAppAdd: "设置",
     configured: "已配置",
     useAnotherMethod: "使用其他方法",
+    lastUsed: "最后使用",
   },
   errors: {
     somethingWentWrong: "发生技术错误。请稍后再试。",

frontend/elements/src/pages/LoginInitPage.tsx

@@ -40,6 +40,7 @@ const LoginInitPage = (props: Props) => {
     setUIState,
     stateHandler,
     hidePasskeyButtonOnLogin,
+    lastLogin,
   } = useContext(AppContext);
 
   const [identifierType, setIdentifierType] = useState<IdentifierTypes>(null);
@@ -240,6 +241,7 @@ const LoginInitPage = (props: Props) => {
               }
               disabled={!isWebAuthnSupported}
               icon={"passkey"}
+              showLastUsed={lastLogin?.login_method == "passkey"}
             >
               {t("labels.signInPasskey")}
             </Button>
@@ -258,6 +260,10 @@ const LoginInitPage = (props: Props) => {
                       secondary
                       // @ts-ignore
                       icon={v.value}
+                      showLastUsed={
+                        lastLogin?.login_method == "third_party" &&
+                        lastLogin?.third_party_provider == v.value
+                      }
                     >
                       {t("labels.signInWith", { provider: v.name })}
                     </Button>

frontend/elements/src/pages/LoginMethodChooser.tsx

@@ -22,7 +22,8 @@ interface Props {
 
 const LoginMethodChooserPage = (props: Props) => {
   const { t } = useContext(TranslateContext);
-  const { hanko, setLoadingAction, stateHandler } = useContext(AppContext);
+  const { hanko, setLoadingAction, stateHandler, lastLogin } =
+    useContext(AppContext);
   const { flowState } = useFlowState(props.state);
 
   const onPasswordSelectSubmit = async (event: Event) => {
@@ -63,7 +64,11 @@ const LoginMethodChooserPage = (props: Props) => {
           hidden={!flowState.actions.continue_to_passcode_confirmation?.(null)}
           onSubmit={onPasscodeSelectSubmit}
         >
-          <Button secondary={true} uiAction={"passcode-submit"} icon={"mail"}>
+          <Button
+            secondary={true}
+            uiAction={"passcode-submit"}
+            icon={"mail"}
+          >
             {t("labels.passcode")}
           </Button>
         </Form>