Issue #58 - Properly support generated2 password type in the UI and w…

…arn for old PBKDF2-based passwords

data/allpasswords/allpasswords.html

@@ -50,7 +50,8 @@
           <a href="#" class="password-remove-link" data-l10n-id="remove-password"></a>
         </div>
         <div class="password-info generated">
-          <div class="password-type" data-l10n-id="password-type-generated"></div>
+          <div class="password-type generated" data-l10n-id="password-type-generated" hidden></div>
+          <div class="password-type generated2" data-l10n-id="password-type-generated2" hidden></div>
           <div class="password-length">
             <span data-l10n-id="password-length"></span>
             <span class="password-length-value"></span>

data/allpasswords/main.js

@@ -215,9 +215,10 @@ port.on("init", function(sites)
       setCommandHandler(passwordInfo.querySelector(".to-clipboard-link"), copyToClipboard.bind(null, site, passwordData, passwordInfo));
       setCommandHandler(passwordInfo.querySelector(".password-remove-link"), removePassword.bind(null, site, passwordData, passwordInfo));
 
-      if (passwordData.type == "generated")
+      if (passwordData.type == "generated2" || passwordData.type == "generated")
       {
         passwordInfo.querySelector(".password-info.legacy").hidden = true;
+        passwordInfo.querySelector(".password-type." + passwordData.type).hidden = false;
         passwordInfo.querySelector(".password-length-value").textContent = passwordData.length;
 
         let chars = [];

data/panel/panel.html

@@ -26,6 +26,7 @@
       <div data-l10n-id="no-characters-selected"></div>
       <div data-l10n-id="password-value-required"></div>
       <div data-l10n-id="password-type-generated"></div>
+      <div data-l10n-id="password-type-generated2"></div>
       <div data-l10n-id="password-type-legacy"></div>
       <div data-l10n-id="password-notes-stored"></div>
       <div data-l10n-id="remove-password-confirmation"></div>
@@ -153,7 +154,7 @@
       </div>
     </form>
 
-    <form id="generate-password" class="slide" data-default-element="generate-password-user-name" data-custom-reset="change-password-revision.hidden,password-revision-container.hidden=true">
+    <form id="generate-password" class="slide" data-default-element="generate-password-user-name" data-custom-reset="change-password-revision.hidden,password-revision-container.hidden=true,generate-legacy-warning.hidden=true">
       <label data-l10n-id="site"></label>
       <div id="generate-password-site"></div>
       <label class="block-start" for="generate-password-user-name" data-l10n-id="user-name"></label>

data/panel/panel.scss

@@ -310,6 +310,16 @@ a:hover
   background-repeat: no-repeat;
 }
 
+.user-name-container.legacy-warning
+{
+  min-width: $icon-size;
+  min-height: $icon-size;
+  background-size: $icon-size;
+  background-repeat: no-repeat;
+  background-position: right;
+  background-image: url("../images/android-warning.svg");
+}
+
 .password-menu-link
 {
   background-image: url("../images/android-menu.svg");

data/panel/passwordList.js

@@ -209,9 +209,9 @@ function showPasswords()
     for (let password of pwdList)
     {
       let tooltip;
-      if (password.type == "generated")
+      if (password.type == "generated2" || password.type == "generated")
       {
-        tooltip = messages["password-type-generated"];
+        tooltip = messages["password-type-" + password.type];
 
         tooltip += "\n" + document.querySelector('label[for="password-length"]').textContent;
         tooltip += " " + password.length;
@@ -238,6 +238,8 @@ function showPasswords()
       setCommandHandler(entry.querySelector(".to-clipboard-link"), copyToClipboard.bind(null, password));
 
       entry.querySelector(".user-name-container").setAttribute("title", tooltip);
+      if (password.type == "generated")
+        entry.querySelector(".user-name-container").classList.add("legacy-warning");
       entry.querySelector(".user-name").textContent = password.name;
 
       let revisionNode = entry.querySelector(".password-revision");
@@ -330,7 +332,7 @@ function bumpRevision(password)
     revision++;
   $("password-revision").value = revision;
 
-  if (password.type == "generated")
+  if (password.type == "generated2" || password.type == "generated")
   {
     $("password-length").value = password.length;
     $("charset-lower").checked = password.lower;

locale/en-US.properties

@@ -8,7 +8,8 @@ user-name-exists = This user name already exists.
 user-name-exists-generated = This user name and revision combination already exists. Maybe increase the revision number?
 no-characters-selected = At least one character set has to be selected.
 password-value-required = Please enter the password you used on this website.
-password-type-generated = Generated password
+password-type-generated = Easy Passwords 1.x generated password, please replace by a new password
+password-type-generated2 = Generated password
 password-type-legacy = Legacy password\nPassword encrypted and stored
 password-notes-stored = Notes encrypted and stored
 remove-password-confirmation = Do you really want to remove the password "{1}" for the website {2}?
@@ -70,8 +71,8 @@ change-password-revision = Need a new password for the same username?
 password-revision = Revision:
 password-length = Length:
 allowed-characters = Allowed characters:
-generate-legacy = Use Easy Passwords 1.x algorithm
-generate-legacy-warning = Don't use this option for new passwords! Only check when restoring a password that was initially created with an older Easy Passwords version.
+generate-legacy = Easy Passwords 1.x password
+generate-legacy-warning = Don't use this option for new passwords! Only check when recovering a password that was initially created with an older Easy Passwords version.
 generate-password = Generate password
 
 # legacy-password