WebUI: add link to login page which for login using certificate

Also add error message when login failed.

https://pagure.io/freeipa/issue/6225

install/ui/src/freeipa/auth.js

@@ -111,7 +111,7 @@ auth.Auth = declare([Stateful, Evented], {
      * Enabled auth methods
      * @property {string[]}
      */
-    auth_methods: ['kerberos', 'password'],
+    auth_methods: ['kerberos', 'password', 'certificate'],
 
     /**
      * Authenticated user's Kerberos principal
@@ -249,4 +249,4 @@ auth.Auth = declare([Stateful, Evented], {
 
 auth.current = new auth.Auth();
 return auth;
-});
+});

install/ui/src/freeipa/widgets/LoginScreen.js

@@ -19,10 +19,12 @@
 */
 
 define(['dojo/_base/declare',
+        'dojo/Deferred',
         'dojo/dom-construct',
         'dojo/dom-style',
         'dojo/query',
         'dojo/on',
+        'dojo/topic',
         '../ipa',
         '../auth',
         '../reg',
@@ -31,7 +33,7 @@ define(['dojo/_base/declare',
         '../util',
         './LoginScreenBase'
        ],
-       function(declare, construct, dom_style, query, on,
+       function(declare, Deferred, construct, dom_style, query, on, topic,
                 IPA, auth, reg, FieldBinder, text, util, LoginScreenBase) {
 
 
@@ -55,11 +57,15 @@ define(['dojo/_base/declare',
                     " have valid tickets (obtainable via kinit) and " +
                     "<a href='http://${host}/ipa/config/unauthorized.html'>configured</a>" +
                     " the browser correctly, then click Login. ",
+        cert_msg: "<i class=\"fa fa-info-circle\"></i> To login with <strong>Smart Card</strong>," +
+              " please make sure you have valid personal certificate. ",
 
         form_auth_failed: "Login failed due to an unknown reason. ",
 
         krb_auth_failed: "Authentication with Kerberos failed",
 
+        cert_auth_failed: "Authentication with personal certificate failed",
+
         password_expired: "Your password has expired. Please enter a new password.",
 
         password_change_complete: "Password change complete",
@@ -72,9 +78,12 @@ define(['dojo/_base/declare',
 
         user_locked: "The user account you entered is locked. ",
 
+        login_url: '/ipa/session/login_x509',
+
         //nodes:
         login_btn_node: null,
         reset_btn_node: null,
+        cert_btn_node: null,
 
         /**
          * View this form is in.
@@ -86,6 +95,16 @@ define(['dojo/_base/declare',
 
         render_buttons: function(container) {
 
+            this.cert_btn_node = IPA.button({
+                name: 'cert_auth',
+                title:"Login using personal certificate",
+                label: "Smart Card Login",
+                button_class: 'btn btn-link',
+                click: this.login_with_cert.bind(this)
+            })[0];
+            construct.place(this.cert_btn_node, container);
+            construct.place(document.createTextNode(" "), container);
+
             this.sync_btn_node = IPA.button({
                 name: 'sync',
                 label: text.get('@i18n:login.sync_otp_token', "Sync OTP Token"),
@@ -251,6 +270,18 @@ define(['dojo/_base/declare',
             }.bind(this));
         },
 
+        login_with_cert: function() {
+
+            this.lookup_credentials().then(function(status) {
+                if (status === 200) {
+                    this.emit('logged_in');
+                } else {
+                    var val_summary = this.get_widget('validation');
+                    val_summary.add_error('login', this.cert_auth_failed);
+                }
+            }.bind(this));
+        },
+
         login_and_reset: function() {
 
             var val_summary = this.get_widget('validation');
@@ -293,6 +324,40 @@ define(['dojo/_base/declare',
 
         },
 
+        lookup_credentials: function() {
+
+            var status;
+            var d = new Deferred();
+
+            function error_handler(xhr, text_status, error_thrown) {
+                d.resolve(xhr.status);
+                topic.publish('rpc-end');
+            }
+
+            function success_handler(data, text_status, xhr) {
+                auth.current.set_authenticated(true, 'kerberos');
+                d.resolve(xhr.status);
+                topic.publish('rpc-end');
+            }
+
+            var login = this.get_field('username').get_value()[0];
+
+            var request = {
+                url: this.login_url,
+                cache: false,
+                type: "GET",
+                data: $.param({
+                    'username': login
+                }),
+                success: success_handler,
+                error: error_handler
+            };
+            topic.publish('rpc-start');
+            $.ajax(request);
+
+            return d.promise;
+        },
+
         refresh: function() {
             if (this.view === 'reset') {
                 this.show_reset_view();
@@ -307,7 +372,7 @@ define(['dojo/_base/declare',
                 var val_summary = this.get_widget('validation');
                 val_summary.add_info('expired', this.expired_msg);
             }
-            this.set_visible_buttons(['sync', 'login']);
+            this.set_visible_buttons(['cert_auth', 'sync', 'login']);
             if (this.password_enabled()) {
                 this.use_fields(['username', 'password']);
                 var username_f = this.get_field('username');
@@ -344,6 +409,10 @@ define(['dojo/_base/declare',
             if (this.kerberos_enabled()) {
                 aside += "<p>"+this.kerberos_msg+"<p/>";
             }
+            if (this.certificate_enabled()) {
+                aside += "<p>"+this.cert_msg+"<p/>";
+            }
+
             this.set('aside', aside);
         },
 

install/ui/src/freeipa/widgets/LoginScreenBase.js

@@ -328,6 +328,11 @@ define(['dojo/_base/declare',
             return auth.current.auth_methods.indexOf('password') > -1;
         },
 
+        certificate_enabled: function() {
+            return auth.current.auth_methods.indexOf('certificate') > -1;
+        },
+
+
         postscript: function(args) {
             this.create_fields();
         },