feat: add responsive email template + support for org env

Resolves #52
This commit is contained in:
Lakhan Samani 2021-10-04 03:17:50 +05:30
parent 12d795b4e8
commit 5acf59d16e
10 changed files with 283 additions and 80 deletions

View File

@ -14,3 +14,9 @@ For the first version we will only support setting roles master list via env
- [x] Return roles in users list for super admin - [x] Return roles in users list for super admin
- [x] Add roles to the JWT token generation - [x] Add roles to the JWT token generation
- [x] Validate token should also validate the role, if roles to validate again is present in request - [x] Validate token should also validate the role, if roles to validate again is present in request
# Misc
- [x] Fix email template
- [x] Add support for organization name in .env
- [x] Add support for organization logo in .env

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,29 @@ export default function App() {
// @ts-ignore // @ts-ignore
const globalState: Record<string, string> = window['__authorizer__']; const globalState: Record<string, string> = window['__authorizer__'];
return ( return (
<div style={{ display: 'flex', justifyContent: 'center' }}> <div
style={{
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'center',
marginTop: 20,
flexDirection: 'column',
alignItems: 'center',
}}
>
<img
src={`${globalState.organizationLogo}`}
alt="logo"
style={{ height: 60, width: 60, objectFit: 'cover' }}
/>
<h1>{globalState.organizationName}</h1>
</div>
<div <div
style={{ style={{
width: 400, width: 400,

View File

@ -10,9 +10,9 @@ export default function Root() {
useEffect(() => { useEffect(() => {
if (token) { if (token) {
const url = new URL(config.redirectURL); const url = new URL(config.redirectURL || '/app');
if (url.origin !== window.location.origin) { if (url.origin !== window.location.origin) {
window.location.href = config.redirectURL; window.location.href = config.redirectURL || '/app';
} }
} }
return () => {}; return () => {};

View File

@ -37,4 +37,8 @@ var (
FACEBOOK_CLIENT_SECRET = "" FACEBOOK_CLIENT_SECRET = ""
TWITTER_CLIENT_ID = "" TWITTER_CLIENT_ID = ""
TWITTER_CLIENT_SECRET = "" TWITTER_CLIENT_SECRET = ""
// Org envs
ORGANIZATION_NAME = "Authorizer"
ORGANIZATION_LOGO = "https://authorizer.dev/images/logo.png"
) )

View File

@ -174,4 +174,12 @@ func InitEnv() {
if constants.JWT_ROLE_CLAIM == "" { if constants.JWT_ROLE_CLAIM == "" {
constants.JWT_ROLE_CLAIM = "role" constants.JWT_ROLE_CLAIM = "role"
} }
if os.Getenv("ORGANIZATION_NAME") != "" {
constants.ORGANIZATION_NAME = os.Getenv("ORGANIZATION_NAME")
}
if os.Getenv("ORGANIZATION_LOGO") != "" {
constants.ORGANIZATION_LOGO = os.Getenv("ORGANIZATION_LOGO")
}
} }

View File

@ -77,6 +77,8 @@ func AppHandler() gin.HandlerFunc {
"data": map[string]string{ "data": map[string]string{
"authorizerURL": stateObj.AuthorizerURL, "authorizerURL": stateObj.AuthorizerURL,
"redirectURL": stateObj.RedirectURL, "redirectURL": stateObj.RedirectURL,
"organizationName": constants.ORGANIZATION_NAME,
"organizationLogo": constants.ORGANIZATION_LOGO,
}, },
}) })
} }

View File

@ -16,17 +16,96 @@ func SendVerificationMail(toEmail, token string) error {
Subject := "Please verify your email" Subject := "Please verify your email"
message := fmt.Sprintf(` message := fmt.Sprintf(`
<!DOCTYPE HTML PULBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="content-type" content="text/html"; charset=ISO-8859-1"> <head>
</head> <meta charset="UTF-8">
<body> <meta content="width=device-width, initial-scale=1" name="viewport">
<h1>Please verify your email by clicking on the link below </h1><br/> <meta name="x-apple-disable-message-reformatting">
<a href="%s">Click here to verify</a> <meta http-equiv="X-UA-Compatible" content="IE=edge">
</body> <meta content="telephone=no" name="format-detection">
</html> <title></title>
`, constants.AUTHORIZER_URL+"/verify_email"+"?token="+token) <!--[if (mso 16)]>
<style type="text/css">
a {}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100%% !important; }</style><![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<div class="es-wrapper-color">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#ffffff"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-email-paddings" valign="top">
<table class="es-content esd-footer-popover" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="esd-stripe" align="center">
<table class="es-content-body" style="border-left:1px solid transparent;border-right:1px solid transparent;border-top:1px solid transparent;border-bottom:1px solid transparent;padding:20px 0px;" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tbody>
<tr>
<td class="esd-structure es-p20t es-p40b es-p40r es-p40l" esd-custom-block-id="8537" align="left">
<table width="100%%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-container-frame" width="518" align="left">
<table width="100%%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-block-image es-m-txt-c es-p5b" style="font-size:0" align="center"><a target="_blank"><img src="%s" alt="icon" style="display: block;" title="icon" width="30"></a></td>
</tr>
<tr>
<td class="esd-block-text es-m-txt-c" align="center">
<h2>Hey there 👋<br></h2>
</td>
</tr>
<tr>
<td class="esd-block-text es-m-txt-c es-p15t" align="center">
<p>We received a request to signup for <b>%s</b>. If this is correct, please confirm by clicking the button below.</p>
</td>
</tr>
<tr>
<td class="esd-block-button es-p20t es-p15b es-p10r es-p10l" align="center"><span class="es-button-border"><a href="%s" class="es-button" target="_blank" style="text-decoration: none;padding:10px;background-color: rgba(59,130,246,1);color: #fff;font-size: 1.2em;">Confirm Email</a></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; left: -9999px; top: -9999px; margin: 0px;"></div>
</body>
</html>
`, constants.ORGANIZATION_LOGO, constants.ORGANIZATION_NAME, constants.AUTHORIZER_URL+"/verify_email"+"?token="+token)
bodyMessage := sender.WriteHTMLEmail(Receiver, Subject, message) bodyMessage := sender.WriteHTMLEmail(Receiver, Subject, message)
return sender.SendMail(Receiver, Subject, bodyMessage) return sender.SendMail(Receiver, Subject, bodyMessage)
@ -46,17 +125,99 @@ func SendForgotPasswordMail(toEmail, token, host string) error {
Subject := "Reset Password" Subject := "Reset Password"
message := fmt.Sprintf(` message := fmt.Sprintf(`
<!DOCTYPE HTML PULBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="content-type" content="text/html"; charset=ISO-8859-1"> <head>
</head> <meta charset="UTF-8">
<body> <meta content="width=device-width, initial-scale=1" name="viewport">
<h1>Please use the link below to reset password </h1><br/> <meta name="x-apple-disable-message-reformatting">
<a href="%s">Reset Password</a> <meta http-equiv="X-UA-Compatible" content="IE=edge">
</body> <meta content="telephone=no" name="format-detection">
</html> <title></title>
`, constants.RESET_PASSWORD_URL+"?token="+token) <!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
.es-button {
}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100%% !important; }</style><![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<div class="es-wrapper-color">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#ffffff"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-email-paddings" valign="top">
<table class="es-content esd-footer-popover" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="esd-stripe" align="center">
<table class="es-content-body" style="border-left:1px solid transparent;border-right:1px solid transparent;border-top:1px solid transparent;border-bottom:1px solid transparent;padding:20px 0px;" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tbody>
<tr>
<td class="esd-structure es-p20t es-p40b es-p40r es-p40l" esd-custom-block-id="8537" align="left">
<table width="100%%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-container-frame" width="518" align="left">
<table width="100%%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-block-image es-m-txt-c es-p5b" style="font-size:0" align="center"><a target="_blank"><img src="%s" alt="icon" style="display: block;" title="icon" width="30"></a></td>
</tr>
<tr>
<td class="esd-block-text es-m-txt-c" align="center">
<h2>Hey there 👋<br></h2>
</td>
</tr>
<tr>
<td class="esd-block-text es-m-txt-c es-p15t" align="center">
<p>We received a request to reset password for email: <b>%s</b>. If this is correct, please reset the password clicking the button below.</p>
</td>
</tr>
<tr>
<td class="esd-block-button es-p20t es-p15b es-p10r es-p10l" align="center"><span class="es-button-border"><a href="%s" class="es-button" target="_blank" style="text-decoration: none;padding:10px;background-color: rgba(59,130,246,1);color: #fff;font-size: 1.2em;">Reset Password</a></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; left: -9999px; top: -9999px; margin: 0px;"></div>
</body>
</html>
`, constants.ORGANIZATION_LOGO, toEmail, constants.AUTHORIZER_URL+"/verify_email"+"?token="+token)
bodyMessage := sender.WriteHTMLEmail(Receiver, Subject, message) bodyMessage := sender.WriteHTMLEmail(Receiver, Subject, message)
return sender.SendMail(Receiver, Subject, bodyMessage) return sender.SendMail(Receiver, Subject, bodyMessage)