ahayson@instructure.com

'Request Password' URL for User.CSV Creation

Blog Post created by ahayson@instructure.com Employee on Feb 18, 2019

You might have noticed when uploading a USERS.CSV, via the SIS Import function, it does not currently give you the ability to send the 'User Creation' email. So how do you give your users the opportunity to set their own password?

 

Some of you may request your users to select the 'Forgot Your Password' link on the login page, or perhaps you have set them a generic password where the user then has to login and change that password themselves. 

 

This solution provides you with an alternate way to send a Generic URL to your users where they can 'Request a Password' for themselves. 

 

 

Step 1 - Add the .JS to your Canvas Instance

If you haven't already, download a product such as 'Sublime Text'. Copy and paste the code below into Sublime.

//Written by D. Gilogley, Instructure Inc
//2019.01.08 - Forgot/Set password
// If you put this in your Theme's JS - You can then had our the URL
// "example.instructure.com/login/canvas?forgotpassword=true"
// This will auto take them forgot/reset password page of the Canvas login


//=================================================================
//=============== Main JS Starts below ============================

//Ensure Jquery is loaded on the page
if (typeof jQuery == 'undefined' || typeof jQuery === undefined || typeof jQuery === null) {
     var headTag = document.getElementsByTagName("head")[0];
     var jqTag = document.createElement('script');
     jqTag.type = 'text/javascript';
     jqTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
     headTag.appendChild(jqTag);
     jqTag.onload = myJQueryCode;
} else {
     myJQueryCode();
}

// Main function
function myJQueryCode(){
     //Ensure that the page has loaded
     $(document).ready(function(){
          //If on the login page
          if(document.location.pathname === "/login/canvas") {
               //if the URL is ".../login/canvas?newlogin=true" then take the user to the forgot password page
               if (getUrlVars().newlogin == "true") {
                   $('.forgot_password_link').click();
               }
               //Change the text display to "Set or Forgetpassword" on the login page and forgot password page
               $('#login_forgot_password').text("Set or Forgot password?");
               $('#forgot_password_instructions').text("Enter your Email address and we'll send a link to set or change your password.");
          }
     });
}

//Function that gets the ? paramaters from a URL and returns them as a JSON array
function getUrlVars(url) {
    //if no variable, set it to the URL
    if (url === undefined) {
        url = window.location.href;
    }

    var vars = {};
    var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
        vars[key] = decodeURIComponent(value);
    });
    return vars;
}

Thank you to Daniel Gilogley for developing this code. 

 

Step 2 - Save the File in a Javascript File

  1. Click 'File' and then 'Save as',
  2. Name the file and at the end ensure you have '.js' so that it saves correctly. 

 

 

Step 3 - Upload Javascript File to Canvas Theme Editor

First things first, you can only have one Javascript File at a time. Ensure that you are not overriding any Javascript in the upload process. If you are not sure, please check with your Customer Success Manager. 

  1. Go to your Canvas Instance,
  2. Here is the Guide on How To: Open the 'Theme Editor',
  3. Upload the Custom Javascript,
  4. Once Uploaded select 'Preview Changes', 'Save Theme', and then 'Apply Theme. 

 

Step 4 - Create the Generic URL for New Users

Below is the Generic URL that you can include in your custom email (email is generated by you) to new users. You need to remove 'example' and replace it with your institutions Canvas URL name.

 

example.instructure.com/login/canvas?newlogin=true

 

Please Note: Custom CSS and Javascript may cause accessibility issues or conflicts with future Canvas Updates. Before implementing custom CSS or Javascript, please refer to our documentation

 

Developed in collaboration with...
Daniel Gilogley, Principal Implementation Consultant (APAC)

Outcomes