mirror of
https://github.com/Skylar-Tech/node-red-contrib-matrix-chat.git
synced 2025-04-19 20:43:04 -06:00
218 lines
11 KiB
HTML
218 lines
11 KiB
HTML
<style>
|
|
.matrix-loader {
|
|
border: 8px solid #f3f3f3;
|
|
border-radius: 50%;
|
|
border-top: 8px solid #3498db;
|
|
border-bottom: 8px solid #3498db;
|
|
width: 20px;
|
|
height: 20px;
|
|
-webkit-animation: matrix-spin 2s linear infinite;
|
|
animation: matrix-spin 2s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes matrix-spin {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes matrix-spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
RED.nodes.registerType('matrix-server-config',{
|
|
category: 'config',
|
|
color: '#00b7ca',
|
|
credentials: {
|
|
userId: { type: "text", required: true },
|
|
deviceLabel: { type: "text", required: false },
|
|
accessToken: { type: "password", required: true },
|
|
deviceId: { type: "text", required: false },
|
|
url: { type: "text", required: true },
|
|
},
|
|
defaults: {
|
|
name: { value: null },
|
|
autoAcceptRoomInvites: { value: true },
|
|
enableE2ee: { type: "checkbox", value: true },
|
|
global: { type: "checkbox", value: true }
|
|
},
|
|
icon: "matrix.png",
|
|
label: function() {
|
|
return this.name || undefined;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="matrix-server-config">
|
|
<div class="form-row">
|
|
<label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
<input type="text" id="node-config-input-name" placeholder="Name">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="node-config-input-deviceLabel"><i class="fa fa-tag"></i> Device Label</label>
|
|
<input type="text" placeholder="Node-RED" id="node-config-input-deviceLabel">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="node-config-input-url"><i class="fa fa-server"></i> Server URL</label>
|
|
<input type="text" placeholder="https://matrix.org" id="node-config-input-url">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="node-config-input-userId"><i class="fa fa-user"></i> User ID</label>
|
|
<input type="text" placeholder="@example:matrix.org" id="node-config-input-userId">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="node-config-input-password"><i class="fa fa-key"></i> Password</label>
|
|
<input type="password" placeholder="" id="node-config-input-password">
|
|
</div>
|
|
<div class="form-tips" style="margin-bottom: 12px;">
|
|
Password is never saved and is only used to fetch an access token using the button below.
|
|
</div>
|
|
<pre class="form-tips" id="matrix-chat-login-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;display:none;"></pre>
|
|
<pre class="form-tips" id="matrix-chat-login-success" style="color: #155724;background-color: #d4edda;border-color: #c3e6cb;margin-bottom: 12px;display:none;"></pre>
|
|
<button class="ui-button ui-corner-all ui-widget primary" id="matrix-login-btn">Update Access Token</button>
|
|
<div class="matrix-loader" id="matrix-access-token-loader" style="display:none;"></div>
|
|
|
|
<div class="form-row">
|
|
<label for="node-config-input-accessToken"><i class="fa fa-key"></i> Access Token</label>
|
|
<input type="text" id="node-config-input-accessToken">
|
|
</div>
|
|
<div class="form-tips" style="margin-bottom: 12px;">
|
|
You can either provide/generate an access token yourself or use the login button above to do it automatically. View the <a href="javascript:$('#red-ui-tab-help-link-button').click();">node docs</a> to figure out how to generate an Access Token manually. If you generated a user with shared secret registration you will already have an access token you can place here.
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="node-config-input-deviceId"><i class="fa fa-desktop"></i> Device ID</label>
|
|
<input type="text" id="node-config-input-deviceId">
|
|
</div>
|
|
<div class="form-tips" style="margin-bottom: 12px;">
|
|
If you have a Device ID for this auth token you can place it here, or you can leave it blank to have one automatically generated (this field will always be blank if auto generated as it is saved internally). DO NOT manually set one, this must be generated by the server.<br />
|
|
WARNING: If you change this after the client has already initialized you will break encryption. Your Device ID is tied to your encryption keys.
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<input
|
|
type="checkbox"
|
|
id="node-config-input-autoAcceptRoomInvites"
|
|
style="width: auto; margin-left: 125px; vertical-align: top"
|
|
/>
|
|
<label for="node-config-input-autoAcceptRoomInvites" style="width: auto;max-width:50%;">
|
|
Auto join invited rooms
|
|
</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<input
|
|
type="checkbox"
|
|
id="node-config-input-enableE2ee"
|
|
style="width: auto; margin-left: 125px; vertical-align: top"
|
|
/>
|
|
<label for="node-config-input-enableE2ee" style="width: auto;max-width:50%;">
|
|
Enable end-to-end encryption
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<input
|
|
type="checkbox"
|
|
id="node-config-input-global"
|
|
style="width: auto; margin-left: 125px; vertical-align: top"
|
|
/>
|
|
<label for="node-config-input-global" style="width: auto">
|
|
Global access to Matrix Client
|
|
</label>
|
|
<div class="form-tips" style="margin-bottom: 12px;">
|
|
If global access is enabled you can access the client directly within a Function node. This way you can do <a href="https://github.com/Skylar-Tech/node-red-contrib-matrix-chat/tree/master/examples#use-function-node-to-run-any-command" target="_blank">whatever you want</a> with the client. Example:<br>
|
|
<code style="white-space: normal;">let client = global.get("matrixClient['@bot:example.com']");</code>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$("#matrix-login-btn").on("click", function() {
|
|
function prettyPrintJson(json) {
|
|
try{
|
|
return typeof json === 'object' ? JSON.stringify(json, null, 2) : json;
|
|
}
|
|
catch (error){
|
|
return json;
|
|
}
|
|
}
|
|
|
|
let userId = $("#node-config-input-userId").val(),
|
|
userPassword = $("#node-config-input-password").val(),
|
|
serverUrl = $("#node-config-input-url").val();
|
|
|
|
if(!userId) {
|
|
alert("User ID is required to fetch access token.");
|
|
return;
|
|
}
|
|
if(!userPassword) {
|
|
alert("Password is required to fetch access token.");
|
|
return;
|
|
}
|
|
if(!serverUrl) {
|
|
alert("Server URL is required to fetch access token.");
|
|
return;
|
|
}
|
|
|
|
$("#matrix-login-btn, #matrix-chat-login-error, #matrix-chat-login-success").hide();
|
|
$("#matrix-access-token-loader").show();
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'matrix-chat/login',
|
|
dataType: 'json',
|
|
data: {
|
|
'userId': userId,
|
|
'password': userPassword,
|
|
'baseUrl': serverUrl,
|
|
'displayName': $("#node-config-input-deviceLabel").val(),
|
|
}
|
|
}).then(
|
|
function(data) {
|
|
if(data.result && data.result === 'ok') {
|
|
$("#matrix-chat-login-error").hide();
|
|
$("#matrix-chat-login-success")
|
|
.html("Login Successful! Auth Token and Device ID have been set below.")
|
|
.show();
|
|
|
|
$("#node-config-input-accessToken").val(data.token);
|
|
$("#node-config-input-deviceId").val(data.device_id);
|
|
} else if(data.result && data.result === 'error') {
|
|
$("#matrix-chat-login-success").hide();
|
|
$("#matrix-chat-login-error")
|
|
.html(data.message ? ('Failed to login: <br />' + prettyPrintJson(data.message)) : 'Failed to login')
|
|
.show();
|
|
}
|
|
$("#matrix-login-btn").show();
|
|
$("#matrix-access-token-loader").hide();
|
|
}, function() {
|
|
$("#matrix-chat-login-success").hide();
|
|
$("#matrix-chat-login-error")
|
|
.html("Failed to login due to server error communicating with Node-RED")
|
|
.show();
|
|
$("#matrix-login-btn").show();
|
|
$("#matrix-access-token-loader").hide();
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
</script>
|
|
|
|
<script type="text/html" data-help-name="matrix-server-config">
|
|
<h3>Details</h3>
|
|
<p>Matrix client connection configuration</p>
|
|
|
|
<h3>Setting up an account</h3>
|
|
<div>
|
|
<p>
|
|
You need an account for your client to use. If you are going to be using End-to-End Encryption you should generate the bot and only use it within Node-RED otherwise if you have other clients connected on the same user it could cause problems with e2ee (key sharing is currently not supported).
|
|
</p>
|
|
<p>If you have access to the server directly you can use Shared Secret Registration as described <a href="https://github.com/Skylar-Tech/node-red-contrib-matrix-chat/tree/master/examples#create-user-with-shared-secret-registration" target="_blank" style="text-decoration: underline;">here</a>.</p>
|
|
<p>If this is a server you do not administrate/have access to follow these instructions:</p>
|
|
<ol><li>In a private/incognito browser window, open Element.</li><li>Log in to the account you want to get the access token for, such as the bot's account. <strong>Do not setup key storage</strong>.</li><li>Click on the bot's name in the top left corner then "Settings".</li><li>(Optional) Set your bot's display name and avatar.</li><li>Click the "Help & About" tab (left side of the dialog).</li><li>Scroll to the bottom and click the <code><click to reveal></code> part of <code>Access Token: <click to reveal></code>.</li><li>Copy your access token to a safe place, like the bot's configuration file.</li><li><strong>Do not log out.</strong> Instead, just close the window. If you used a private browsing session, you should be able to still use Element for your own account. Logging out deletes the access token from the server, making the bot unable to use it.</li></ol>
|
|
</div>
|
|
</script>
|