GNOME.org
 

[gnome-initial-setup/show-password-button: 36/36] password: Add eye icons to toggle password visibility

commit 0821f1335dd408ad89aada399889a9233e918ed7
Author: Philip Chimento <philip endlessm com>
Date:   Tue Aug 6 11:45:19 2019 -0700

    password: Add eye icons to toggle password visibility
    
    User research shows that allowing users to view the password that
    they've typed, reduces how often passwords are forgotten, especially for
    users who are unaccustomed to creating and typing passwords.
    
    https://www.nngroup.com/articles/password-creation/ has some more
    interesting reading on this.
    
    In most prior art, the eye icons are placed in the secondary position
    but here we place them in the primary position because we already use
    the secondary position for a warning icon to show a weak password and/or
    a checkmark icon to show that the two passwords match.
    
    Closes GNOME/gnome-initial-setup#81.

 .../pages/password/gis-password-page.c             | 31 ++++++++++++++++++++++
 .../pages/password/gis-password-page.ui            |  4 +++
 .../scalable/status/eye-not-looking-symbolic.svg   |  3 +++
 .../status/eye-open-negative-filled-symbolic.svg   | 26 ++++++++++++++++++
 .../pages/password/password.gresource.xml          |  2 ++
 5 files changed, 66 insertions(+)
---
diff --git a/gnome-initial-setup/pages/password/gis-password-page.c 
b/gnome-initial-setup/pages/password/gis-password-page.c
index 4b32a3f..2147045 100644
--- a/gnome-initial-setup/pages/password/gis-password-page.c
+++ b/gnome-initial-setup/pages/password/gis-password-page.c
@@ -167,6 +167,33 @@ on_focusout (GisPasswordPage *page)
   return FALSE;
 }
 
+static void
+on_entry_icon_press (GtkEntry            *entry,
+                     GtkEntryIconPosition icon_pos,
+                     GdkEvent            *event G_GNUC_UNUSED,
+                     gpointer             data G_GNUC_UNUSED)
+{
+  if (icon_pos != GTK_ENTRY_ICON_PRIMARY)
+    return;
+
+  if (gtk_entry_get_visibility (entry))
+    {
+      gtk_entry_set_visibility (entry, FALSE);
+      gtk_entry_set_icon_from_icon_name (entry, GTK_ENTRY_ICON_PRIMARY,
+                                         "eye-open-negative-filled-symbolic");
+      gtk_entry_set_icon_tooltip_text (entry, GTK_ENTRY_ICON_PRIMARY,
+                                       _("Show password"));
+    }
+  else
+    {
+      gtk_entry_set_visibility (entry, TRUE);
+      gtk_entry_set_icon_from_icon_name (entry, GTK_ENTRY_ICON_PRIMARY,
+                                         "eye-not-looking-symbolic");
+      gtk_entry_set_icon_tooltip_text (entry, GTK_ENTRY_ICON_PRIMARY,
+                                       _("Hide password"));
+    }
+}
+
 static void
 password_changed (GtkWidget      *w,
                   GParamSpec     *pspec,
@@ -240,6 +267,8 @@ gis_password_page_constructed (GObject *object)
                             G_CALLBACK (on_focusout), page);
   g_signal_connect_swapped (priv->password_entry, "activate",
                             G_CALLBACK (confirm), page);
+  g_signal_connect (priv->password_entry, "icon-press",
+                    G_CALLBACK (on_entry_icon_press), NULL);
 
   g_signal_connect (priv->confirm_entry, "notify::text",
                     G_CALLBACK (confirm_changed), page);
@@ -247,6 +276,8 @@ gis_password_page_constructed (GObject *object)
                             G_CALLBACK (on_focusout), page);
   g_signal_connect_swapped (priv->confirm_entry, "activate",
                             G_CALLBACK (confirm), page);
+  g_signal_connect (priv->confirm_entry, "icon-press",
+                    G_CALLBACK (on_entry_icon_press), NULL);
 
   g_signal_connect (GIS_PAGE (page)->driver, "notify::username",
                     G_CALLBACK (username_changed), page);
diff --git a/gnome-initial-setup/pages/password/gis-password-page.ui 
b/gnome-initial-setup/pages/password/gis-password-page.ui
index 500d0d3..dd2c63f 100644
--- a/gnome-initial-setup/pages/password/gis-password-page.ui
+++ b/gnome-initial-setup/pages/password/gis-password-page.ui
@@ -50,6 +50,8 @@
                 <property name="visibility">False</property>
                 <property name="invisible_char">●</property>
                 <property name="invisible_char_set">True</property>
+                <property name="primary_icon_name">eye-open-negative-filled-symbolic</property>
+                <property name="primary_icon_tooltip_text">Show password</property>
               </object>
               <packing>
                 <property name="left_attach">1</property>
@@ -82,6 +84,8 @@
                 <property name="visibility">False</property>
                 <property name="invisible_char">●</property>
                 <property name="invisible_char_set">True</property>
+                <property name="primary_icon_name">eye-open-negative-filled-symbolic</property>
+                <property name="primary_icon_tooltip_text">Show password</property>
               </object>
               <packing>
                 <property name="left_attach">1</property>
diff --git a/gnome-initial-setup/pages/password/icons/scalable/status/eye-not-looking-symbolic.svg 
b/gnome-initial-setup/pages/password/icons/scalable/status/eye-not-looking-symbolic.svg
new file mode 100644
index 0000000..ad75f42
--- /dev/null
+++ b/gnome-initial-setup/pages/password/icons/scalable/status/eye-not-looking-symbolic.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="16" height="16">
+    <path d="M13.98 1.99a1 1 0 0 0-.687.303l-.984.984A8 8 0 0 0 8 2 8 8 0 0 0 .262 8.01a8 8 0 0 0 2.943 
4.37l-.912.913a1 1 0 1 0 1.414 1.414l11-11a1 1 0 0 0-.727-1.717zM8 4a4 4 0 0 1 2.611.974l-1.42 1.42A2 2 0 0 0 
8 6a2 2 0 0 0-2 2 2 2 0 0 0 .396 1.19l-1.42 1.42A4 4 0 0 1 4 8a4 4 0 0 1 4-4zm7.03 2.209l-3.344 3.343a4 4 0 0 
1-2.127 2.127l-2.28 2.28a8 8 0 0 0 .721.04 8 8 0 0 0 7.738-6.01 8 8 0 0 0-.709-1.78zm-7.53.79a.5.5 0 0 1 
.5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5z" fill="#2e3436"/>
+</svg>
diff --git a/gnome-initial-setup/pages/password/icons/scalable/status/eye-open-negative-filled-symbolic.svg 
b/gnome-initial-setup/pages/password/icons/scalable/status/eye-open-negative-filled-symbolic.svg
new file mode 100644
index 0000000..4c9dc28
--- /dev/null
+++ b/gnome-initial-setup/pages/password/icons/scalable/status/eye-open-negative-filled-symbolic.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"; xmlns:dc="http://purl.org/dc/elements/1.1/"; 
xmlns:cc="http://creativecommons.org/ns#"; xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"; 
xmlns:svg="http://www.w3.org/2000/svg"; xmlns="http://www.w3.org/2000/svg"; width="16" viewBox="0 0 16 16" 
version="1.1" id="svg7384" height="16">
+  <metadata id="metadata90">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <title id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs id="defs7386">
+    <linearGradient osb:paint="solid" id="linearGradient7212">
+      <stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop7214"/>
+    </linearGradient>
+  </defs>
+  <g transform="translate(-341.0002,-13.000323)" style="display:inline" id="layer9"/>
+  <g transform="translate(-100,-380.00032)" id="layer1"/>
+  <g transform="translate(-100,-380.00032)" style="display:inline" id="layer10">
+    <path d="m 108,382 a 8,8 0 0 0 -7.73828,6.00977 A 8,8 0 0 0 108,394 8,8 0 0 0 115.73828,387.99023 8,8 0 
0 0 108,382 Z m 0,2 a 4,4 0 0 1 4,4 4,4 0 0 1 -4,4 4,4 0 0 1 -4,-4 4,4 0 0 1 4,-4 z" id="path2314" 
style="opacity:1;vector-effect:none;fill:#2e3436;fill-opacity:1;stroke:none;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal"/>
+    <path id="path2318" d="m 110,388.00003 a 2,2 0 0 1 -2,2 2,2 0 0 1 -2,-2 2,2 0 0 1 2,-2 2,2 0 0 1 2,2 z" 
style="vector-effect:none;fill:#2e3436;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
+  </g>
+  <g transform="translate(-100,-380.00032)" id="g6387"/>
+  <g transform="translate(-100,-380.00032)" id="layer11"/>
+</svg>
diff --git a/gnome-initial-setup/pages/password/password.gresource.xml 
b/gnome-initial-setup/pages/password/password.gresource.xml
index 22cad98..60ed60a 100644
--- a/gnome-initial-setup/pages/password/password.gresource.xml
+++ b/gnome-initial-setup/pages/password/password.gresource.xml
@@ -3,5 +3,7 @@
   <gresource prefix="/org/gnome/initial-setup">
     <file preprocess="xml-stripblanks" alias="gis-password-page.ui">gis-password-page.ui</file>
     <file alias="gis-password-page.css">gis-password-page.css</file>
+    <file preprocess="xml-stripblanks">icons/scalable/status/eye-not-looking-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">icons/scalable/status/eye-open-negative-filled-symbolic.svg</file>
   </gresource>
 </gresources>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]