Files
libreevent/src/server/backend/plugins/others/newsletter/html/compose.html

118 lines
5.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<!-- Include Quill stylesheet -->
<meta charset="utf-8">
<title>New Mail :: Webmail | Language School Hossegor - Admin</title>
<link rel="stylesheet" href="/admin/plugins/newsletter/css/mailCompose.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
</head>
<body>
<div id="top-bar">
<div class="top-toolbar">
<a href="/admin/plugins" title="Back to admin panel" id="back" class="top-buttons"><span class="material-symbols-outlined">arrow_back</span></a>
</div>
<p id="title">Newsletter plugin - libreevent</p>
<p id="spacer"></p>
</div>
<div class="mail-app">
<h1>New newsletter</h1>
<table>
<tr>
<td>
<label for="subject">Subject:</label>
</td><td>
<input type="text" name="subject" id="subject"><br>
</td>
</tr>
</table>
<!-- Create the toolbar container -->
<div id="toolbar">
<span class="ql-formats">
<select class="ql-font" title="Fonts">
<option selected="" title="Default"></option>
<option value="serif" title="Serif"></option>
<option value="monospace" title="Monospace"></option>
</select>
<select class="ql-size" title="Font size">
<option value="small" title="Small"></option>
<option selected="" title="Default"></option>
<option value="large" title="Large"></option>
<option value="huge" title="Huge"></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-bold" title="Bold"></button>
<button class="ql-italic" title="Italic"></button>
<button class="ql-underline" title="Underlined"></button>
<button class="ql-strike" title="Strikethrough"></button>
</span>
<span class="ql-formats">
<select class="ql-color" title="Text colour"></select>
<select class="ql-background" title="Background colour"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered" title="Ordered list"></button>
<button class="ql-list" value="bullet" title="Bullet points"></button>
<select class="ql-align" title="Alignment">
<option selected="" title="left"></option>
<option value="center" title="center"></option>
<option value="right" title="right"></option>
<option value="justify" title="block"></option>
</select>
</span>
<span class="ql-formats">
<button class="ql-link" title="Insert link"></button>
<button class="ql-image" title="Insert image"></button>
</span>
</div>
<!-- Create the editor container -->
<div id="editor">
</div>
<button onclick="sendMail()"><span class="material-symbols-outlined">send</span>Send</button>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var editor = new Quill( '#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow',
} );
function sendMail () {
if ( !document.getElementById( 'subject' ).value ) {
alert( 'An email subject is required!' );
return;
}
let dat = { 'subject': document.getElementById( 'subject' ).value, 'message': document.getElementsByClassName( 'ql-editor' )[0].innerHTML };
let options = {
method: 'post',
body: JSON.stringify( dat ),
headers: {
'Content-Type': 'application/json',
'charset': 'utf-8'
},
};
fetch( '/admin/plugins/newsletter/send', options ).then( res => {
if ( res.status === 200 ) {
alert( 'Newsletter sent successfully' );
} else if ( res.status === 403 ) {
alert( 'It appears that you have been logged out or have logged out somewhere else. Please ensure that you are logged in and try again!' );
} else {
alert( 'There was an error sending the mail. Please try again. If the error persists, please contact the developer and tell this status code: ' + res.status );
}
} );
document.getElementById( 'subject' ).value = '';
document.getElementsByClassName( 'ql-editor' )[0].innerHTML = '';
};
</script>
</body>
</html>