This commit adds a new page, which appears after a user enters the name for
their new service. It shows how the service name will appear in emails and
text messages.
This means that the new service is not created until after they have confirmed
that the name is appropriate in context.
This has also involved:
- visual changes to the ‘email template’ pattern, which wasn’t very refined
before
- removing a bunch of words from the enter service name page, because most users
don’t read them, and we reckon that showing a preview is a better way of
getting them to understand what is meant by service name
Still to do:
- validating the the generated email address for a service is unique (on the
API) side
- having the API return the generated email address, rather than determining it
in the admin app
This commit adds a shortcut, which (in the background) does the creation and
uploading of a CSV file for you.
This enables users to send themselves a test message without having to fiddle
about with CSV files.
This commit extends the existing function to validate each row’s phone number
to also validate that all the required data is present.
It does this using the checking that the `Template` class can do when given
a template and a `dict` of values.
This commit adds a first stab at checking whether a CSV file has the right
data to fill the placeholders.
The UI is very much first bash, but I’d like to get this merged and see how it
feels. The main thing is that we’ve got all the bit in place now to do this
logic.
> Tabular numbers have numerals of a standard fixed width. As all numbers have
> the same width, sets of numbers may be more easily compared. We recommend
> using them where different numbers are likely to be compared, or where
> different numbers should line up with each other, eg in tables.
The big number pattern is good candidate for tabluar numbers, especially if
we ever have these numbers update dynamically (in that case tabular numbers
won’t jump around like lining ones would).
This involves:
- removing the hard coded width on any textbox that does placeholder
highlighting
- adding JS to make sure that the extra layers on top of the textbox inherit
the width of the textbox that the user types in (so the layers don’t get
misaligned)
Keeping the textboxes at 2/3 width for consistency with how wide the messages
are on the ‘manage templates’ page.
This commit brings back the ‘link under the green button’ bit of the page footer
component.
Previous it had been changed to be a grey button. But there are use cases for
both, maybe even simultaneously.
This doesn’t need to be a form—it’s not changing any data.
And having the primary action on the page as ‘Use this template’ it makes it
clear what the page is for.
Based on discussion with Pete.
Make the blue banner an ‘important’ banner (copied from Register to Vote, used
because it’s not as boxy and fits on the page better).
Remove the back button because you haven’t changed any data yet. If you need to
go back you can just press back or start again.
Make the filename stand out more.
Remove the ‘download example’ link. Will need to revist the best way of doing
this.
Make text messages consistently 2/3rd width.
This commit:
- adds the template to the jobs page (and puts it at the top of the send SMS
page) so that it consistently appears in the same place throughout the
journey
- put the real data about a job on the jobs page and on the dashboard
The first 3/last 3 messages didn’t test well, it wasn’t immediately obvious what
was going on.
This commit replaces it with just a preview of the first message, and a table
showing the details of the subsequent messages.
We can ignore any mention of trial/test/mode if we just talk about ‘not live’.
It also feels sensible to link through to the page where you can make that
change, rather than dig through the navigation.
The grouping on this page was weird because these links were two far away from
the associated textbox, and too close to the next textbox.
This commit adds them as parameters to the textbox macro, which means their
relative spacing can be controlled exactly, and thus reduced.
- remove black border from banner
- make banners have internal columns
- make nav 2/3rd width, 19px text and more spaced out
- only show the ‘restricted mode’ banner where it’s needed
- rename ‘restricted mode’ to ‘trial mode’
Banners should always be the first thing on the page.
Because headers already have padding we don’t want to put padding on the
container.
So banners should also have top padding to distance then from the red bar.
They should also sit in the 3/4 column if the page has side navigation. This
commit adds a new template (`withoutnav_template.html`) which extends
`admin_template.html`. All views then extend one or the other, never the
`admin_template.html` directly. This means that `admin_template.html` doesn’t
have to make decisions about where the flash messages are displayed.
This commit moves user-related navigation into the proposition header (the black
bar) at the top of the site. It adds some custom SASS to override GOV.UK
template and align these navigation items to the right (because it looks
better).
It then removes the service chooser dropdown (and its associated SASS and JS) in
favour of a link alongside the user-related navigation items. ‘Switch service’
is the best language for this that we’ve come up with so far.
This means that the only way of adding a new service is from the `/services`
page. So this commit removes the redirect if you land on this page with only one
service (else it would prevent you from ever being able to add more).
For the hack day, we should only let developers use the platform in restricted
mode. This commit adds a banner telling them this.
Can’t get the app running locally, so fingers crossed it actually looks how
I imagine it’s going to look…
Copying what they’ve done on GOV.UK Pay, we should let users:
- generate as many keys as they want
- only see the key at time of creation
- give keys a name
- revoke any key at any time (this should be a one way operation)
And based on discussions with @minglis and @servingUpAces, the keys should be
used in conjunction with some kind of service ID, which gets encrypted with the
key. In other words the secret itself never gets sent over the wire.
This commit adds the UI (but not the underlying API integration) for doing the
above.
A previous commit removed these to differentiate between this page and the
manage templates page. It turns out that we do want previews on this page
because:
- the users for the two pages might be different—they might only be allowed to
do one or the other depending what permissions they have
- it’s useful to see what the placeholders in the message are before uploading
a CSV, to make sure the CSV has the correct column headings
This commit re-adds the message preview with a simpler UI. Discussed with
@antimega and we both agreed that the speech bubble tails on the messages should
go.
From the:
- dashboard
- activity page
This info will be confusing for users at the hack day, because it will say
they’ve already sent messages when they first sign up.
This involved changing the table macro to have a nice ‘no rows’ message.
The previous service switcher was built purely in Javascript, which meant that,
for the purposes of progressive enhancement, it had to load in the open state.
Setting it to the closed state with Javascript happened a fraction of a second
after page load. This caused an unpleasant flicker as the whole page shifted up
and down as it loaded.
This commit changes the switcher to use the native HTML5 `details` and
`summary` elements[1].
This commit adds a polyfill from GOV.UK Elements for browsers which don’t
support `details`/`summary`.
1. http://html5doctor.com/the-details-and-summary-elements/
This commit adds a component for showing an API key. Usage:
```jinja
{{ from 'components/api-key.html' import api_key }}
{{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }}
```
Depending on the user’s browser, it works in three different ways.
No Javascript
---
The API key is shown on the page.
Older browsers with Javascript
---
The API key is hidden, and users can click a button to reveal it.
Newer browsers that support copying to clipboard without Flash
---
As above, but when the key is shown there is a button which copies it to the
clipboard. This is acheived by using
[this polyfill](https://www.npmjs.com/package/query-command-supported)
to reliably detect browser support for the ‘copy’ command.
The styling of the component is a bit different to the initial sketch. I think
a grey button works better than green. Green feels like it’s going to take you
somewhere else.
This is a link not a button because:
- it’s less prominent—delete is an infrequent action
- it’s a two-step process, and only the second part changes any data (so it has
a button)
If the templates page contains text messages and emails then there’s two ways it
could be structured:
- into two sections, all text messages first, then all emails
- emails and text messages interleaved, sorted by date
I think the second one is better. Imagine a situation where you mostly do emails
but have a few text messages. You’d have to scroll past the text messages to get
to your emails. Every time.
I reckon that the most commonly accessed templates will be the most recent ones.
- by default, the menu is open
- if Javascript is enabled/loaded, the links are hidden, and visual cues (▶) to
show that it can be opened are added
- clicking it opens and closes it
Message status was almost identical to banner, visually and semantically.
This consolidates the two into one component.
This means adding an extra parameter which controls whether or not the banner
has a tick (with and without a tick are the only two variations currently).
Submit form was
- a confusing name in itself
- not descriptive, because it also has an optional ‘back’ link
This commit also puts this component in as many pages as possible, stripping
out any hard-coded buttons and links.
It replaces any usage of buttons for ‘back’, because these are links, not
buttons (ie they don’t change any data).
For pages where
- we want you to be sure that you want to do what you’re about to do
- we want to be sure it’s you trying to do the thing
This adds a page that asks the user to confirm their password.
Adds the pages and wires them together, so that it’s possible to click
through them.
The wording is not quite English, but attempts to be an rough description of
what the consequences are for each of the four actions.
