private static void FirstTimeExperience(Ui ui, DashboardModel model) { ui.BeginDiv("ui info message") .Div("Welcome to HQ!", new { @class = "header" }) .BeginUl("list") .Li("This HQ.io instance is a new install. You need to configure it before using it.") .Li( "If you intended to add this instance to an existing cluster, you may do some from <a href=\"/settings\">Settings</a>.") .EndUl(); ui.EndDiv(); ui.BeginH4("ui horizontal divider header") .Icon(InterfaceIcons.Cogs) .Literal("New Cluster Setup") .EndH4(); ui.BeginDiv("ui three cards"); { CreateSettingsBox(ui, model); CreateAppBox(ui, model); CreateAccessTokenBox(ui, model); } ui.EndDiv(); // cards ui.BeginH4("ui horizontal divider header") .Icon(FontAwesomeIcons.ChartBar) .Literal("Diagnostics") .EndH4(); ui.Component <LogStreamViewer>(); }
private static void CreateSettingsBox(Ui ui, DashboardModel model) { var completed = model.HasSettings; var id = ui.NextId("settings").ToString(); var message = completed ? "You have successfully initialized your configuration settings." : "Create a configuration to manage your cluster's features and security."; var icon = completed ? FontAwesomeIcons.CheckCircle : FontAwesomeIcons.PlusCircle; var color = completed ? NamedColors.Grey : NamedColors.Green; var buttonState = completed ? " disabled" : ""; ui.BeginDiv("card"); { ui.BeginDiv("content"); { ui.Div("Configure Cluster Settings", new { @class = "header" }); ui.Div(message, new { @class = "description" }); } ui.EndDiv(); ui.BeginDiv($"ui bottom attached button{buttonState}", id: id) .Icon(icon, color).Literal("Create Settings") .EndDiv(); } ui.EndDiv(); if (ui.OnClick()) { if (!SqliteConfigurationHelper.IsEmptyConfiguration("settings.db")) { return; } var configSeed = ConfigurationLoader.FromEmbeddedJsonFile("seed.json"); if (configSeed == null) { return; } SqliteConfigurationHelper.MigrateToLatest("settings.db", SaveConfigurationOptions.Default, configSeed); var configRoot = ui.Context.UiServices.GetRequiredService <IConfigurationRoot>(); configRoot.Reload(); var options = ui.Context.UiServices.GetRequiredService <ISaveOptions <SecurityOptions> >(); if (AuthenticationExtensions.MaybeSelfCreateMissingKeys(options.Value.Tokens)) { options.TrySave("HQ:Security", () => { }); } ui.Invalidate(); } }
private static void CreateAccessTokenBox(Ui ui, DashboardModel model) { var id = ui.NextId("tokens").ToString(); var message = model.HasAccessToken ? "You're ready to access this secured node." : "You need an access token or super user account to create users and assign roles."; var icon = model.HasAccessToken ? FontAwesomeIcons.CheckCircle : FontAwesomeIcons.PlusCircle; var color = model.HasAccessToken ? NamedColors.Grey : NamedColors.Green; var buttonState = model.HasAccessToken ? " disabled" : ""; ui.BeginDiv("card"); { ui.BeginDiv("content"); { ui.Div("Create an Access Token", new { @class = "header" }); ui.Div(message, new { @class = "description" }); } ui.EndDiv(); ui.BeginDiv($"ui bottom attached button{buttonState}", id: id) .Icon(icon, color).Literal("Create Token") .EndDiv(); } ui.EndDiv(); if (ui.OnClick()) { try { var options = ui.Context.UiServices.GetService <ISaveOptions <SuperUserOptions> >(); options.TrySave("HQ:Security", x => { x.Enabled = true; x.Username = "******"; x.Password = "******"; x.Email = "*****@*****.**"; x.PhoneNumber = "5555555555"; }); var configRoot = ui.Context.UiServices.GetRequiredService <IConfigurationRoot>(); configRoot.Reload(); ui.Invalidate(); } catch (Exception e) { Console.WriteLine(e); } } }
public override void Render(Ui ui, TModel model) { ui.Component <Sidebar>(); ui.Component <TopBar>(); ui.BeginDiv(new { @class = "pusher" }); ui.BeginDiv("ui basic section"); Content(ui, model); ui.EndDiv(); ui.EndDiv(); ui.Component <Footer>(); }
public override void Render(Ui ui) { ui.BeginDiv(new { @class = "ui sidebar inverted vertical menu" }); ui.BeginDiv("item") // // Dashboard: .BeginDiv("header") .Icon(FontAwesomeIcons.Windows).A("Dashboard", new { href = "/", @class = "menu item active" }) .Literal("Dashboard") .EndDiv() // // Users: .BeginDiv("header").Icon(FontAwesomeIcons.Users).Literal("Users").EndDiv() .BeginDiv("menu") .BeginA("item").Icon(FontAwesomeIcons.Gamepad).Literal("Games").EndA() .BeginA("item").Icon(FontAwesomeIcons.Gamepad).Literal("Games").EndA() .BeginA("item").Icon(FontAwesomeIcons.Gamepad).Literal("Games").EndA() .EndDiv() // // Operations: .BeginDiv("header").Icon(FontAwesomeIcons.Diagnoses).Literal("Operations").EndDiv() .BeginDiv("menu") .BeginA("item").Icon(FontAwesomeIcons.Gamepad).Literal("Games").EndA() .BeginA("item").Icon(FontAwesomeIcons.Gamepad).Literal("Games").EndA() .BeginA("item").Icon(FontAwesomeIcons.Gamepad).Literal("Games").EndA() .EndDiv() // // Settings: .BeginDiv("header").Icon(FontAwesomeIcons.ObjectGroup).Literal("Settings").EndDiv() .BeginDiv("menu") .BeginA("item").Icon(FontAwesomeIcons.Gamepad).Literal("Games").EndA() .BeginA("item").Icon(FontAwesomeIcons.Gamepad).Literal("Games").EndA() .BeginA("item").Icon(FontAwesomeIcons.Gamepad).Literal("Games").EndA() .EndDiv() // // Log Stream: .BeginDiv("header menu item") .Icon(FontAwesomeIcons.Bars).A("Log Stream", new { href = "/logstream" }) .EndDiv(); ui.EndDiv(); ui.EndDiv(); }
public override void Render(Ui ui, T rows) { var accessor = Accessors[typeof(T)]; var columns = Members[typeof(T)]; Header(ui, columns); ui.BeginElement("tbody"); { foreach (var row in rows) { ui.BeginElement("tr"); ui.BeginElement("td", new { @class = "collapsing" }); { ui.BeginDiv("ui fitted slider checkbox") .Input(InputType.Checkbox) .Label("") .EndDiv(); } ui.EndElement("td"); foreach (var column in columns) { ui.BeginElement("td") .Literal(accessor[row, column.Name]?.ToString()); ui.EndElement("td"); } ui.EndElement("tr"); } } ui.EndElement("tbody"); Footer(ui); }
public override void Content(Ui ui) { ui.BeginDiv(new { @class = "ui main text container", style = "margin-top: 7em;" }); { ui.Component <LogStreamViewer>(); } ui.EndDiv(); }
private static void CreateAppBox(Ui ui, DashboardModel model) { var id = ui.NextId("apps").ToString(); var message = model.HasApplication ? "You have at least one application ready to serve API objects." : "An application is a logical group of user roles and object schemas."; var icon = model.HasApplication ? FontAwesomeIcons.CheckCircle : FontAwesomeIcons.PlusCircle; var color = model.HasApplication ? NamedColors.Grey : NamedColors.Green; var buttonState = model.HasApplication ? " disabled" : ""; ui.BeginDiv("card"); { ui.BeginDiv("content"); { ui.Div("Create an Application", new { @class = "header" }); ui.Div(message, new { @class = "description" }); } ui.EndDiv(); ui.BeginDiv($"ui bottom attached button{buttonState}", id: id) .Icon(icon, color).Literal("Add Application") .EndDiv(); } ui.EndDiv(); if (ui.OnClick()) { var appService = ui.Context.UiServices.GetRequiredService <IApplicationService <IdentityApplication> >(); var any = appService.GetAsync().GetAwaiter().GetResult(); if (any.Succeeded && any.Data.Any()) { return; } appService.CreateAsync(new CreateApplicationModel { Name = "Default Application" }).GetAwaiter() .GetResult(); ui.Invalidate(); } }
public override void Content(Ui ui, DashboardModel model) { ui.BeginDiv(new { @class = "ui main text container", style = "margin-top: 7em;" }); if (model.IsFirstTimeExperience) { FirstTimeExperience(ui, model); } ui.EndDiv(); }
private static void Footer(Ui ui) { ui.BeginTfoot("full-width"); { ui.BeginElement("tr"); { ui.Element("th"); ui.BeginElement("th", new { colspan = 4 }); { ui.BeginDiv("ui right floated small primary labeled icon button"); ui.Icon(InterfaceIcons.User).Literal("Add User"); ui.EndDiv(); ui.BeginDiv("ui small button").Literal("Approve").EndDiv(); ui.BeginDiv("ui small button disabled").Literal("Approve All").EndDiv(); } ui.EndElement("th"); } ui.EndElement("tr"); } ui.EndTfoot(); }
public override void Render(Ui ui) { ui.BeginDiv(new { @class = "ui four column grid" }); { ui.BeginDiv(new { @class = "column" }); { ui.Element("h1", "Log Stream"); } ui.EndDiv(); ui.BeginDiv(new { @class = "column" }); { ui.BeginElement("button", new { @class = "ui labeled small icon button", id = "clear-logs" }); { ui.Element("i", "", new { @class = "trash icon" }); ui.Literal("Clear"); } ui.EndElement("button"); } ui.EndDiv(); } ui.EndDiv(); ui.Element("p", ""); ui.BeginDiv(new { @class = "ui segment" }); { ui.BeginDiv(new { @class = "ui active dimmer", id = "no-logs" }); { ui.Div("Waiting for logs...", new { @class = "ui indeterminate text loader" }); } ui.EndDiv(); ui.BeginDiv(new { id = "logs", @class = "ui relaxed divided list", style = "height: 300px; overflow: auto;" }); ui.EndDiv(); } ui.EndDiv(); }
public override void Render(Ui ui) { var accessor = ui.GetRequiredService <IHttpContextAccessor>(); var connection = accessor.HttpContext.Features.Get <IHttpConnectionFeature>(); var local = $"{connection?.LocalIpAddress}:{connection?.LocalPort}"; // // Top Bar Menu: // ui.BeginDiv(new { @class = "ui fixed inverted menu" }); { ui.BeginDiv(new { @class = "ui container" }); { ui.BeginElement("a", new { href = "#", @class = "header item" }); { ui.Element("img", "HQ", new { @class = "logo", src = "assets/images/logo.png", style = "margin-right: 1.5em;" }); } ui.EndElement("a"); ui.Element("a", $"{local}", new { href = "#", @class = "item" }); /* * ui.BeginDiv(new { @class = "ui simple dropdown item" }); * { * ui.Literal("Dropdown "); * ui.Element("i", attr: new { @class = "dropdown icon" }); * ui.BeginDiv(new {@class = "menu"}); * { * ui.Element("a", "Link Item", new { href = "#", @class = "item" }); * ui.Element("a", "Link Item", new { href = "#", @class = "item" }); * ui.Div(attr: new { @class = "divider" }); * * ui.Div("Header Item", new { @class = "header" }); * ui.BeginDiv(attr: new { @class = "item"}); * { * ui.Element("i", attr: new { @class = "dropdown icon" }); * ui.Literal("Sub Menu"); * ui.BeginDiv(new {@class = "menu"}); * { * ui.Element("a", "Link Item", new { href = "#", @class = "item" }); * ui.Element("a", "Link Item", new { href = "#", @class = "item" }); * } * ui.EndDiv(); * } * ui.EndDiv(); * * ui.Element("a", "Link Item", new { href = "#", @class = "item" }); * } * ui.EndDiv(); * } * ui.EndDiv(); */ } ui.EndDiv(); } ui.EndDiv(); // // Main: // ui.BeginDiv(new { @class = "ui main text container", style = "margin-top: 7em;" }); { ui.BeginDiv(new { @class = "ui four column grid" }); { ui.BeginDiv(new { @class = "column" }); { ui.Element("h1", "Server Logs"); } ui.EndDiv(); ui.BeginDiv(new { @class = "column" }); { ui.BeginElement("button", new { @class = "ui labeled small icon button", id = "clear-logs" }); { ui.Element("i", "", new { @class = "trash icon" }); ui.Literal("Clear"); } ui.EndElement("button"); } ui.EndDiv(); } ui.EndDiv(); ui.Element("p", ""); ui.BeginDiv(new { @class = "ui segment" }); { ui.BeginDiv(new { @class = "ui active dimmer", id = "no-logs" }); { ui.Div("Tailing logs...", new { @class = "ui indeterminate text loader" }); } ui.EndDiv(); ui.BeginDiv(new { id = "logs", @class = "ui relaxed divided list", style = "height: 300px; overflow: auto;" }); ui.EndDiv(); } ui.EndDiv(); } ui.EndDiv(); // // Footer: // ui.BeginDiv(new { @class = "ui inverted footer segment", style = "margin: 5em 0em 0em; padding: 5em 0em;" }); { ui.BeginDiv(new { @class = "ui center aligned container" }); { ui.BeginDiv(new { @class = "ui stackable inverted divided grid" }); { ui.BeginDiv(new { @class = "three wide column" }); { ui.Element("h4", "Platform", new { @class = "ui inverted header" }); ui.BeginDiv(new { @class = "ui inverted link list" }); { ui.Element("a", "Security", new { href = "#", @class = "item" }); ui.Element("a", "Pricing", new { href = "#", @class = "item" }); ui.Element("a", "Integrations", new { href = "#", @class = "item" }); ui.Element("a", "Documentations", new { href = "#", @class = "item" }); } ui.EndDiv(); } ui.EndDiv(); ui.BeginDiv(new { @class = "three wide column" }); { ui.Element("h4", "Corporate", new { @class = "ui inverted header" }); ui.BeginDiv(new { @class = "ui inverted link list" }); { ui.Element("a", "About", new { href = "#", @class = "item" }); ui.Element("a", "Jobs", new { href = "#", @class = "item" }); ui.Element("a", "Blog", new { href = "#", @class = "item" }); ui.Element("a", "Press", new { href = "#", @class = "item" }); ui.Element("a", "Partners", new { href = "#", @class = "item" }); } ui.EndDiv(); } ui.EndDiv(); ui.BeginDiv(new { @class = "three wide column" }); { ui.Element("h4", "Community", new { @class = "ui inverted header" }); ui.BeginDiv(new { @class = "ui inverted link list" }); { ui.Element("a", "Events", new { href = "#", @class = "item" }); ui.Element("a", "Case Studies", new { href = "#", @class = "item" }); } ui.EndDiv(); } ui.EndDiv(); ui.BeginDiv(new { @class = "seven wide column" }); { ui.Element("h4", "Build Info", new { @class = "ui inverted header" }); ui.BeginDiv(new { @class = "text container" }); { ui.Element("p", $"UI Version: {typeof(SplashPage).Assembly.GetName().Version}"); ui.Element("p", $"Platform Version: {typeof(Schema).Assembly.GetName().Version}"); ui.Element("p", $"App Version: {Assembly.GetEntryAssembly().GetName().Version}"); } ui.EndDiv(); } ui.EndDiv(); } ui.EndDiv(); ui.Element("div", attr: new { @class = "ui inverted section divider" }); ui.Element("img", attr: new { src = "assets/images/logo.png", @class = "ui centered mini image" }); ui.BeginDiv(new { @class = "ui horizontal inverted small divided link list" }); { ui.Element("a", "Privacy Policy", new { href = "https://hq.io/privacy", @class = "item" }); ui.Element("a", "Terms & Conditions", new { href = "https://hq.io/toc", @class = "item" }); ui.BeginElement("a", new { href = "https://github.com/hq-io", @class = "item" }); { ui.Literal("Open Source "); ui.Element("i", "", new { @class = "github icon" }); } ui.EndElement("a"); } ui.EndDiv(); } ui.EndDiv(); } ui.EndDiv(); }
public override void Render(Ui ui) { ui.BeginDiv(new { @class = "ui inverted footer segment", style = "margin: 5em 0em 0em; padding: 5em 0em;" }); { ui.BeginDiv(new { @class = "ui center aligned container" }); { ui.BeginDiv(new { @class = "ui stackable inverted divided grid" }); { ui.BeginDiv(new { @class = "three wide column" }); { ui.Element("h4", "Platform", new { @class = "ui inverted header" }); ui.BeginDiv(new { @class = "ui inverted link list" }); { ui.Element("a", "Security", new { href = "#", @class = "item" }); ui.Element("a", "Pricing", new { href = "#", @class = "item" }); ui.Element("a", "Integrations", new { href = "#", @class = "item" }); ui.Element("a", "Documentations", new { href = "#", @class = "item" }); } ui.EndDiv(); } ui.EndDiv(); ui.BeginDiv(new { @class = "three wide column" }); { ui.Element("h4", "Corporate", new { @class = "ui inverted header" }); ui.BeginDiv(new { @class = "ui inverted link list" }); { ui.Element("a", "About", new { href = "#", @class = "item" }); ui.Element("a", "Jobs", new { href = "#", @class = "item" }); ui.Element("a", "Blog", new { href = "#", @class = "item" }); ui.Element("a", "Press", new { href = "#", @class = "item" }); ui.Element("a", "Partners", new { href = "#", @class = "item" }); } ui.EndDiv(); } ui.EndDiv(); ui.BeginDiv(new { @class = "three wide column" }); { ui.Element("h4", "Community", new { @class = "ui inverted header" }); ui.BeginDiv(new { @class = "ui inverted link list" }); { ui.Element("a", "Events", new { href = "#", @class = "item" }); ui.Element("a", "Case Studies", new { href = "#", @class = "item" }); } ui.EndDiv(); } ui.EndDiv(); ui.BeginDiv(new { @class = "seven wide column" }); { ui.Element("h4", "Build Info", new { @class = "ui inverted header" }); ui.BeginDiv(new { @class = "text container" }); { ui.Element("p", $"UI Version: {typeof(Dashboard).Assembly.GetName().Version}"); ui.Element("p", $"Platform Version: {typeof(Constants.Schemas).Assembly.GetName().Version}"); ui.Element("p", $"App Version: {Assembly.GetEntryAssembly().GetName().Version}"); } ui.EndDiv(); } ui.EndDiv(); } ui.EndDiv(); ui.Element("div", new { @class = "ui inverted section divider" }); ui.Element("img", new { src = "assets/images/logo.png", @class = "ui centered mini image" }); ui.BeginDiv(new { @class = "ui horizontal inverted small divided link list" }); { ui.Element("a", "Privacy Policy", new { href = "https://hq.io/privacy", @class = "item" }); ui.Element("a", "Terms & Conditions", new { href = "https://hq.io/toc", @class = "item" }); ui.BeginElement("a", new { href = "https://github.com/hq-io", @class = "item" }); { ui.Literal("Open Source "); ui.Element("i", "", new { @class = "github icon" }); } ui.EndElement("a"); } ui.EndDiv(); } ui.EndDiv(); } ui.EndDiv(); }
public override async void Render(Ui ui) { var accessor = ui.Context.UiServices.GetRequiredService <IHttpContextAccessor>(); var connection = accessor.HttpContext.Features.Get <IHttpConnectionFeature>(); var local = $"{connection?.LocalIpAddress}:{connection?.LocalPort}"; ui.BeginDiv(new { @class = "ui fixed inverted menu" }); { ui.BeginDiv(new { @class = "ui container" }); { ui.BeginElement("a", new { href = "#", @class = "header item" }); { ui.Element("img", "HQ", new { @class = "logo", src = "assets/images/logo.png", style = "margin-right: 1.5em;" }); } ui.EndElement("a"); ui.BeginA("item", id: "sidebar-btn"); ui.I(new { @class = "sidebar icon" }); ui.Literal("Menu"); ui.EndA(); ui.OnReady(@" $('#sidebar-btn').click(function() { $('.ui.sidebar') .sidebar('toggle') .sidebar({ context: $('.ui.basic.section')}); });"); ui.BeginDiv(new { @class = "ui simple dropdown item" }); { ui.Literal("Docs "); ui.Element("i", new { @class = "dropdown icon" }); ui.BeginDiv(new { @class = "menu" }); { ui.Div("Specs", new { @class = "header" }); ui.BeginA("item", href: "/meta/postman").Icon(BusinessIcons.FileOutline) .Literal("Postman 2.1").EndA(); ui.BeginA("item", href: "/meta/swagger").Icon(BusinessIcons.FileOutline) .Literal("Swagger 2.0").EndA(); ui.Div(new { @class = "divider" }); ui.Div("Help Pages", new { @class = "header" }); ui.BeginA("item", href: "/docs/swagger").Icon(BusinessIcons.Book).Literal("Swagger UI") .EndA(); } ui.EndDiv(); } ui.EndDiv(); if (ui.Context.User.Identity.IsAuthenticated) { ui.BeginDiv(new { @class = "right menu" }); { ui.BeginDiv("ui dropdown item"); { ui.Literal("Language "); ui.Element("i", new { @class = "dropdown icon" }); ui.BeginDiv(new { @class = "menu" }); { ui.BeginA("item", href: "#").Icon(BusinessIcons.Globe).Literal("English").EndA(); } ui.EndDiv(); } ui.EndDiv(); ui.BeginDiv("item"); { var id = ui.NextId(); ui.Div("Sign Out", new { @class = "ui primary button", id = id.ToString() }); if (ui.OnClick()) { await accessor.HttpContext.SignOutAsync(); } } ui.EndDiv(); } ui.EndDiv(); } } ui.EndDiv(); } ui.EndDiv(); }
public override void Render(Ui ui, SignInModel model) { ui.Styles(@" body { background-color: #DADADA; } body > .grid { height: 100%; } .image { margin-top: -100px; } .column { max-width: 450px; } #ui-body { margin-top: 300px; } "); ui.BeginDiv("ui middle aligned center aligned grid"); { ui.BeginDiv("column"); { ui.BeginH2("ui violet image header"); { ui.Img(new { src = "assets/images/logo.png", @class = "image" }); } ui.EndH2(); ui.BeginForm("ui large form", method: "POST"); { ui.BeginDiv("ui stacked segment"); { ui.BeginDiv("field"); { switch (model.IdentityType) { case IdentityType.Username: ui.BeginDiv("ui left icon input"); { ui.Icon(InterfaceIcons.User); ui.Input(InputType.Text, new { name = "username", placeholder = "Username" }); } ui.EndDiv(); break; case IdentityType.Email: ui.BeginDiv("ui left icon input"); { ui.Icon(InterfaceIcons.Envelope); ui.Input(InputType.Text, new { name = "email", placeholder = "Email Address" }); } ui.EndDiv(); break; case IdentityType.PhoneNumber: ui.BeginDiv("ui left icon input"); { ui.Icon(FontAwesomeIcons.Phone); ui.Input(InputType.Text, new { name = "phone", placeholder = "Phone Number" }); } ui.EndDiv(); break; default: throw new ArgumentOutOfRangeException(); } } ui.EndDiv(); ui.BeginDiv("field"); { ui.BeginDiv("ui left icon input"); { ui.Icon(FontAwesomeIcons.Lock); ui.Input(InputType.Password, new { name = "password", placeholder = "Password" }); } ui.EndDiv(); } ui.EndDiv(); var id = ui.NextId("signin").ToString(); ui.BeginButton("ui fluid large violet submit button", id: id) .Literal("Sign In") .EndInput(); if (ui.OnClick()) { ui.Invalidate(); } } ui.EndDiv(); ui.Div(new { @class = "ui error message" }); } ui.EndForm(); } ui.EndDiv(); } ui.EndDiv(); }