Creating Mail Template for Sending OTP

aditya-garg-09-01-2002 commented 2 weeks ago

Is your feature request related to a problem? Please describe.

Currently a very naive workaround is used to send OTP to users.
To enhance UI, mail template shall be created, which will be used to send the mail.

Describe the solution you'd like

Create a .hbs file which will be required and thus compiled as .html file as called by sendOTP function in /src/utils/communication.ts
this template shall reside in /src/assets folder
.hbs file is very similar to .html file, only difference in this concern lies with utilisation of
- encoded image (in .hbs) instead of image URL (in .html)
- utilisation of internal CSS in .hbs
- acceptability of variables in .hbs while compilation

Additional context

File Ref /src/utils/communications.ts for sendOTP function.
Discuss in comments below, if any help with .hbs file is required.
Encoded image in .hbs is sometimes still an issue. ( I myself not very sure on this, might need more help with this task )

chavdarohit commented 2 weeks ago

on this things we can discuss and can go ahead also

shaikmynuddin commented 2 weeks ago

Hi Sorry can I work in this also previously you assigned me for test case issue

aditya-garg-09-01-2002 commented 2 weeks ago

I list the things to be done below @chavdarohit

[x] Creating an assets folder in the src folder, where your templates can exist.
[x] You will need to create a .hbs file as a template

[x] I have created a similar template in my previous projects as below (here {{variable_name}} represents variables which are compiled from .hbs to .HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    div,ul,li,span{
        color: black;
    }
</style>
</head>
<body>
{{!-- <div style="width:100%; display:flex; flex-direction: row-reverse">
    <img src="data:image/jpg;base64,{{encodedLogo}}" style="height:60px;width:150px"/>
</div> --}}
<div style="border:20px solid rgb(240, 240, 240);padding:20px;color:black">
    <div style="background-color:white;text-wrap:wrap;color:black !important">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, debitis asperiores atque soluta quo modi dolor veritatis voluptatum, incidunt excepturi eveniet corrupti adipisci, velit accusantium eius quidem inventore ipsam natus.
    </div>
</div>
This is a system generated mail
</body>
</html>

[x] Creation of templates will take place for following task -
- [x] one template for sending an otp when user first registers, you will have inputs for name of the user and otp that is to be sent.
- [x] one template for sending an otp to user when call for resend otp API, you again will have name and otp as inputs.
- [x] one template for sending an otp to user when call for forgot password is placed, you again will have name and otp as inputs.
Once these templates are done, we can create a new issue for integrating these templates for been send to the actual users. (if you are comfortable with javascript or typescript you can tell).
Also @shaikmynuddin if you are comfortable with javascript or typescript, I can create a new issue for integrating these template. I will be helping over doing that as well, if you like.

chavdarohit commented 2 weeks ago

yaah i can work on this as per your guidance also you can create a new issue for integrating on js or ts i am familiar with both so you can assign it to me

aditya-garg-09-01-2002 commented 2 weeks ago

Ok you can move ahead with creating templates for different mails to be sent, listed in previous comment.
I am assigning this task to @chavdarohit .
@shaikmynuddin I request, can you look forward to a different issue, or if you find something, we can create a new issue for you altogether. I am looking to update forgot password controller, just drop a message if you want to work on it.

chavdarohit commented 2 weeks ago

Thanks also i want to ask for all 3 case you want three different .hbs file templates am i correct ?

aditya-garg-09-01-2002 commented 2 weeks ago

Yes, different templates, as they will have different contents.
- You can do two things, either create a copy of .hbs file as .HTML and check what you are building, or
- Create a .HTML file initially, and convert to .hbs while creating a pull request.

aditya-garg-09-01-2002 / commencer

Creating Mail Template for Sending OTP #16