username_icon and password_icon attributes

Author: Olivier Auverlot

examples/official-site/sqlpage/migrations/68_login.sql

@@ -12,6 +12,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('action','An optional link to a target page that will handle the results of the form. ','TEXT',TRUE,TRUE),
     ('username','User account identifier.','TEXT',TRUE,FALSE),
     ('password','User password.','TEXT',TRUE,FALSE),
+    ('username_icon','Icon to display on the left side of the input field, on the same line.','ICON',TRUE,TRUE),
+    ('password_icon','Icon to display on the left side of the input field, on the same line.','ICON',TRUE,TRUE),
     ('image','The URL of an centered image displayed before the title.','URL',TRUE,TRUE),
     ('forgot_password_text','A text for the link allowing the user to reset their password. If the text is empty, the link is not displayed.','TEXT',TRUE,TRUE),
     ('forgot_password_link','The link to the page allowing the user to reset their password.','TEXT',TRUE,TRUE),
@@ -39,6 +41,8 @@ VALUES (
                     "title": "Please login to your account",
                     "username": "Username",
                     "password": "Password",
+                    "username_icon": "user",
+                    "password_icon": "lock",
                     "forgot_password_text": "Forgot your password?",
                     "forgot_password_link": "reset_password.sql",
                     "remember_me_text": "Remember me",
@@ -48,5 +52,3 @@ VALUES (
             ]'
         )
     );
-
--- 265707.png

sqlpage/templates/login.handlebars

@@ -1,4 +1,4 @@
-<div class="container {{class}}">
+<div class="container">
     <div class="row d-flex justify-content-center">
         <div class="col-md-6">
             <form 
@@ -22,15 +22,9 @@
                 {{/if}}
                 <label class="form-label">{{username}}</label>    
                 <div class="input-icon mb-3">
-                    <span class="input-icon-addon">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
-                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
-                            fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <circle cx="12" cy="7" r="4" />
-                            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
-                        </svg>
-                    </span>
+                    {{#if username_icon}}
+                        <span class="input-icon-addon">{{icon_img username_icon}}</span>
+                    {{/if}}
                     <input type="text" name="username" id="username" value="" class="form-control" placeholder="{{username}}" required="required" autofocus/>
                 </div>
                 <label class="form-label">{{password}}
@@ -39,17 +33,9 @@
                     {{/if}}
                 </label>
                 <div class="input-icon mb-3">
-                    <span class="input-icon-addon">
-                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  
-                            viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  
-                            stroke-linecap="round"  stroke-linejoin="round"  
-                            class="icon icon-tabler icons-tabler-outline icon-tabler-lock">
-                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                                <path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z" />
-                                <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
-                                <path d="M8 11v-4a4 4 0 1 1 8 0v4" />
-                        </svg>
-                    </span>
+                    {{#if password_icon}}
+                        <span class="input-icon-addon">{{~icon_img password_icon~}}</span>
+                    {{/if}}
                     <input type="password" name="password" id="password" value="" class="form-control" placeholder="{{password}}" required="required"/>
                 </div>
                 {{#if remember_me_text}}