Show authenticated user info in ide in top-bar

components/editor/top-bar/index.ftd

@@ -2,10 +2,11 @@
 -- import: ui.fifthtry.com/components/editor/top-bar/file-switcher
 -- import: ui.fifthtry.com/components/editor/top-bar/package-switcher
 -- import: ui.fifthtry.com/components/avatar
--- import: ui.fifthtry.com/scenarios/john-doe
+-- import: ui.fifthtry.com/records/user-data as ud
 
 -- component top-bar:
 module site-data: site-data
+ud.user-data user-data:
 
 -- ftd.row:
 width.fixed.percent: 100
@@ -30,7 +31,13 @@ padding.px: 10
 	-- file-switcher.file-switcher:
 
 	-- avatar.avatar:
-	user-data: $john-doe.jd
+    if: { top-bar.user-data.is-logged-in }
+    user-data: $top-bar.user-data
+
+    -- ds.primary-button: $lang.sign-in
+    if: { !top-bar.user-data.is-logged-in }
+    link: $top-bar.site-data.sign-in-url
+    radius: curved
 
 -- end: ftd.row
 -- end: top-bar

pages/ide.ftd

@@ -10,15 +10,19 @@
 -- import: ui.fifthtry.com/components/editor/panels/package
 -- import: ui.fifthtry.com/components/editor/panels/preview
 -- import: ui.fifthtry.com/components/editor/welcome-screen
+-- import: ui.fifthtry.com/records/user-data as ud
+
 
 
 -- component page:
+ud.user-data user-data:
 
 -- ftd.column:
 width: fill-container
 height: fill-container
 
 	-- top-bar.top-bar:
+    user-data: $page.user-data
 
 	-- ftd.row:
 	width: fill-container

scenarios/ide.ftd

@@ -1,3 +1,5 @@
 -- import: ui.fifthtry.com/pages/ide
+-- import: ui.fifthtry.com/scenarios/john-doe
 
 -- ide.page:
+user-data: $john-doe.jd