Merge pull request #612 from mozilla/password-nits

Password UI nits
This commit is contained in:
Danny Coates 2017-10-30 12:59:29 -07:00 committed by GitHub
commit 6a008bf312
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 74 additions and 16 deletions

View File

@ -6,7 +6,7 @@ module.exports = function(state, emit) {
fileInfo.password === null fileInfo.password === null
? html` ? html`
<label class="red" <label class="red"
for="unlock-input">${state.translate('incorrectPassword')}</label>` for="unlock-input">${state.translate('passwordTryAgain')}</label>`
: html` : html`
<label for="unlock-input"> <label for="unlock-input">
${state.translate('unlockInputLabel')} ${state.translate('unlockInputLabel')}
@ -16,6 +16,7 @@ module.exports = function(state, emit) {
${label} ${label}
<form id="unlock" onsubmit=${checkPassword}> <form id="unlock" onsubmit=${checkPassword}>
<input id="unlock-input" <input id="unlock-input"
maxlength="64"
autocomplete="off" autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}" placeholder="${state.translate('unlockInputPlaceholder')}"
type="password"/> type="password"/>

View File

@ -9,10 +9,11 @@ module.exports = function(state, emit) {
if (!file) { if (!file) {
return notFound(state, emit); return notFound(state, emit);
} }
const passwordComplete = html`
<div class="selectPassword"> file.password = file.password || '';
Password: ${file.password} const passwordComplete = html`<div class="selectPassword"></div>`;
</div>`; passwordComplete.innerHTML = file.password.replace(/ /g, '&nbsp;');
const passwordSection = file.password const passwordSection = file.password
? passwordComplete ? passwordComplete
: uploadPassword(state, emit); : uploadPassword(state, emit);

View File

@ -4,14 +4,14 @@ module.exports = function(state, emit) {
const file = state.storage.getFileById(state.params.id); const file = state.storage.getFileById(state.params.id);
const div = html` const div = html`
<div class="selectPassword"> <div class="selectPassword">
<div> <div id="addPasswordWrapper">
<input id="addPassword" type="checkbox" onchange=${togglePasswordInput}/> <input id="addPassword" type="checkbox" onchange=${togglePasswordInput}/>
<label for="addPassword">${state.translate( <label for="addPassword">
'requirePasswordCheckbox' ${state.translate('requirePasswordCheckbox')}</label>
)}</label>
</div> </div>
<form class="setPassword hidden" onsubmit=${setPassword}> <form class="setPassword hidden" onsubmit=${setPassword}>
<input id="unlock-input" <input id="unlock-input"
maxlength="64"
autocomplete="off" autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}"/> placeholder="${state.translate('unlockInputPlaceholder')}"/>
<input type="submit" <input type="submit"

1
assets/check-16-blue.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#0A84FF " d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/></svg>

After

Width:  |  Height:  |  Size: 238 B

View File

@ -142,6 +142,7 @@ select,
textarea, textarea,
button { button {
font-family: inherit; font-family: inherit;
margin: 0;
} }
a { a {
@ -595,7 +596,6 @@ tbody {
color: white; color: white;
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 15px;
height: 60px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
white-space: nowrap; white-space: nowrap;
@ -653,6 +653,8 @@ tbody {
.selectPassword { .selectPassword {
padding: 10px 0; padding: 10px 0;
align-self: left; align-self: left;
max-width: 100%;
overflow-wrap: break-word;
} }
.setPassword { .setPassword {
@ -830,7 +832,6 @@ tbody {
color: white; color: white;
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 15px;
height: 50px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
white-space: nowrap; white-space: nowrap;
@ -904,6 +905,42 @@ tbody {
margin-bottom: -5px; margin-bottom: -5px;
} }
#addPasswordWrapper {
min-height: 24px;
}
#addPassword {
position: absolute;
visibility: collapse;
}
#addPasswordWrapper label {
line-height: 20px;
cursor: pointer;
position: relative;
opacity: 0.6;
}
#addPassword:checked + label {
opacity: 1;
}
#addPasswordWrapper label::before {
content: '';
height: 20px;
width: 20px;
margin-right: 10px;
margin-left: 5px;
float: left;
border: 1px solid rgba(12, 12, 13, 0.3);
border-radius: 2px;
}
#addPassword:checked + label::before {
background-image: url('./check-16-blue.svg');
background-position: 2px 1px;
}
@media (max-device-width: 992px), (max-width: 992px) { @media (max-device-width: 992px), (max-width: 992px) {
.popup .popuptext { .popup .popuptext {
left: auto; left: auto;
@ -974,22 +1011,40 @@ tbody {
padding: 5px 5px 5px 20px; padding: 5px 5px 5px 20px;
} }
#copy { #copy,
.setPassword,
#unlock {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
padding-left: 0;
} }
#link { .selectPassword {
align-self: center;
min-width: 95%;
}
#addPasswordWrapper label::before {
margin-left: 0;
}
#link,
#unlock-input {
font-size: 22px; font-size: 22px;
padding: 15px 10px; padding: 15px 10px;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} }
#copy-btn { #copy-btn,
#unlock-btn {
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
flex: 0 1 65px; flex: 0 1 65px;
} }
#copy-text {
text-align: center;
}
th { th {
font-size: 14px; font-size: 14px;
padding: 0 5px; padding: 0 5px;

View File

@ -85,5 +85,5 @@ footerLinkPrivacy = Privacy
footerLinkTerms = Terms footerLinkTerms = Terms
footerLinkCookies = Cookies footerLinkCookies = Cookies
requirePasswordCheckbox = Require a password to download this file requirePasswordCheckbox = Require a password to download this file
addPasswordButton = Add Password addPasswordButton = Add password
incorrectPassword = Incorrect password. Try again? passwordTryAgain = Incorrect password. Try again.