3. Log in, out and forgotten password - PersonCentredSoftware/RelativesGateway GitHub Wiki

Password

Please note that a password will get created the first time the login attempt is made. You can type in the password you wish to keep at this point. To change password, please use the Forgot Password functionality. For more help with logging in take a look at http://www.relativesgateway.co.uk/pcs/Home/FAQ

Login

This component is more complicated than most others. The loadLogin method returns an HTML form which you can display to the user (or you can make your own form). An important part of this form is the hidden input pcs_aft - when you call the doLogin API method, you must pass this in together with username and password, else the request will fail.

<div class="row" id="pcs-homepage-content">
    <div class="col-md-12 col-lg-12" id="login_container" style="display:none;">
        <h2>Relatives Gateway</h2>
        <div id="pcs-Login"></div>
    </div>
</div>
<script type="text/javascript">

    PcsComponents.getInstance().then(function (lib) {

        // lib is the API
        lib.getAccess().then(function(access){

            // do console.log(acccess) to see what is available
            if (access.Authenticated) {
                $('#pcs-homepage-content').hide(); // Parent login container should be hidden
                // Add your own logic to display the Logout button
            }
            else {
                $("#login_container").show(); // Display the login container

                // pcs-Login is the ID of the div where the component content will be loaded into
                lib.loadLogin("pcs-Login").then(function (lib) {

                        var $f = $("#pcs-Login"); // The component itself
                        $f.find("button#pcs-login-button").click(function (e) { // Bind the Login button click
                            "use strict"

                            var $t = $(e.currentTarget);
                            if ($t.attr("disabled")) return; // Prevent double-click

                            // Show loading
                            var btnText = $t.text();
                            $t.attr("disabled", "disabled").html('<i class="fa fa-spinner fa-spin"></i> wait...');

                            var $f = $("#pcs-Login");
                            $f.find(".pcs-errors").empty();
                            lib.doLogin($f.find("#UserName").val(), $f.find("#Password").val(), $f.find("#pcs_aft").val())
                                .then(function (result) {
                                    // Clear loading
                                    $t.removeAttr("disabled").html('Sign in');

                                    if (result.authenticated === true) {
                                        // Reload the page and allow the components to display
                                        window.location = window.location;
                                    } else {
                                        var $e = $f.find(".pcs-errors");
                                        // display errors to the user
                                        for (var err in result.errors)
                                            if (result.errors.hasOwnProperty(err)) {
                                                if (result.errors[err].Key == "WrongProvider") {
                                                    // Take the user to the list page
                                                    window.location = '@(Url.Content("~/providers/"))'
                                                }

                                                $e.append('<p>' + result.errors[err].Value + '</p>');
                                            }
                                    }
                                });
                        });

                    });
            }
        });
    });
</script>

Authentication errors

These are the errors which you can expect to receive back if the authentication fails. The errors arrive with the descriptions which suggest steps to fix the problem.

  • PasswordNotValid
  • EmailNotValid
  • NoProviderID
  • NotLicensedForCare
  • RGNotSetUp
  • RequestingDomainNotInWhiteList
  • WrongProvider
  • NoRelationships
  • RelationshipHasNoRGAccess
  • UsernamePasswordCheckFail
  • CannotCreateUser

Logout

You will need to provide your own Logout button, and bind to it

        $('.pcs-DoSignOut').off('click').on('click', function (e) {
            "use strict"
            e.preventDefault();
            e.stopPropagation();
            PcsComponents.getInstance().then(function (lib) {
                lib.doLogout()
                    .then(function () {

                        // After logout reload the page to refresh the rest of the components on the page
                        window.location = 'https://yourwebsite.com';
                    });
            });
        });

Forgotten password

The login component comes with logic for the Forgotten password. Once you have displayed the Login component via the loadLogin method, if the user clicks on (Forgot?) text they will be presented with the popup window asking for the email address.

Once the user submits that form, an email is issued with the URL to a page on your website, where the password can be reset. You specify this page on your website during the API initialisation.

The password reset page should have the component loaded as follows:

<div class="row">
    <div id="pcs-ResetPassword"></div>
</div>

<script type="text/javascript">
    PcsComponents.getInstance().then(function (lib) {
        lib.loadResetPassword("pcs-ResetPassword");
    });
</script>

The user is then prompted to change the password.

⚠️ **GitHub.com Fallback** ⚠️