Metaunix/archon-electron
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases 1 Wiki Activity

Added Grunt to support asset pipelines and pre-processors; added SASS, Twig, and CoffeeScript to create the app

Browse Source
This commit is contained in:
Gregory Ballantine 2022-05-21 20:44:38 -04:00
parent 88c00043b7
commit 866754cf3f
15 changed files with 3056 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.gitignore vendored
View File

@ -1 +1,9 @@
# Node.js modules
node_modules node_modules
# Generated HTML, CSS and JS files
public/
# SASS cache files
.sass-cache/

71
Gruntfile.js Normal file
View File

@ -0,0 +1,71 @@
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
expand: true,
cwd: 'assets/sass',
src: ['*.sass'],
dest: 'public/styles',
ext: '.css'
}]
}
},
coffee: {
options: {
sourceMap: true,
style: 'compressed'
},
files: {
expand: true,
flatten: true,
cwd: 'assets/coffee',
src: ['*.coffee'],
dest: 'public/js',
ext: '.js'
}
},
twigRender: {
compile: {
files : [{
data: {},
expand: true,
cwd: 'assets/twig',
src: ['**/*.twig', '!**/_*.twig'],
dest: 'public',
ext: '.html'
}]
},
},
copy: {
main: {
files: [{
expand: true,
cwd: 'assets/static',
src: ['**'],
dest: 'public/',
}]
}
}
});
// Load task plugins
grunt.loadNpmTasks('grunt-twig-render');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-copy');
// Default task(s).
grunt.registerTask('default', ['twigRender', 'sass', 'coffee', 'copy']);
};

6
js/index.js → assets/coffee/index.coffee
View File

@ -1,3 +1,3 @@
window.onload = function(){ window.onload = ->
document.getElementById('ldapHost').textContent = localStorage.getItem('ldap_hostname'); document.getElementById('ldapHost').textContent = localStorage.getItem('ldap_hostname')
}; return

23
assets/coffee/login.coffee Normal file
View File

@ -0,0 +1,23 @@
ldap = require('ldapjs')
loginForm = (event) ->
event.preventDefault()
bindHost = document.forms.loginForm.ldap_host.value
bindDn = document.forms.loginForm.bind_dn.value
bindPw = document.forms.loginForm.bind_pw.value
client = ldap.createClient(url: 'ldap://' + bindHost + '/')
client.bind bindDn, bindPw, (err) ->
if err
document.querySelector('h1').textContent = 'error'
else
document.querySelector('h1').textContent = 'Logged in!'
localStorage.setItem('ldap_hostname', document.forms.loginForm.ldap_host.value)
localStorage.setItem('ldap_bind_dn', document.forms.loginForm.bind_dn.value)
localStorage.setItem('ldap_bind_pw', document.forms.loginForm.bind_pw.value)
window.location.href = 'index.html'
return
return
window.onload = ->
document.getElementById('loginForm').addEventListener 'submit', loginForm
return

10
assets/sass/archon.sass Normal file
View File

@ -0,0 +1,10 @@
body
background: white
a
color: cornflowerblue
input[type=submit],
button
background-color: cornflowerblue
color: white

1
assets/static/styles/skeleton-2.0.4.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
assets/twig/index.twig Normal file
View File

@ -0,0 +1,11 @@
{% extends 'layout.twig' %}
{% block scripts %}
<script src="./js/index.js" charset="utf-8"></script>
{% endblock %}
{% block content %}
<h1>Users Page</h1>
<p id="ldapHost"></p>
{% endblock %}

13
views/index.html → assets/twig/layout.twig
View File

@ -1,17 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="../styles/archon.css" rel="stylesheet"> <link rel="stylesheet" href="./styles/skeleton-2.0.4.min.css">
<link rel="stylesheet" href="./styles/archon.css">
<title>Hello World!</title> <title>Hello World!</title>
<script src="../js/index.js"></script> {% block scripts %}{% endblock %}
</head> </head>
<body> <body>
<h1>Users Page</h1> <div class="container">
{% block content %}{% endblock %}
<p id="ldapHost"></p> </div>
We are using Node.js <span id="node-version"></span>, We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>, Chromium <span id="chrome-version"></span>,

28
assets/twig/login.twig Normal file
View File

@ -0,0 +1,28 @@
{% extends 'layout.twig' %}
{% block scripts %}
<script src="./js/login.js" charset="utf-8"></script>
{% endblock %}
{% block content %}
<h1>Login</h1>
<form id="loginForm">
<label>
LDAP Host:
<input type="text" name="ldap_host" placeholder="Enter LDAP host...">
</label>
<label>
Bind DN:
<input type="text" name="bind_dn" placeholder="Enter bind DN...">
</label>
<label>
Bind Password:
<input type="text" name="bind_pw" placeholder="Enter bind DN...">
</label>
<input type="submit" name="bind_submit" value="Login">
</form>
{% endblock %}

33
js/login.js
View File

@ -1,33 +0,0 @@
const ldap = require('ldapjs');
window.onload = function(){
document.getElementById('loginForm').addEventListener('submit', loginForm);
};
// do stuff when login form is submitted
function loginForm(event) {
event.preventDefault();
var bindHost = document.forms.loginForm.ldap_host.value;
var bindDn = document.forms.loginForm.bind_dn.value;
var bindPw = document.forms.loginForm.bind_pw.value;
const client = ldap.createClient({
url: 'ldap://' + bindHost + '/'
});
client.bind(bindDn, bindPw, (err) => {
if (err) {
document.querySelector("h1").textContent = 'error';
} else {
document.querySelector("h1").textContent = 'Logged in!';
localStorage.setItem('ldap_hostname', document.forms.loginForm.ldap_host.value);
localStorage.setItem('ldap_bind_dn', document.forms.loginForm.bind_dn.value);
localStorage.setItem('ldap_bind_pw', document.forms.loginForm.bind_pw.value);
window.location.href = 'index.html';
}
});
}

2
main.js
View File

@ -15,7 +15,7 @@ function createWindow () {
}); });
// and load the index.html of the app. // and load the index.html of the app.
mainWindow.loadFile('views/login.html'); mainWindow.loadFile('public/login.html');
// Open the DevTools. // Open the DevTools.
// mainWindow.webContents.openDevTools() // mainWindow.webContents.openDevTools()

2904
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -17,7 +17,12 @@
"author": "GitHub", "author": "GitHub",
"license": "CC0-1.0", "license": "CC0-1.0",
"devDependencies": { "devDependencies": {
"electron": "^18.2.4" "electron": "^18.2.4",
"grunt": "^1.5.3",
"grunt-contrib-coffee": "^2.1.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-sass": "^2.0.0",
"grunt-twig-render": "^1.8.3"
}, },
"dependencies": { "dependencies": {
"ldapjs": "^2.3.2" "ldapjs": "^2.3.2"

5
styles/archon.css
View File

@ -1,5 +0,0 @@
/* styles.css */
body{
background: pink;
}

37
views/login.html
View File

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="../styles/archon.css" rel="stylesheet">
<title>Hello World!</title>
<script src="../js/login.js"></script>
</head>
<body>
<h1>Login</h1>
<form id="loginForm">
<label>
LDAP Host:
<input type="text" name="ldap_host" placeholder="Enter LDAP host...">
</label>
<label>
Bind DN:
<input type="text" name="bind_dn" placeholder="Enter bind DN...">
</label>
<label>
Bind Password:
<input type="text" name="bind_pw" placeholder="Enter bind DN...">
</label>
<input type="submit" name="bind_submit" value="Login">
</form>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>