Skip to content
This repository has been archived by the owner on Oct 28, 2024. It is now read-only.

UI updates to the /Account and /App sections #105

Closed
wants to merge 19 commits into from
Closed

UI updates to the /Account and /App sections #105

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
f615477
add hippo style assets
flynnduism Jun 18, 2021
b9de764
add shared templates (for menus) and styleguide
flynnduism Jun 18, 2021
85a5a5c
adjust asset paths
flynnduism Jun 18, 2021
923642c
update notes
flynnduism Jun 18, 2021
db86be0
remove packages from assets, update gulp build task
flynnduism Jun 21, 2021
e20b964
forcibly remove the lowercase hippo
flynnduism Jun 22, 2021
3c2829e
updated npm version
flynnduism Jun 22, 2021
73ae207
move over files from hippo to hippo
flynnduism Jun 22, 2021
c933185
add NavSidebar partial
flynnduism Jun 22, 2021
41224af
remove filler url from account menu
flynnduism Jun 22, 2021
ec6e757
login form cleanup
flynnduism Jun 22, 2021
fb90175
login form tweaks
flynnduism Jun 22, 2021
e5acaa8
change root from /home to /app
flynnduism Jun 25, 2021
c0356ec
UI updates to /Account and /App sections
flynnduism Jun 25, 2021
cb88993
fix links to dashboard
flynnduism Jun 25, 2021
5735e43
Merge branch 'main' into style-login
flynnduism Jun 25, 2021
b725e82
post rebase fixup
flynnduism Jun 25, 2021
c71c931
remove HomeController
flynnduism Jun 30, 2021
18a315f
add StorageID back to App/New form
flynnduism Jun 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion Hippo/Controllers/HomeController.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Authorization;

namespace Hippo.Controllers
{
[Authorize]
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
return RedirectToAction("Index", "App");
}
}
}
3 changes: 2 additions & 1 deletion Hippo/Startup.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,8 @@ public void Configure(IApplicationBuilder app, IServiceProvider serviceProvider)
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
pattern: "{controller=App}/{action=Index}/{id?}"
);
});

CreateRoles(serviceProvider);
Expand Down
3 changes: 3 additions & 0 deletions Hippo/Views/Account/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@{
ViewData["Title"] = "Account";
}
70 changes: 48 additions & 22 deletions Hippo/Views/Account/Login.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,55 @@
ViewData["Title"] = "Log In";
}

<div class="row">
<div class="col-md-4">
<form asp-action="Login">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserName" class="control-label"></label>
<input asp-for="UserName" class="form-control" />
<span asp-validation-for="UserName" class="text-warning"></span>
<div class="columns is-centered">
<div class="column is-two-thirds-tablet is-one-third-widescreen">
<h2 class="has-text-centered">Log in to <span class="has-text-primary">Hippo</span></h2>

<div class="box box-login">
<div class="card-content">
<form asp-action="Login">
<div class="field">
<label asp-for="UserName" class="label">Username</label>
<div class="control has-icons-left">
<input asp-for="UserName" type="text" class="input is-rounded is-medium is-primary" placeholder="e.g. user123" />
<span class="icon is-left">
<i class="fa fa-user"></i>
</span>
<p asp-validation-for="UserName" class="help is-warning"></p>
</div>
</div>
<div class="field">
<label asp-for="Password" class="label">Password</label>
<div class="control has-icons-left">
<input asp-for="Password" type="password" class="input is-rounded is-medium is-primary" />
<span class="icon is-left">
<i class="fa fa-lock"></i>
</span>
<p asp-validation-for="Password" class="help is-warning"></p>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" value="Login" class="button is-rounded is-primary is-large">Login</button>
<label asp-for="RememberMe" class="checkbox">
<input asp-for="RememberMe" type="checkbox" class="checkbox is-medium" placeholder="topsecret" />
Remember me?
</label>
<span asp-validation-for="RememberMe" class="help is-warning"></span>
</div>
</div>
<div class="field">
<div class="control">
<div asp-validation-summary="ModelOnly" class="help is-alert"></div>
</div>
</div>
</form>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" type="password" class="form-control" />
<span asp-validation-for="Password" class="text-warning"></span>
</div>
<div class="form-group">
<label asp-for="RememberMe" class="control-label">Remember me?</label>
<input asp-for="RememberMe" type="checkbox" class="checkbox-inline" />
<span asp-validation-for="RememberMe" class="text-warning"></span>
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-primary" />
</div>
</form>
</div>

<div class="has-text-centered">
<p class="has-text-centered">Don't have an account yet? <a href="./register">Register</a> here.</p>
</div>
</div>
</div>

Expand Down
90 changes: 63 additions & 27 deletions Hippo/Views/Account/Register.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,70 @@
ViewData["Title"] = "Register";
}

<div class="row">
<div class="col-md-4">
<form asp-action="Register">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserName" class="control-label"></label>
<input asp-for="UserName" class="form-control" />
<span asp-validation-for="UserName" class="text-danger"></span>
<div class="columns is-centered">
<div class="column is-two-thirds-tablet is-one-third-widescreen">
<h2 class="has-text-centered">Register a <span class="has-text-primary">Hippo</span> Account</h2>

<div class="box box-register">
<div class="card-content">
<form asp-action="Login">
<div class="field">
<label asp-for="UserName" class="label">Username</label>
<div class="control has-icons-left">
<input asp-for="UserName" type="text" class="input is-rounded is-medium is-primary" placeholder="e.g. user123" />
<span class="icon is-left">
<i class="fa fa-user"></i>
</span>
<p asp-validation-for="UserName" class="help is-warning"></p>
</div>
</div>
<div class="field">
<label asp-for="Email" class="label">Email</label>
<div class="control has-icons-left">
<input asp-for="Email" type="email" class="input is-rounded is-medium is-primary" />
<span class="icon is-left">
<i class="fa fa-mail"></i>
</span>
<p asp-validation-for="Email" class="help is-warning"></p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love this new validation styling:

image

</div>
</div>
<div class="field">
<label asp-for="Password" class="label">Password</label>
<div class="control has-icons-left">
<input asp-for="Password" type="password" class="input is-rounded is-medium is-primary" />
<span class="icon is-left">
<i class="fa fa-lock"></i>
</span>
<p asp-validation-for="Password" class="help is-warning"></p>
</div>
</div>
<div class="field">
<label asp-for="PasswordConfirm" class="label">Confirm Password</label>
<div class="control has-icons-left">
<input asp-for="PasswordConfirm" type="password" class="input is-rounded is-medium is-primary" />
<span class="icon is-left">
<i class="fa fa-lock"></i>
</span>
<p asp-validation-for="PasswordConfirm" class="help is-warning"></p>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" value="Register" class="button is-rounded is-primary is-large">Register</button>
</div>
</div>
<div class="field">
<div class="control">
<div asp-validation-summary="ModelOnly" class="help is-alert"></div>
</div>
</div>
</form>
</div>
<div class="form-group">
<label asp-for="Email" class="control-label"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="PasswordConfirm" class="control-label"></label>
<input asp-for="PasswordConfirm" class="form-control" />
<span asp-validation-for="PasswordConfirm" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Register" class="btn btn-primary" />
</div>
</form>
</div>

<div class="has-text-centered">
<p class="has-text-centered">Already have an account? <a href="./login">Log in here</a>.
</div>
</div>
</div>

Expand Down
5 changes: 5 additions & 0 deletions Hippo/Views/App/Delete.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
@model Hippo.Models.Application

@{
ViewData["Title"] = "Delete Application";
Layout = "_AppLayout";
}

<div class="container">
<div class="row">
<div class="col">
Expand Down
5 changes: 5 additions & 0 deletions Hippo/Views/App/Details.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
@model Hippo.Models.Application

@{
ViewData["Title"] = @Html.DisplayFor(model => model.Name);
Layout = "_AppLayout";
}

<div class="container">
<div class="row">
<table class="table">
Expand Down
5 changes: 5 additions & 0 deletions Hippo/Views/App/Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
@model Hippo.ViewModels.AppEditForm

@{
ViewData["Title"] = "Edit Application";
Layout = "_AppLayout";
}

<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
Expand Down
71 changes: 55 additions & 16 deletions Hippo/Views/App/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,61 @@
@model IEnumerable<Hippo.Models.Application>

<div class="container">
<div class="row" style="padding-bottom: 20px;">
<a asp-action="New" class="btn btn-primary btn-sm">Create a new Application</a>
</div>
<div class="row">
@foreach (var item in Model) {
<div class="card">
<span class="card-header badge bg-success">Healthy</span>
<div class="card-body">
<h5 class="card-title">@Html.DisplayFor(modelItem => item.Name)</h5>
</div>
<div class="card-body btn-group" role="group" aria-label="actions">
<a asp-action="Edit" asp-route-id="@item.Id" class="card-link btn btn-sml btn-secondary">Edit</a>
<a asp-action="Details" asp-route-id="@item.Id" class="card-link btn btn-sml btn-secondary">Details</a>
<a asp-action="Delete" asp-route-id="@item.Id" class="card-link btn btn-sml btn-danger">Delete</a>
@{
ViewData["Title"] = "Your Apps";
Layout = "_Layout";
}

<div class="columns is-multiline is-mobile app-listing">
@foreach (var item in Model) {
<div class="column is-half-desktop is-third-widescnreen">
<div class="box app-box">
<a asp-action="Details" asp-route-id="@item.Id" class="app-link">
<h3>@Html.DisplayFor(modelItem => item.Name) <span class="fa fa-chevron-right"></span></h3>
<h4>WASM Application</h4>

<section class="app-state is-success has-background-success">
<span class="icon-text has-text-white">
<span class="icon">
<i class="fa fa-check"></i>
</span>
<span>Healthy</span>
</span>
</section>
</a>

<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Options</span>
<span class="icon is-small">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a asp-action="Details" asp-route-id="@item.Id" class="dropdown-item">
View
</a>
<a asp-action="Edit" asp-route-id="@item.Id" class="dropdown-item">
Edit
</a>
<hr class="dropdown-divider">
<a asp-action="Delete" asp-route-id="@item.Id" class="dropdown-item has-text-danger">
Delete
</a>
</div>
</div>
</div>
</div>
}
</div>
}

<div class="column is-half-desktop is-third-widescnreen">
<div class="box has-text-centered">
<section class="app-add">
<a asp-action="New" class="button is-rounded is-outlined is-link">Create a new Application</a>
</section>
</div>
</div>
</div>
68 changes: 45 additions & 23 deletions Hippo/Views/App/New.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,45 @@
@model Hippo.ViewModels.AppNewForm

<form asp-action="New">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="StorageId" class="control-label"></label>
<input asp-for="StorageId" class="form-control" />
<span asp-validation-for="StorageId" class="text-danger"></span>
</div>
<div class="form-group btn-group">
<input type="submit" value="Create" class="btn btn-primary" />
<a asp-action="Index" class="btn btn-secondary">Cancel</a>
</div>
</form>

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
@model Hippo.ViewModels.AppNewForm

@{
ViewData["Title"] = "New Application";
Layout = "_Layout";
}

<div class="columns is-centered">
<div class="column is-two-thirds-desktop is-half-widescreen">

<div class="box">
<h2>Create a New Application</h2>

<div asp-validation-summary="ModelOnly" class="is-danger"></div>
<form asp-action="New">
<div class="field is-horizontal has-background-light">
<div class="field-label is-normal">
<label asp-for="Name" class="label">Name</label>
</div>
<div class="field-body is-normal">
<div class="control">
<input asp-for="Name" type="text" class="input" placeholder="e.g. helloworld" />
<p asp-validation-for="UserName" class="help is-warning"></p>
</div>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" value="Create" class="button is-success is-rounded">Create Application</button>
<a asp-action="Index" class="button is-danger is-outlined is-rounded">Cancel</a>
</div>
</div>
<div class="field">
<div class="control">
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
</form>
</div>
</div>
</div>

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
5 changes: 5 additions & 0 deletions Hippo/Views/App/RegisterRevision.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
@model Hippo.ViewModels.AppRegisterRevisionForm

@{
ViewData["Title"] = "Revision";
Layout = "_AppLayout";
}

<h2>Register a revision for an application</h2>

<form asp-action="RegisterRevision">
Expand Down
Loading