feat: add last used indicator to the login page (#1957)

teamhanko · Nov 29, 2024 · aa97808 · aa97808
1 parent f32f48e
commit aa97808
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 6 deletions.
diff --git a/frontend/elements/src/components/form/Button.tsx b/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>
   );

diff --git a/frontend/elements/src/components/form/LastUsed.tsx b/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;
diff --git a/frontend/elements/src/components/form/styles.sass b/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,8 +92,19 @@
     flex-grow: 0
     width: auto
 
-// Input Styles
+.caption
+  flex-grow: 1
+  flex-wrap: wrap
+  display: flex
+  justify-content: space-between
+  align-items: baseline
+
+// Last Used Styles
+.lastUsed
+ color: variables.$color-shade-1
+ font-size: smaller
 
+// Input Styles
 .inputWrapper
   flex-grow: 1
   position: relative

diff --git a/frontend/elements/src/components/icons/styles.sass b/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

diff --git a/frontend/elements/src/i18n/bn.ts b/frontend/elements/src/i18n/bn.ts
@@ -152,6 +152,7 @@ export const bn: Translation = {
     authenticatorAppAdd: "সেট আপ করুন",
     configured: "কনফিগার করা হয়েছে",
     useAnotherMethod: "আরেকটি পদ্ধতি ব্যবহার করুন",
+    lastUsed: "সর্বশেষ ব্যবহৃত",
     trustDevice: "এই ব্রাউজারটি বিশ্বাস করবেন",
     staySignedIn: "সাইন ইন থাকা চালিয়ে যান",
   },

diff --git a/frontend/elements/src/i18n/de.ts b/frontend/elements/src/i18n/de.ts
@@ -158,6 +158,7 @@ export const de: Translation = {
     authenticatorAppAdd: "Einrichten",
     configured: "konfiguriert",
     useAnotherMethod: "Eine andere Methode verwenden",
+    lastUsed: "Zuletzt verwendet",
     trustDevice: "Diesem Browser vertrauen",
     staySignedIn: "Angemeldet bleiben",
   },

diff --git a/frontend/elements/src/i18n/en.ts b/frontend/elements/src/i18n/en.ts
@@ -153,6 +153,7 @@ export const en: Translation = {
     authenticatorAppAdd: "Set up",
     configured: "configured",
     useAnotherMethod: "Use another method",
+    lastUsed: "Last used",
     trustDevice: "Trust this browser",
     staySignedIn: "Stay signed in",
   },

diff --git a/frontend/elements/src/i18n/fr.ts b/frontend/elements/src/i18n/fr.ts
@@ -158,6 +158,7 @@ export const fr: Translation = {
     authenticatorAppAdd: "Configurer",
     configured: "configuré",
     useAnotherMethod: "Utiliser une autre méthode",
+    lastUsed: "Dernière utilisation",
     trustDevice: "Faire confiance à ce navigateur",
     staySignedIn: "Rester connecté",
   },

diff --git a/frontend/elements/src/i18n/it.ts b/frontend/elements/src/i18n/it.ts
@@ -154,6 +154,7 @@ export const it: Translation = {
     authenticatorAppAdd: "Imposta",
     configured: "configurato",
     useAnotherMethod: "Usa un altro metodo",
+    lastUsed: "Ultimo utilizzo",
     trustDevice: "Fidarsi di questo browser",
     staySignedIn: "Rimani connesso",
   },

diff --git a/frontend/elements/src/i18n/pt-BR.ts b/frontend/elements/src/i18n/pt-BR.ts
@@ -157,6 +157,7 @@ export const ptBR: Translation = {
     authenticatorAppAdd: "Configurar",
     configured: "configurado",
     useAnotherMethod: "Usar outro método",
+    lastUsed: "Último uso",
     trustDevice: "Confiar neste navegador",
     staySignedIn: "Manter-me conectado",
   },

diff --git a/frontend/elements/src/i18n/translations.ts b/frontend/elements/src/i18n/translations.ts
@@ -142,6 +142,7 @@ export interface Translation {
     currentSession: string;
     newSecurityKeyName: string;
     createSecurityKey: string;
+    lastUsed: string;
   };
   errors: {
     somethingWentWrong: string;

diff --git a/frontend/elements/src/i18n/zh.ts b/frontend/elements/src/i18n/zh.ts
@@ -149,6 +149,7 @@ export const zh: Translation = {
     authenticatorAppAdd: "设置",
     configured: "已配置",
     useAnotherMethod: "使用其他方法",
+    lastUsed: "最后使用",
     trustDevice: "信任此浏览器",
     staySignedIn: "保持登录状态",
   },

diff --git a/frontend/elements/src/pages/LoginInitPage.tsx b/frontend/elements/src/pages/LoginInitPage.tsx
@@ -42,6 +42,7 @@ const LoginInitPage = (props: Props) => {
     setUIState,
     stateHandler,
     hidePasskeyButtonOnLogin,
+    lastLogin,
   } = useContext(AppContext);
 
   const [identifierType, setIdentifierType] = useState<IdentifierTypes>(null);
@@ -269,6 +270,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>

diff --git a/frontend/elements/src/pages/LoginMethodChooser.tsx b/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>