@@ -82,7 +87,6 @@ const LocationCardInner = ({ isOpen, onOpen, disableOpen }: InnerProps) => {
icon={IconKind.ArrowSmall}
variant={isOpen ? IconButtonVariant.SmallSelected : IconButtonVariant.Small}
iconRotation={isOpen ? Direction.DOWN : Direction.RIGHT}
- onClick={onOpen}
/>
)}
diff --git a/new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx b/new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx
index 7f1f65ce..490e2eb0 100644
--- a/new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx
+++ b/new-ui/src/shared/components/LocationCard/components/MfaSelector/MfaSelector.tsx
@@ -25,11 +25,11 @@ export const MfaSelector = ({
case 'email':
return 'mail';
case 'mobileapprove':
- return 'mobile-lock';
+ return 'mobile';
case 'oidc':
return 'token';
case 'totp':
- return 'mobile-lock';
+ return 'lock-closed';
case 'biometric':
return 'biometric';
}
diff --git a/new-ui/src/shared/components/LocationCard/components/MfaSelector/style.scss b/new-ui/src/shared/components/LocationCard/components/MfaSelector/style.scss
index 3d33c107..16432580 100644
--- a/new-ui/src/shared/components/LocationCard/components/MfaSelector/style.scss
+++ b/new-ui/src/shared/components/LocationCard/components/MfaSelector/style.scss
@@ -3,6 +3,7 @@
--border: var(--border-default);
--icon: var(--fg-white-80);
--color: var(--fg-white-80);
+ --box-shadow: box-shadow: 0 4px 4px 0 rgb(0 0 0 / 0%);
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 16px;
@@ -13,26 +14,29 @@
user-select: none;
align-items: center;
box-sizing: border-box;
+ box-shadow: var(--box-shadow);
padding: 0 var(--spacing-md);
min-height: 40px;
border-radius: 8px;
cursor: pointer;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
- transition-property: border-color, background, color;
+ transition-property: border-color, background, color, box-shadow;
+ background-clip: padding-box;
&:hover {
--bg: var(--bg-white-5);
--color: var(--fg-white-100);
- --border: var(--border-default);
+ --border: var(--border-action-disabled);
--icon: var(--fg-white-100);
}
&.selected {
- --bg: var(--bg-white-5);
+ --bg: var(--bg-white-10);
--color: var(--fg-white-100);
- --border: transparent;
+ --border: var(--border-action-disabled);
--icon: var(--fg-white-100);
+ --box-shadow: box-shadow: 0 4px 4px 0 rgb(0 0 0 / 5%);
}
> .middle {
@@ -40,7 +44,7 @@
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
- column-gap: var(--spacing-xs);
+ column-gap: var(--spacing-md);
}
.default-badge {
@@ -71,6 +75,6 @@
.name {
color: inherit;
- font: var(--t-body-xs);
+ font: var(--t-body-sm-400);
}
}
diff --git a/new-ui/src/shared/components/LocationCard/context/context.tsx b/new-ui/src/shared/components/LocationCard/context/context.tsx
index b2e7e8b4..00005f97 100644
--- a/new-ui/src/shared/components/LocationCard/context/context.tsx
+++ b/new-ui/src/shared/components/LocationCard/context/context.tsx
@@ -1,5 +1,5 @@
import { createContext, type ReactNode, useCallback, useContext, useState } from 'react';
-import type { InstanceInfo, LocationInfo } from '../../../rust-api/types';
+import type { InstanceInfo, LocationInfo, MfaMethodValue } from '../../../rust-api/types';
import { MfaMethod } from '../../../rust-api/types';
import { LocationCardViews, type LocationCardViewsValue } from './types';
@@ -10,6 +10,8 @@ interface LocationCardContextValue {
previousView: LocationCardViewsValue | null;
setView: (view: LocationCardViewsValue) => void;
startMfa: () => void;
+ localMfaMethod: MfaMethodValue;
+ setLocalMfaMethod: (method: MfaMethodValue) => void;
}
const LocationCardContext = createContext
(null);
@@ -37,6 +39,9 @@ export const LocationCardProvider = ({
const [currentView, setCurrentView] = useState(
location.active ? LocationCardViews.Connected : LocationCardViews.Default,
);
+ const [localMfaMethod, setLocalMfaMethod] = useState(
+ location.mfa_method ?? MfaMethod.Totp,
+ );
const setView = useCallback(
(view: LocationCardViewsValue) => {
@@ -47,7 +52,7 @@ export const LocationCardProvider = ({
);
const startMfa = useCallback(() => {
- switch (location.mfa_method) {
+ switch (localMfaMethod) {
case MfaMethod.Totp:
setView(LocationCardViews.MfaTotp);
break;
@@ -61,7 +66,7 @@ export const LocationCardProvider = ({
setView(LocationCardViews.MfaMobile);
break;
}
- }, [location.mfa_method, setView]);
+ }, [localMfaMethod, setView]);
return (
{children}
diff --git a/new-ui/src/shared/components/LocationCard/style.scss b/new-ui/src/shared/components/LocationCard/style.scss
index 9221d88a..c8a68b12 100644
--- a/new-ui/src/shared/components/LocationCard/style.scss
+++ b/new-ui/src/shared/components/LocationCard/style.scss
@@ -1,7 +1,7 @@
.location-card {
- border-radius: 12px;
+ border-radius: 16px;
box-sizing: border-box;
- padding: var(--spacing-md) var(--spacing-lg);
+ padding: var(--spacing-lg);
background-color: var(--bg-dark-blue-40);
> .top-track {
@@ -11,6 +11,17 @@
justify-content: flex-start;
user-select: none;
+ &.interactive {
+ cursor: pointer;
+
+ &:hover {
+ > .right > .icon-button {
+ --bg: var(--c-white-20);
+ --icon: var(--c-white-100);
+ }
+ }
+ }
+
> .left {
display: flex;
flex-flow: row;
diff --git a/new-ui/src/shared/components/LocationCard/views/DefaultView/DefaultView.tsx b/new-ui/src/shared/components/LocationCard/views/DefaultView/DefaultView.tsx
index acfb49a9..0b5ce633 100644
--- a/new-ui/src/shared/components/LocationCard/views/DefaultView/DefaultView.tsx
+++ b/new-ui/src/shared/components/LocationCard/views/DefaultView/DefaultView.tsx
@@ -38,7 +38,11 @@ export const DefaultView = () => {
{
updateRouting({
connectionType: location.connection_type,
diff --git a/new-ui/src/shared/components/LocationCard/views/DefaultView/style.scss b/new-ui/src/shared/components/LocationCard/views/DefaultView/style.scss
index b32113ff..658c869b 100644
--- a/new-ui/src/shared/components/LocationCard/views/DefaultView/style.scss
+++ b/new-ui/src/shared/components/LocationCard/views/DefaultView/style.scss
@@ -5,9 +5,10 @@
grid-template-rows: 1fr;
align-items: center;
column-gap: var(--spacing-md);
+ user-select: none;
> .name {
- font: var(--t-body-xs-500);
+ font: var(--t-body-sm-400);
color: var(--fg-white-100);
}
@@ -17,10 +18,12 @@
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
+ justify-content: center;
padding: 0 4px;
- height: 18px;
- width: 32px;
- background-color: var(--bg-white-100);
+ min-height: 20px;
+ width: 36px;
+ background-color: transparent;
+ border: 1px solid var(--bg-white-60);
p {
font: var(--font-family-body);
@@ -28,7 +31,7 @@
font-weight: 500;
line-height: 16px;
letter-spacing: 0.11px;
- color: var(--fg-action);
+ color: var(--fg-white-60);
}
}
}
diff --git a/new-ui/src/shared/components/LocationCard/views/LocationCardMfaSettings/LocationCardMfaSettings.tsx b/new-ui/src/shared/components/LocationCard/views/LocationCardMfaSettings/LocationCardMfaSettings.tsx
index c8314ae6..04b066f6 100644
--- a/new-ui/src/shared/components/LocationCard/views/LocationCardMfaSettings/LocationCardMfaSettings.tsx
+++ b/new-ui/src/shared/components/LocationCard/views/LocationCardMfaSettings/LocationCardMfaSettings.tsx
@@ -30,14 +30,18 @@ export const LocationCardMfaSettings = () => {
},
});
- const { previousView, setView, location } = useLocationCardContext();
+ const { previousView, setView, location, localMfaMethod, setLocalMfaMethod } =
+ useLocationCardContext();
- const mfaMethod = location.mfa_method ?? MfaMethod.Totp;
+ const locationDefaultMfaMethod = location.mfa_method ?? MfaMethod.Totp;
- const [selectedPref, setSelectedPref] = useState(
- mfaMethod ?? MfaMethod.Totp,
+ const [selectedMethod, setSelectedPref] = useState(
+ localMfaMethod ?? MfaMethod.Totp,
);
+ const isFromDefault = previousView === LocationCardViews.Default;
+ const [setAsDefault, setSetAsDefault] = useState(true);
+
const MfaFactorsList = useMemo((): MfaMethodValue[] => {
if (location.location_mfa_mode === LocationMfaMode.Internal) {
return [MfaMethod.Totp, MfaMethod.Email, MfaMethod.MobileApprove];
@@ -46,13 +50,14 @@ export const LocationCardMfaSettings = () => {
}, [location.location_mfa_mode]);
const handleSubmit = () => {
- if (selectedPref !== mfaMethod) {
+ setLocalMfaMethod(selectedMethod);
+ if ((isFromDefault || setAsDefault) && selectedMethod !== locationDefaultMfaMethod) {
setMfaMethod({
locationId: location.id,
- mfaMethod: selectedPref,
+ mfaMethod: selectedMethod,
});
- setView(previousView ?? LocationCardViews.Default);
}
+ setView(previousView ?? LocationCardViews.Default);
};
return (
@@ -70,21 +75,19 @@ export const LocationCardMfaSettings = () => {
setSelectedPref(factor)}
/>
))}