Skip to content

Commit

Permalink
Merge #284
Browse files Browse the repository at this point in the history 
284: Add improved UI for invites r=aragilar a=aragilar

This should make the invite flow more obvious.

Co-authored-by: James Tocknell <aragilar@gmail.com>
  • Loading branch information
@bors @aragilar
bors[bot] and aragilar authored Dec 1, 2022
2 parents 74a67c7 + 94b573d commit 657217b
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 40 deletions.
7 changes: 4 additions & 3 deletions views/home.handlebars
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,11 @@
<li>{{ this }}</li>
{{/each}}
</ul>
<div class="alert alert-info" role="alert">
<i class="bi bi-info-circle"></i>&nbsp;&nbsp; If you can't see a role here you expect, try <a href="">signing out</a> and back in again.
</div>
<div class="card-body">
<a href="/invite/" class="card-link">Invite users to roles</a>
<a href="/my-invites/" class="card-link">Check my invites</a>
<a class="card-link" href="/invite/" class="card-link">Invite users to roles</a>
<a class="card-link" href="/my-invites/" class="card-link">Check my invites</a>
</div>
</div>
</div>
Expand Down
60 changes: 46 additions & 14 deletions views/invite.handlebars
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,46 @@
<h1>Invite User to Role in Project</h1>
<p>Note that only admins of teams and the system admin can add users to
roles.</p>
<p>
<form method="post">
<label for="email">Email to invite</label>
<input name="email" type="email" required />
<label for="project_id">Project to invite user to</label>
<input name="project_id" type="text" required />
<label for="role">Project role for invited user</label>
<input name="role" type="text" required />
<input type=submit>
</form>
</p>
<div class="form-signin w-100 m-auto text-center">
<h3 class="h3 mb-3 fw-normal" style="margin-top:50px">Invite Users to Notebooks </h3>
<div class="btn-group mt-2 mb-4" role="group">
<button class="w-100 btn btn-outline-primary" type="submit">Go Back to User Account<i class="bi bi-arrow-return-left"></i></button>
</div>
</div>
<div class="container">
<div class="row gx-3 gy-3">
<div class="col-md-3 col-sm-12"></div>
<div class="col-md-6 col-sm-12">
<div class="card">
<div class="card-header">
Invite Users
</div>
<div class="card-body">
If you wish to invite users to specific roles in a notebook, fill in the form below. Note that only admins of teams and the system admin can add users to roles.
<div class="alert alert-warning mt-3" role="alert">
<i class="bi bi-info-circle"></i>&nbsp;&nbsp; Users will need internet access to sign in and accept invites.
</div>

<form class="mb-1 mt-2">
<div class="mb-3">
<label for="userEmail">Email address</label>
<input type="email" class="form-control" id="userEmail" aria-describedby="emailHelp" placeholder="user@team.com">
<div id="emailHelp" class="form-text">Add the email address of the user you wish to invite.</div>
</div>
<div class="mb-3">
<label for="notebook">Notebook</label>
<input type="text" class="form-control" id="notebook" placeholder="my_notebook">
<div id="notebookHelp" class="form-text text-muted">Notebooks names must be formatted as lowercase with underscores, i.e., CSIRO-geochemistry should be entered as <code>csiro_geochemistry</code></div>
</div>
<div class="mb-3">
<label for="role">Role</label>
<input type="text" class="form-control" id="role" placeholder="e.g., admin">
<div id="roleHelp" class="form-text text-muted">Add a single role here. Roles include: admin (user can see all records) and team (user can only see their own records). Check the notebook builder for all available roles and associated permissions set up for your notebook.</div>
</div>

<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn" style="float:right">Reset</button>
</form>

</div>
</div>
</div>
</div>
</div>
70 changes: 47 additions & 23 deletions views/my-invites.handlebars
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,47 @@
<h6>Here are your invites:</h6>
<table>
<thead>
<tr>
<th>Inviter</th>
<th>Project</th>
<th>Role</th>
<th>Accept</th>
<th>Reject</th>
</tr>
</thead>
<tbody>
{{#each invites}}
<tr>
<td>{{ this.requesting_user }}</td>
<td>{{ this.project_id }}</td>
<td>{{ this.role }}</td>
<td><a href="/accept-invite/{{ this._id }}" class="btn">Accept invite</a></td>
<td><a href="/reject-invite/{{ this._id }}" class="btn">Reject invite</a></td>
</tr>
{{/each}}
</tbody>
</table>
<div class="form-signin w-100 m-auto text-center">
<h3 class="h3 mb-3 fw-normal" style="margin-top:50px">Manage Invites </h3>
<div class="btn-group mt-2 mb-4" role="group">
<button class="w-100 btn btn-outline-primary" type="submit">Go Back to User Account<i class="bi bi-arrow-return-left"></i></button>
</div>
</div>
<div class="container">
<div class="row gx-3 gy-3">
<div class="col-md-3 col-sm-12"></div>
<div class="col-md-6 col-sm-12">
<div class="card">
<div class="card-header">
My Invites
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Inviter</th>
<th scope="col">Notebook Role</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>test.user</td>
<td>moderator</td>
<td>
<div class="btn-group w-100" role="group" aria-label="Basic example">
<button class="w-100 btn btn-outline-success" type="submit">Accept</button>
<button class="w-100 btn btn-outline-danger" type="submit">Reject</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-warning" role="alert">
<i class="bi bi-info-circle"></i>&nbsp;&nbsp; You will need internet access to sign in and accept invites.
</div>
<div class="alert alert-success" role="alert">
<i class="bi bi-check-circle"></i>&nbsp;&nbsp; You're all set! <a href="">Return to App <i class="bi bi-arrow-return-left"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>

0 comments on commit 657217b

Please sign in to comment.