Skip to content

Commit c7b2fcd

Browse files
mattdjenkinsonmattdjenkinson
authored
Merge pull request #122 from datum-cloud/improve-auth-flow
Improve auth flow
2 parents c554a57 + b4741c2 commit c7b2fcd

File tree

12 files changed

+516
-153
lines changed

12 files changed

+516
-153
lines changed

‎lib/src/datum_cloud/auth.rs‎

Lines changed: 402 additions & 27 deletions
Large diffs are not rendered by default.

‎ui/assets/icons/move-right.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎ui/assets/images/login-success.png‎

715 KB
Loading

‎ui/assets/tailwind.css‎

Lines changed: 31 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
--color-gray-300: oklch(87.2% 0.01 258.338);
1313
--color-gray-500: oklch(55.1% 0.027 264.364);
1414
--color-gray-700: oklch(37.3% 0.034 259.733);
15-
--color-black: #000;
1615
--color-white: #fff;
1716
--spacing: 0.25rem;
1817
--container-xs: 20rem;
@@ -24,8 +23,6 @@
2423
--text-sm--line-height: calc(1.25 / 0.875);
2524
--text-xl: 1.25rem;
2625
--text-xl--line-height: calc(1.75 / 1.25);
27-
--text-2xl: 1.5rem;
28-
--text-2xl--line-height: calc(2 / 1.5);
2926
--font-weight-normal: 400;
3027
--font-weight-medium: 500;
3128
--font-weight-semibold: 600;
@@ -267,9 +264,6 @@
267264
.z-\[60\] {
268265
z-index: 60;
269266
}
270-
.z-\[100\] {
271-
z-index: 100;
272-
}
273267
.container {
274268
width: 100%;
275269
@media (width >= 40rem) {
@@ -327,9 +321,6 @@
327321
.mb-0\.5 {
328322
margin-bottom: calc(var(--spacing) * 0.5);
329323
}
330-
.mb-2 {
331-
margin-bottom: calc(var(--spacing) * 2);
332-
}
333324
.mb-3 {
334325
margin-bottom: calc(var(--spacing) * 3);
335326
}
@@ -342,9 +333,6 @@
342333
.mb-7 {
343334
margin-bottom: calc(var(--spacing) * 7);
344335
}
345-
.ml-2 {
346-
margin-left: calc(var(--spacing) * 2);
347-
}
348336
.ml-3 {
349337
margin-left: calc(var(--spacing) * 3);
350338
}
@@ -357,9 +345,6 @@
357345
.block {
358346
display: block;
359347
}
360-
.contents {
361-
display: contents;
362-
}
363348
.flex {
364349
display: flex;
365350
}
@@ -407,9 +392,6 @@
407392
.h-9 {
408393
height: calc(var(--spacing) * 9);
409394
}
410-
.h-12 {
411-
height: calc(var(--spacing) * 12);
412-
}
413395
.h-20 {
414396
height: calc(var(--spacing) * 20);
415397
}
@@ -428,9 +410,6 @@
428410
.h-\[45vh\] {
429411
height: 45vh;
430412
}
431-
.h-\[380px\] {
432-
height: 380px;
433-
}
434413
.h-full {
435414
height: 100%;
436415
}
@@ -503,9 +482,6 @@
503482
.w-\[37px\] {
504483
width: 37px;
505484
}
506-
.w-\[320px\] {
507-
width: 320px;
508-
}
509485
.w-\[452px\] {
510486
width: 452px;
511487
}
@@ -667,23 +643,13 @@
667643
.gap-6 {
668644
gap: calc(var(--spacing) * 6);
669645
}
670-
.gap-8 {
671-
gap: calc(var(--spacing) * 8);
672-
}
673646
.space-y-1\.5 {
674647
:where(& > :not(:last-child)) {
675648
--tw-space-y-reverse: 0;
676649
margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
677650
margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
678651
}
679652
}
680-
.space-y-3 {
681-
:where(& > :not(:last-child)) {
682-
--tw-space-y-reverse: 0;
683-
margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
684-
margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
685-
}
686-
}
687653
.space-y-4 {
688654
:where(& > :not(:last-child)) {
689655
--tw-space-y-reverse: 0;
@@ -806,6 +772,9 @@
806772
.border-t-tunnel-card-border {
807773
border-top-color: var(--tunnel-card-border);
808774
}
775+
.bg-\[var\(--midnight-fjord\)\] {
776+
background-color: var(--midnight-fjord);
777+
}
809778
.bg-app-border {
810779
background-color: var(--app-border);
811780
}
@@ -818,12 +787,6 @@
818787
background-color: color-mix(in oklab, var(--background) 50%, transparent);
819788
}
820789
}
821-
.bg-black\/20 {
822-
background-color: color-mix(in srgb, #000 20%, transparent);
823-
@supports (color: color-mix(in lab, red, red)) {
824-
background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
825-
}
826-
}
827790
.bg-button-primary-background\/90 {
828791
background-color: var(--button-primary-background);
829792
@supports (color: color-mix(in lab, red, red)) {
@@ -980,23 +943,32 @@
980943
.py-7 {
981944
padding-block: calc(var(--spacing) * 7);
982945
}
983-
.py-8 {
984-
padding-block: calc(var(--spacing) * 8);
985-
}
986946
.pt-2 {
987947
padding-top: calc(var(--spacing) * 2);
988948
}
989-
.pt-12 {
990-
padding-top: calc(var(--spacing) * 12);
991-
}
992-
.pr-4 {
993-
padding-right: calc(var(--spacing) * 4);
994-
}
995949
.pb-12 {
996950
padding-bottom: calc(var(--spacing) * 12);
997951
}
998-
.pb-48 {
999-
padding-bottom: calc(var(--spacing) * 48);
952+
.pb-\[129px\] {
953+
padding-bottom: 129px;
954+
}
955+
.pb-\[132px\] {
956+
padding-bottom: 132px;
957+
}
958+
.pb-\[140px\] {
959+
padding-bottom: 140px;
960+
}
961+
.pb-\[145px\] {
962+
padding-bottom: 145px;
963+
}
964+
.pb-\[150px\] {
965+
padding-bottom: 150px;
966+
}
967+
.pb-\[154px\] {
968+
padding-bottom: 154px;
969+
}
970+
.pb-\[155px\] {
971+
padding-bottom: 155px;
1000972
}
1001973
.pl-2\.5 {
1002974
padding-left: calc(var(--spacing) * 2.5);
@@ -1013,14 +985,6 @@
1013985
.font-mono {
1014986
font-family: "Menlo", "Consolas", "Monaco", "DejaVu Sans Mono", monospace;
1015987
}
1016-
.font-sans {
1017-
font-family: "Alliance No1", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
1018-
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1019-
}
1020-
.text-2xl {
1021-
font-size: var(--text-2xl);
1022-
line-height: var(--tw-leading, var(--text-2xl--line-height));
1023-
}
1024988
.text-sm {
1025989
font-size: 14px;
1026990
line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1045,10 +1009,6 @@
10451009
.text-\[11px\] {
10461010
font-size: 11px;
10471011
}
1048-
.leading-4 {
1049-
--tw-leading: calc(var(--spacing) * 4);
1050-
line-height: calc(var(--spacing) * 4);
1051-
}
10521012
.leading-none {
10531013
--tw-leading: 1;
10541014
line-height: 1;
@@ -1165,6 +1125,12 @@
11651125
.text-slate-500 {
11661126
color: var(--color-slate-500);
11671127
}
1128+
.text-white\/50 {
1129+
color: color-mix(in srgb, #fff 50%, transparent);
1130+
@supports (color: color-mix(in lab, red, red)) {
1131+
color: color-mix(in oklab, var(--color-white) 50%, transparent);
1132+
}
1133+
}
11681134
.uppercase {
11691135
text-transform: uppercase;
11701136
}
@@ -1243,9 +1209,6 @@
12431209
.fade-in {
12441210
--tw-enter-opacity: 0;
12451211
}
1246-
.running {
1247-
animation-play-state: running;
1248-
}
12491212
.group-data-\[state\=checked\]\:translate-x-5 {
12501213
&:is(:where(.group)[data-state="checked"] *) {
12511214
--tw-translate-x: calc(var(--spacing) * 5);
@@ -1627,8 +1590,8 @@
16271590
--alert-red-dark: oklch(0.746 0.122 20.4);
16281591
--button-primary-background: var(--aurora-moss);
16291592
--button-primary-foreground: var(--midnight-fjord);
1630-
--button-secondary-background: var(--app-dark-utility-2);
1631-
--button-secondary-foreground: var(--glacier-mist-800);
1593+
--button-secondary-background: var(--aurora-moss);
1594+
--button-secondary-foreground: var(--midnight-fjord);
16321595
--button-outline-background: var(--app-dark-utility-5);
16331596
--button-outline-foreground: var(--glacier-mist-700);
16341597
--button-link-foreground: var(--canyon-clay);

‎ui/src/components/dropdown_menu/component.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ pub fn DropdownMenuContent(props: DropdownMenuContentProps) -> Element {
4444
dropdown_menu::DropdownMenuContent {
4545
id: props.id,
4646
attributes: props.attributes,
47-
class: "absolute right-0 min-w-36 top-0 rounded-md border-app-border bg-card-background shadow-card overflow-hidden z-9999999 p-1 animate-in fade-in duration-300",
47+
class: "absolute right-0 min-w-36 top-0 rounded-md border border-app-border bg-card-background shadow-card overflow-hidden z-9999999 p-1 animate-in fade-in duration-300",
4848
{props.children}
4949
}
5050
}

‎ui/src/components/icon.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ fn svg_content_for(name: &str) -> Option<&'static str> {
4444
"down-right-arrow" => Some(include_str!("../../assets/icons/down-right-arrow.svg")),
4545
"power-cable" => Some(include_str!("../../assets/icons/power-cable.svg")),
4646
"search" => Some(include_str!("../../assets/icons/search.svg")),
47+
"move-right" => Some(include_str!("../../assets/icons/move-right.svg")),
4748
_ => None,
4849
}
4950
}

‎ui/src/components/splash.rs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ pub fn Splash() -> Element {
99
div {
1010
class: "w-full grid h-screen bg-cover place-items-center",
1111
style: "background-image: url(\"{HERO_ILLUSTRATION}\");",
12-
div { class: "text-center pb-48",
13-
img { class: "w-12 h-12 mx-auto", src: "{LOGO}" }
12+
div { class: "text-center pb-[154px]",
13+
img { class: "w-20 h-20 mx-auto", src: "{LOGO}" }
1414
}
1515
}
1616
}

‎ui/src/main.rs‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ mod views;
2626

2727
static LOG_GUARD: OnceLock<WorkerGuard> = OnceLock::new();
2828

29+
/// Signal indicating we're on the login page (for TitleBar background color).
30+
#[derive(Clone)]
31+
pub struct IsLoginPageSignal(pub Signal<bool>);
32+
2933
/// Context for manual update check: trigger starts a check, in_progress is true while checking.
3034
#[derive(Clone)]
3135
pub struct UpdateCheckContext {
@@ -116,13 +120,13 @@ fn main() {
116120
.with_has_shadow(true)
117121
.with_fullsize_content_view(true);
118122

123+
let mut config = Config::new()
124+
// Make "close" behave like hide, so the tray icon can restore it.
125+
.with_close_behaviour(WindowCloseBehaviour::WindowHides)
126+
.with_window(window_builder);
127+
119128
dioxus::LaunchBuilder::desktop()
120-
.with_cfg(desktop! {
121-
Config::new()
122-
// Make "close" behave like hide, so the tray icon can restore it.
123-
.with_close_behaviour(WindowCloseBehaviour::WindowHides)
124-
.with_window(window_builder)
125-
})
129+
.with_cfg(desktop! { config })
126130
.launch(App);
127131
}
128132

@@ -154,24 +158,38 @@ fn init_tracing() {
154158
/// Custom title bar (drag region + favicon) shown only on macOS; empty on Windows/Linux which use the native title bar.
155159
#[component]
156160
fn TitleBar() -> Element {
161+
let IsLoginPageSignal(is_login_page) = consume_context::<IsLoginPageSignal>();
162+
let title_bar_bg = if is_login_page() {
163+
"h-[32px] flex items-center pl-20 z-50 cursor-default bg-[var(--midnight-fjord)]"
164+
} else {
165+
"h-[32px] flex items-center pl-20 z-50 cursor-default bg-background"
166+
};
167+
157168
#[cfg(target_os = "macos")]
158169
{
159170
rsx! {
160171
div {
161-
class: "h-[32px] flex items-center pl-20 bg-background z-50 cursor-default",
172+
class: "{title_bar_bg}",
162173
onmousedown: move |_| {
163174
#[cfg(feature = "desktop")]
164175
{
165176
use_window().drag();
166177
}
167178
},
168-
img {
169-
src: "{FAVICON_DARK_196}",
170-
class: "w-6 h-6 ml-auto mr-2 dark:hidden",
171-
}
172-
img {
173-
src: "{FAVICON_LIGHT_196}",
174-
class: "w-6 h-6 ml-auto mr-2 hidden dark:block",
179+
if is_login_page() {
180+
img {
181+
src: "{FAVICON_LIGHT_196}",
182+
class: "w-6 h-6 ml-auto mr-2 block",
183+
}
184+
} else {
185+
img {
186+
src: "{FAVICON_DARK_196}",
187+
class: "w-6 h-6 ml-auto mr-2 dark:hidden",
188+
}
189+
img {
190+
src: "{FAVICON_LIGHT_196}",
191+
class: "w-6 h-6 ml-auto mr-2 hidden dark:block",
192+
}
175193
}
176194
}
177195
}
@@ -385,6 +403,11 @@ fn App() -> Element {
385403
// Tray can trigger opening the add tunnel dialog; Chrome (inside Router) handles navigation + dialog.
386404
provide_context(open_add_tunnel_from_tray);
387405

406+
// Signal for whether we're on the login page (used by TitleBar for background color).
407+
// Start true since we always land on login after splash; Login's use_effect/use_drop keep it in sync.
408+
let is_login_page = use_signal(|| true);
409+
provide_context(IsLoginPageSignal(is_login_page));
410+
388411
rsx! {
389412
div { class: "theme-alpha",
390413
TitleBar {}

0 commit comments

Comments
 (0)