Skip to content
This repository was archived by the owner on Jul 12, 2023. It is now read-only.

Clarify backup code vs short code #1217

Merged
merged 1 commit into from
Dec 1, 2020
Merged

Clarify backup code vs short code #1217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
114 changes: 83 additions & 31 deletions cmd/server/assets/codes/issue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
{{template "head" .}}

<style>
#code {
.d-code {
flex-shrink: 10;
font-size: 1.5em;
line-height: 2.3em;
max-width: 480px;
}

#code span {
.d-code span {
flex: 1;
margin: 0 0.1em;
}
Expand Down Expand Up @@ -139,7 +139,7 @@ <h1>{{t $.locale "header.create-verification-code"}}</h1>
<label for="symptomDate" class="col-sm-3">Patient phone</label>
<div class="col-sm-9">
<div class="input-group">
<input type="tel" id="phone" name="phone" class="form-control" placeholder="+1 (555) 555-5555" autocomplete="off" />
<input type="tel" id="phone" name="phone" class="form-control" placeholder="+1 (555) 555-5555" autocomplete="off" class="w-100" />
</div>
<small class="form-text text-muted">
If provided, the system will send text containing the code to the
Expand All @@ -166,25 +166,49 @@ <h1>{{t $.locale "header.create-verification-code"}}</h1>
<span id="long-code-expires-at" class="sm float-right text-danger"></span>
</div>
<div class="card-body">
<p class="mb-0">
<span class="oi oi-circle-check text-success pr-1" aria-hidden="true"></span>
Successfully sent SMS to <strong id="long-code-phone"></strong>.
</p>
<div class="d-flex">
<span class="oi oi-circle-check text-success mr-2 mt-1" aria-hidden="true"></span>
<span>
Successfully sent SMS to <strong id="long-code-phone"></strong>.
Instruct the patient to check their text messages on their mobile
phone where Exposure Notifications is enabled.
</span>
</div>
</div>
</div>

<div id="backup-code-confirm" class="card d-none mb-3 shadow-sm">
<div class="card-header">
Backup short code
<span id="backup-code-expires-at" class="sm float-right text-danger"></span>
</div>
<div class="card-body">
<div class="d-flex">
<span class="oi oi-warning text-warning mr-2 mt-1" aria-hidden="true"></span>
<span>
Share this code with the patient if they did <strong>not</strong>
receive the SMS text message on their mobile phone.
</span>
</div>

<div id="backup-code" class="d-code text-center user-select-none text-monospace font-weight-normal d-flex flex-row align-content-center justify-content-around flex-nowrap mx-auto mt-3 mb-2"></div>
</div>
</div>

<div id="code-confirm" class="card d-none mb-3 shadow-sm">
<div id="short-code-confirm" class="card d-none mb-3 shadow-sm">
<div class="card-header">
Generated short code
<span id="code-expires-at" class="sm float-right text-danger"></span>
<span id="short-code-expires-at" class="sm float-right text-danger"></span>
</div>
<div class="card-body">
<p>
<span class="oi oi-warning text-warning pr-1" aria-hidden="true"></span>
Share this code with the patient.
</p>
<div class="d-flex">
<span class="oi oi-circle-check text-success mr-2 mt-1" aria-hidden="true"></span>
<span>
Share this code with the patient immediately.
</span>
</div>

<div id="code" class="text-center user-select-none text-monospace font-weight-normal d-flex flex-row align-content-center justify-content-around flex-nowrap mx-auto mb-3"></div>
<div id="short-code" class="d-code text-center user-select-none text-monospace font-weight-normal d-flex flex-row align-content-center justify-content-around flex-nowrap mx-auto mt-3 mb-2"></div>
</div>
</div>

Expand Down Expand Up @@ -231,9 +255,9 @@ <h1>{{t $.locale "header.create-verification-code"}}</h1>
let $longCodeConfirm;
let $longCodeExpiresAt;
let $longCodePhone;
let $codeConfirm;
let $codeExpiresAt;
let $code;
let $shortCodeConfirm;
let $shortCodeExpiresAt;
let $shortCode;
let $uuidConfirm;
let $uuid;

Expand All @@ -253,9 +277,12 @@ <h1>{{t $.locale "header.create-verification-code"}}</h1>
$longCodeConfirm = $('#long-code-confirm');
$longCodeExpiresAt = $('#long-code-expires-at');
$longCodePhone = $('#long-code-phone');
$codeConfirm = $('#code-confirm');
$codeExpiresAt = $('#code-expires-at');
$code = $('#code');
$backupCodeConfirm = $('#backup-code-confirm');
$backupCodeExpiresAt = $('#backup-code-expires-at');
$backupCode = $('#backup-code');
$shortCodeConfirm = $('#short-code-confirm');
$shortCodeExpiresAt = $('#short-code-expires-at');
$shortCode = $('#short-code');
$uuidConfirm = $('#uuid-confirm');
$uuid = $('#uuid');

Expand Down Expand Up @@ -316,17 +343,22 @@ <h1>{{t $.locale "header.create-verification-code"}}</h1>

// Long
$longCodeConfirm.addClass('d-none');
$longCodeExpiresAt.html('');
$longCodePhone.html('');
$longCodeExpiresAt.empty();
$longCodePhone.empty();

// Backup
$backupCodeConfirm.addClass('d-none');
$backupCodeExpiresAt.empty();
$backupCode.empty();

// Short
$codeConfirm.addClass('d-none');
$codeExpiresAt.html('');
$code.html('');
$shortCodeConfirm.addClass('d-none');
$shortCodeExpiresAt.empty();
$shortCode.empty();

// UUID
$uuidConfirm.addClass('d-none');
$uuid.html('');
$uuid.empty();

// Buttons
$buttonSubmit.prop('disabled', false);
Expand Down Expand Up @@ -365,31 +397,51 @@ <h1>{{t $.locale "header.create-verification-code"}}</h1>
// Show reset button
$buttonReset.removeClass('d-none');

let $targetCodeConfirm;
let $targetCodeExpiresAt;
let $targetCode;

// If a phone was provided...
if ($longCodePhone && $longCodePhone.length && $inputPhone && $inputPhone.length && $inputPhone.val().length) {
// Start countdown
longCodeCountdown = countdown($longCodeExpiresAt, result.longExpiresAtTimestamp);

// Update HTML
$longCodePhone.html($inputPhone.val());
$longCodePhone.text($inputPhone.val());

// Show long code
$longCodeConfirm.removeClass('d-none');

// Set targets to backup
$targetCodeConfirm = $backupCodeConfirm;
$targetCodeExpiresAt = $backupCodeExpiresAt;
$targetCode = $backupCode;
} else {
// Set targets to short
$targetCodeConfirm = $shortCodeConfirm;
$targetCodeExpiresAt = $shortCodeExpiresAt;
$targetCode = $shortCode;
}

// Build the code - this is a collection of HTML spans
{
// Start countdown
codeCountdown = countdown($codeExpiresAt, result.expiresAtTimestamp);
codeCountdown = countdown($targetCodeExpiresAt, result.expiresAtTimestamp);

// Update HTML
let code = result.code;
for(let i = 0; i < code.length; i++) {
let $span = $('<span class="border rounded ml-1 py-2 bg-light">').text(code.charAt(i));
$code.append($span);
let $span = $('<span>').text(code.charAt(i));
$span.addClass('border');
$span.addClass('rounded');
$span.addClass('ml-1');
$span.addClass('py-2');
$span.addClass('bg-light');
$span.text(code.charAt(i));
$targetCode.append($span);
}

$codeConfirm.removeClass('d-none');
$targetCodeConfirm.removeClass('d-none');
}

// UUID section
Expand Down
5 changes: 5 additions & 0 deletions cmd/server/assets/static/css/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,3 +148,8 @@ main.container[role="main"] {
.table-inner-border-only {
border-style: hidden;
}

/* International phone picker */
.iti {
width: 100%;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just for you @whaught

}
4 changes: 2 additions & 2 deletions pkg/controller/codes/issue_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,10 @@ func TestHandleIssue_IssueCode(t *testing.T) {

// Click the issue button.
chromedp.Click(`#submit`, chromedp.ByQuery),
chromedp.WaitVisible(`#code`, chromedp.ByQuery),
chromedp.WaitVisible(`#short-code`, chromedp.ByQuery),

// Get the code.
chromedp.TextContent(`#code`, &code, chromedp.ByQuery),
chromedp.TextContent(`#short-code`, &code, chromedp.ByQuery),
); err != nil {
t.Fatal(err)
}
Expand Down