During authentication, a posting field is set which disables all form controls related to login while the login is being processed. To create a custom login page with both an sp-login-form and an sp-social-login button, 2 requirements must be met for a click of the social login button to disable itself and the sp-login-form controls:
The sp-social-login button must be a part of the sp-login-form template i.e. it must be a child element of sp-login-form and not a sibling
The sp-social-login button must be rendered as part of an ng-repeat because it sets the posting flag and error message on a parent scope.
The default sp-login-form template does both these things (although its missing ng-disabled=posting on the social login buttons) but its not obvious that they are required. This may be a documentation issue although it would be nice for the ng-repeat to not be a requirement. The Angular directives documentation has a section on communicating directives that might present a possible way to structure the form.
During authentication, a
postingfield is set which disables all form controls related to login while the login is being processed. To create a custom login page with both ansp-login-formand ansp-social-loginbutton, 2 requirements must be met for a click of the social login button to disable itself and thesp-login-formcontrols:sp-social-loginbutton must be a part of thesp-login-formtemplate i.e. it must be a child element ofsp-login-formand not a siblingsp-social-loginbutton must be rendered as part of anng-repeatbecause it sets the posting flag and error message on a parent scope.The default
sp-login-formtemplate does both these things (although its missingng-disabled=postingon the social login buttons) but its not obvious that they are required. This may be a documentation issue although it would be nice for theng-repeatto not be a requirement. The Angular directives documentation has a section on communicating directives that might present a possible way to structure the form.