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();
}
