Esempio n. 1
0
        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>();
        }
Esempio n. 2
0
        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();
            }
        }
Esempio n. 3
0
        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);
                }
            }
        }
Esempio n. 4
0
File: Admin.cs Progetto: qiqi545/HQ
        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>();
        }
Esempio n. 5
0
        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();
        }
Esempio n. 6
0
File: Table.cs Progetto: qiqi545/HQ
        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);
        }
Esempio n. 7
0
 public override void Content(Ui ui)
 {
     ui.BeginDiv(new { @class = "ui main text container", style = "margin-top: 7em;" });
     {
         ui.Component <LogStreamViewer>();
     }
     ui.EndDiv();
 }
Esempio n. 8
0
        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();
            }
        }
Esempio n. 9
0
        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();
        }
Esempio n. 10
0
File: Table.cs Progetto: qiqi545/HQ
        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();
        }
Esempio n. 11
0
        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();
        }
Esempio n. 12
0
        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();
        }
Esempio n. 13
0
        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();
        }
Esempio n. 14
0
File: TopBar.cs Progetto: qiqi545/HQ
        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();
        }
Esempio n. 15
0
        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();
        }