Teacher registration form missing JavaScript elements when invited to school

[faucomte97]

Describe the bug
When a teacher is invited to join a school, they receive an email prompting them to finish the registration process - they just need to provide a password.
However, for some reason, the registration form at that stage is missing some JS elements like the reveal password icon as well as the password strength checker.

To Reproduce
Steps to reproduce the behaviour:

1. Login as a school admin.
2. Invite a teacher to join your school - make sure to use an unused email address you can easily check (you can use the + trick with Gmail)
3. Follow the registration link in the email you received.
4. Notice that the form is missing JS elements.

Expected behaviour
The form should allow the teacher to view their password as well as inform them regarding their password's strength, similarly to the main registration form.

Screenshots

Good Places to Start

• JS file which has the logic for the "password strength" checker: https://github.com/ocadotechnology/codeforlife-portal/blob/master/portal/static/portal/js/passwordStrength.js
• HTML template for the main register form, which has all working JS elements: https://github.com/ocadotechnology/codeforlife-portal/blob/master/portal/templates/portal/register.html
• HTML template for the invited teacher registration: https://github.com/ocadotechnology/codeforlife-portal/blob/master/portal/templates/portal/teach/invited.html

Note that the template already includes the passwordStrength.js file, but my guess is that because the template doesn't have all the HTML elements that register.html has, the JS code throws an error and doesn't run properly.

[besque]

@faucomte97 I'd love to work on this, I'm done setting it up and it's running successfully on my machine, I'll get started on the issue right away.

[besque]

I'm not getting the email verification link to register a new account, checked everywhere and tried to create multiple accounts using different gmail id's, still couldn't get the verification link. Any suggestions on what I might have to do will greatly help.

I need to be able to login in order to reprodouce the bug.

[faucomte97]

Hi @besque, thanks so much for picking this task up!

No worries - when performing the registration process locally, no email actually gets sent out to your address. Instead, the contents of the email get outputted in your terminal. This is where you'll be able to find the verification link. If you copy and paste it in your browser, then you should be able to log in 🙂

Let me know if it doesn't work or if I can help with anything else!

[besque]

Hey! @faucomte97, thank you for replying..

I tried to look for it in the terminal output but the email content just says dummy_text_content. I wasn't able to find any sort of link in terminal output so is there anything else I can do?

The mail looks like this in the terminal -

Please have a look, Thank you!

[faucomte97]

Hi @besque,

Could you please tell me which directory you're running the local server from? I'm not 100% sure, but given that you are on the "main" branch, I'm guessing that you are running this from the codeforlife-workspace directory itself. If so, try opening a terminal within the the codeforlife-portal directory within the codeforlife-workspace directory, and ensure you've run pipenv shell and pipenv install --dev for the codeforlife-portal project. You should have a virtual environment with that name in brackets on the terminal after that.

Then, if you run ./run there, the emails should appear in the terminal.

Let me know if that works, otherwise we can keep digging 🙂

[besque]

Hey @faucomte97,

I can confirm I had been running it exactly how you described, but just to make sure I created the virtual environment again in /codeforlife-workspace/codeforlife-portal and ran it.

I still get the exact same output as the before :(

Please let me know how I can go about this, Thanks!

[faucomte97]

Hey @besque,

Would you be able to provide a screenshot of your whole VS code window? Ideally from before you run ./run - it would help me get the whole picture so I can see if I notice anything that might help.

Thanks!

[besque]

Hey @faucomte97,

Sure here you go,

Please let me know if you need me to share anything else that would be helpful, Thanks!

[faucomte97]

Aah, I think I know what went wrong.

Referring back to step 5 of our docs:

Can you confirm which command you ran?
The command in the yellow box is meant for internal members of the Code for Life team only.
The other command below is for external volunteers, as they need to have a fork of each repository and not clone directly from the main repos.

If that is what happened, you'll need to ensure you fork the main workspace repo then run the bottom command git clone https://github.com/{username}/codeforlife-workspace.git to clone your own fork.
Then, the setup script should clone and fork all the submodules.

Let me know if that works 🙂

[faucomte97]

Additional point: if you've already forked the workspace repo, please sync it now with the latest changes we have just released - we've improved the setup script so it is clearer and forks & clones the submodules more successfully.

[besque]

Ah I do remember going through that, and I made sure not to use the clone command in the yellow box. I had forked the codeforlife-workspace repo and used the normal clone command.

As you mentioned, I'll sync it with the latest changes and I'll try again.
I'll let you know of any updates, thank you very much!

[besque]

Hey @faucomte97,

I synced the fork, pulled it, and deleted any previous virtual environments, created a new one using pipenv install --dev in the codeforlife-workspace/codeforlife-portal directory. Even after the sync the results are still the same :((
The email contents still say dummy_text_content.

Here are some attached screenshots.

Not sure how to get around this, Please let me know if there's anything I can do, Thank you lots!

[faucomte97]

Hi @besque, I'm really sorry this seems to be an issue on our end actually! Sorry we should've caught this sooner.
Long story short, we changed the way we handle emails a few months ago and now the email content no longer gets outputted to the terminal :(

In the meantime, I recommend the following:

• If I remember correctly, you need an invitation token to be able to access the page mentioned in the screenshot above. If you don't have one, the page will error out so you can't get to the form. Since we can't get emails through locally, you won't be able to get an invitation token directly to access that page.
• Therefore, I recommend you find the code that checks for that token and temporarily comment it out, or force it to return True. Just so that it loads the page at least, and that way you can edit and test the JS on the page.

Does that make sense? Sorry again about the email issue. Happy to help if you have any other questions

[besque]

Hey @faucomte97,

No problem, I'll try to look for the code that's responsible for this and force it to return true temporarily, or any other workaround if that doesn't work.

Thanks again for the help! I'll keep you updated :)

[besque]

hey @faucomte97,

I finally got around the email verification problem and also a similar problem I faced while accessing the teacher invite link.

I've gone ahead and made appropriate changes and the teacher invitation registration form should work as intended now.

Please review my PR and let me know!

[faucomte97]

Hi @besque,

That's awesome news, thank you!

I've approved the pipeline runs and will start reviewing your PR ASAP, however in the meantime, could you please go ahead and 1) read through our Contributor Agreement and 2) follow the steps just below the agreement to become a verified contributor. It is required for us to merge in your PR 🙂

Let me know if you have any questions 😃

[besque]

Hey @faucomte97,

I've added my email id according to the contributor agreement
Here's the pr for that : ocadotechnology/codeforlife-workspace/pull/156

[faucomte97]

Hi @besque,

Perfect, I've just reviewed that and you should've now received an email, once you reply to that you will be an official Code for Life contributor 🥳

[besque]

Hey @faucomte97,

Awesome! I've replied to the mail :)

[faucomte97]

Hi @besque,

Sorry just one last thing, would you also be able to forward your reply to [email protected]? That'll be the last step, promise! 😅

[besque]

No problem 😄

I've forwarded it to [email protected]

[faucomte97]

Hey @besque,

Congrats, you are now an official Code for Life contributor 🥳
I've also just reviewed your PR, just left one comment regarding the broken test 🙂

[besque]

Hey @faucomte97,

I've updated the PR, hopefully the tests pass now 🙂

[faucomte97]

Hi @besque,

Thanks for your work on this task! I've approved and merged in your PR 🥳 🙏🏻
This task will now follow our standard deployment processes - first it gets deployed to our staging environment for manual testing, then we will deploy it to our live site. Once it's been deployed and no side issues have been found, we will officially close this task 😃

[besque]

Hey @faucomte97,

I'm glad I could contribute 😄
Hope it makes it through without any issues

Thank you so much for your patience and help! ✨

[faucomte97]

LGTM on staging.

@lauracumming If LGT you too I can go ahead and deploy to prod.

[SKairinos]

LGTM

[lauracumming]

LGTM

[faucomte97]

LGTM - production

[lauracumming]

LGTM