Membership: UI Rework
Change-Id: I8d1da12fd764972dc810846afd70760bdb450fe8
diff --git a/core/auth/memberships/memberships-tmpl/group.html b/core/auth/memberships/memberships-tmpl/group.html
index 46f833f..4576a92 100644
--- a/core/auth/memberships/memberships-tmpl/group.html
+++ b/core/auth/memberships/memberships-tmpl/group.html
@@ -1,125 +1,133 @@
+{{ define "svgIcon" }}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <g fill="none" fill-rule="evenodd">
+ <path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+ <path fill="currentColor" d="m12 13.414l5.657 5.657a1 1 0 0 0 1.414-1.414L13.414 12l5.657-5.657a1 1 0 0 0-1.414-1.414L12 10.586L6.343 4.929A1 1 0 0 0 4.93 6.343L10.586 12l-5.657 5.657a1 1 0 1 0 1.414 1.414z" />
+ </g>
+</svg>
+{{ end }}
+
{{ define "title" }}
Group - {{ .GroupName }}
{{ end }}
+
{{ define "content" }}
{{- $parentGroupName := .GroupName }}
<div>
- <h2 class="headline">{{ .GroupName }} Group Management</h2>
+ <h2 class="headline">Group: {{ .GroupName }}</h2>
<p class="description">{{ .Description }}</p>
</div>
<hr class="divider">
<form action="/group/{{ .GroupName }}/add-user/" method="post">
- <label>Username:</label>
- <input type="text" id="username" name="username" required>
- <label for="status">Status:</label>
- <select id="status" name="status" required>
- <option value="Member" selected>Member</option>
- <option value="Owner">Owner</option>
- </select>
- <button type="submit">Add Member</button>
+ <fieldset class="grid first">
+ <input type="text" id="username" name="username" placeholder="username" required>
+ <select id="status" name="status" required>
+ <option value="Member" selected>Member</option>
+ <option value="Owner">Owner</option>
+ </select>
+ <button type="submit">Add Member</button>
+ </fieldset>
</form>
- <hr class="divider">
<form action="/group/{{ .GroupName }}/add-child-group" method="post">
- <label for="child-group">Select Child Group:</label>
- <select id="child-group" aria-label="Select" name="child-group" required>
- {{- range .AllGroups }}
- <option value="{{ .Name }}">{{ .Name }}</option>
- {{- end }}
- </select>
- <button type="submit">Create Child Group</button>
+ <fieldset class="grid twoone">
+ <select id="child-group" aria-label="Select" name="child-group" required>
+ {{- range .AllGroups }}
+ <option value="{{ .Name }}">{{ .Name }}</option>
+ {{- end }}
+ </select>
+ <button type="submit">Create Child Group</button>
+ </fieldset>
+ </form>
+ <form action="/group/{{ .GroupName }}/add-owner-group" method="post">
+ <fieldset class="grid twoone">
+ <select id="owner-group" aria-label="Select" name="owner-group" required>
+ {{- range .AllGroups }}
+ <option value="{{ .Name }}">{{ .Name }}</option>
+ {{- end }}
+ </select>
+ <button type="submit">Add Owner Group</button>
+ </fieldset>
</form>
<hr class="divider">
- <form action="/group/{{ .GroupName }}/add-owner-group" method="post">
- <label for="owner-group">Select Owner Group:</label>
- <select id="owner-group" aria-label="Select" name="owner-group" required>
- {{- range .AllGroups }}
- <option value="{{ .Name }}">{{ .Name }}</option>
- {{- end }}
- </select>
- <button type="submit">Add Owner Group</button>
- </form>
- <h4>Owners</h4>
- <table>
- <tr>
- <th>Username</th>
- <th>Action</th>
- </tr>
+ <h3>Owners</h3>
+ <div class="user-remove">
{{- range .Owners }}
- <tr>
- <td><a href="/user/{{ . }}">{{ . }}</a></td>
- <td>
- <form action="/group/{{ $parentGroupName }}/remove-owner/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to revoke user <strong>{{ . }}</strong>'s ownership of the <strong>{{ $parentGroupName }}</strong> group?">
- <button type="submit">Remove</button>
- </form>
- </td>
- </tr>
+ <div>
+ <fieldset role="group">
+ <a class="link-button" href="/user/{{ . }}" role="button">{{ . }}</a>
+ <form action="/group/{{ $parentGroupName }}/remove-owner/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to revoke user <strong>{{ . }}</strong>'s ownership of the <strong>{{ $parentGroupName }}</strong> group?">
+ <button class="remove" type="submit" aria-label="Remove owner">
+ {{ template "svgIcon" }}
+ </button>
+ </form>
+ </fieldset>
+ </div>
{{- end }}
- </table>
- <h4>Members</h4>
- <table>
- <tr>
- <th>Username</th>
- <th>Action</th>
- </tr>
+ </div>
+
+ <hr class="divider">
+
+ <h3>Members</h3>
+ <div class="user-remove">
{{- range .Members }}
- <tr>
- <td><a href="/user/{{ . }}">{{ . }}</a></td>
- <td>
- <form action="/group/{{ $parentGroupName }}/remove-member/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove user <strong>{{ . }}</strong> user from <strong>{{ $parentGroupName }}</strong> group?">
- <button type="submit" class="button">Remove</button>
- </form>
- </td>
- </tr>
+ <div>
+ <fieldset role="group">
+ <a class="link-button" href="/user/{{ . }}" role="button">{{ . }}</a>
+ <form action="/group/{{ $parentGroupName }}/remove-member/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove user <strong>{{ . }}</strong> user from <strong>{{ $parentGroupName }}</strong> group?">
+ <button class="remove" type="submit">
+ {{ template "svgIcon" }}
+ </button>
+ </form>
+ </fieldset>
+ </div>
{{- end }}
- </table>
- <h4>Transitive Groups</h4>
- <table>
- <tr>
- <th>Group Name</th>
- <th>Description</th>
- </tr>
+ </div>
+ <hr class="divider">
+
+ <h3>Transitive Groups</h3>
+ <div class="user-remove">
{{- range .TransitiveGroups }}
- <tr>
- <td><a href="/group/{{ .Name }}">{{ .Name }}</a></td>
- <td>{{ .Description }}</td>
- </tr>
+ <a class="link-button" href="/group/{{ .Name }}" role="button"
+ {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
+ {{ .Name }}
+ </a>
{{- end }}
- </table>
- <h4>Child Groups</h4>
- <table>
- <tr>
- <th>Group Name</th>
- <th>Description</th>
- <th>Action</th>
- </tr>
+ </div>
+ <hr class="divider">
+
+ <h3>Child Groups</h3>
+ <div class="user-remove">
{{- range .ChildGroups }}
- <tr>
- <td><a href="/group/{{ .Name }}">{{ .Name }}</a></td>
- <td>{{ .Description }}</td>
- <td>
+ <div>
+ <fieldset role="group">
+ <a class="link-button" href="/group/{{ .Name }}" role="button"
+ {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
+ {{ .Name }}
+ </a>
<form action="/group/{{ $parentGroupName }}/remove-child-group/{{ .Name }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove group <strong>{{ .Name }}</strong> as a child of the group <strong>{{ $parentGroupName }}</strong>?">
- <button type="submit" class="button">Remove</button>
+ <button class="remove" type="submit">
+ {{ template "svgIcon" }}
+ </button>
</form>
- </td>
- </tr>
+ </fieldset>
+ </div>
{{- end }}
- </table>
- <h4>Owner Groups</h4>
- <table>
- <tr>
- <th>Group Name</th>
- <th>Description</th>
- </tr>
+ </div>
+ <hr class="divider">
+
+ <h3>Owner Groups</h3>
+ <div class="user-remove">
{{- range .OwnerGroups }}
- <tr>
- <td><a href="/group/{{ .Name }}">{{ .Name }}</a></td>
- <td>{{ .Description }}</td>
- </tr>
+ <a class="link-button" href="/group/{{ .Name }}" role="button"
+ {{ if ne .Description "" }} data-tooltip="{{ .Description }}" data-placement="bottom" {{ end }}>
+ {{ .Name }}
+ </a>
{{- end }}
- </table>
+ </div>
+
<dialog id="confirmation" close>
<article>
- <h2>Confirm Your Action</h2>
+ <h3>Attention</h3>
<p id="confirmation-message">Are you sure?</p>
<footer>
<button id="cancel-button" class="secondary cancel-button">Cancel</button>