New options page

master
Guusvanmeerveld 3 years ago
parent c245c62e0b
commit 217cc4ad84

@ -9,7 +9,7 @@
"sass": "^1.36.0"
},
"scripts": {
"dev": "node src/builder/watch",
"dev": "node src/builder && node src/builder/watch",
"build": "node src/builder",
"prettify": "prettier --write src"
},

@ -1,27 +0,0 @@
// Runs when the extensions is updated
const updated = (tabId, changeInfo, tab) => {
if (changeInfo.status == 'complete' && tab.active) {
chrome.tabs.executeScript(tab.ib, {
file: 'login.js',
});
}
};
// Run when extensions is installed
const installed = () => {
window.open('@pages/options.html', '_blank');
chrome.storage.sync.get('accounts', (accounts) => {
chrome.storage.sync.set({
enabled: true,
accounts: accounts || [],
});
});
chrome.browserAction.setBadgeText({
text: 'ON',
});
};
chrome.tabs.onUpdated.addListener(updated);
chrome.runtime.onInstalled.addListener(installed);

@ -57,7 +57,6 @@ const fileBuilder = async (file, outPath, fileType) => {
file = file.replace(sassExtension, '.min.css');
}
const path = file.split('/');
const fileName = path[path.length - 1];
@ -106,13 +105,12 @@ const replaceFileContents = (data) => {
Object.keys(config.paths).forEach((key) => {
data = data.replace(new RegExp(key, 'g'), '/' + config.paths[key]);
});
}
data = data.replace(new RegExp(sassExtension, 'g'), '.min.css');
if (process.env.TARGET_BROWSER != 'chrome') {
data = data.replace(new RegExp('chrome.', 'g'), 'browser.')
data = data.replace(new RegExp('chrome.', 'g'), 'browser.');
}
return data;

@ -1,31 +1,15 @@
const { join } = require('path');
const { program } = require('commander');
const config = require(join(process.cwd(), 'builder.config.js'));
const validBrowsers = ['chrome', 'firefox', 'edge']
const srcDir = join(process.cwd(), config.root);
const distDir = join(process.cwd(), config.out);
const { builder } = require('./builders');
program
.option(`-t, --target <${validBrowsers.join(' | ')}>`, 'set the target browser')
program.parse(process.argv);
const options = program.opts();
const target = options.target.toLowerCase() || 'chrome'
if (!validBrowsers.includes(target)) {
console.log('Error: invalid target browser, please specify one of the following: ' + validBrowsers.join(', '));
process.exit();
}
const { target } = require('./options');
process.env.TARGET_BROWSER = target;
target();
if (config.interpreter) {
config.interpreter.forEach((interpreter) => {

@ -0,0 +1,25 @@
const { program } = require('commander');
const validBrowsers = ['chrome', 'firefox', 'edge'];
const target = () => {
program.option(`-t, --target <${validBrowsers.join(' | ')}>`, 'set the target browser');
program.parse(process.argv);
const options = program.opts();
const target = (options.target || 'chrome').toLowerCase();
if (!validBrowsers.includes(target)) {
console.log(
'error: invalid target browser, please specify one of the following: ' +
validBrowsers.join(', ')
);
process.exit();
}
process.env.TARGET_BROWSER = target;
};
module.exports = { target };

@ -12,8 +12,14 @@ const watcher = chokidar.watch(srcDir, {
persistent: true,
});
const { target } = require('./options');
target();
// Check for changes in the src directory
watcher.on('change', async (path) => {
console.clear();
const relativePath = path.replace(srcDir + '/', '');
const splittedPath = relativePath.split('/');

@ -0,0 +1,45 @@
/**
* Runs when the extensions is updated
* @param {string} tabId
* @param {*} changeInfo
* @param {*} tab
*/
const updated = (tabId, changeInfo, tab) => {
if (changeInfo.status == 'complete' && tab.active) {
chrome.tabs.executeScript(tab.ib, {
file: 'login.js',
});
}
};
/**
* Run when extensions is installed
*/
const installed = () => {
window.open('@pages/options.html', '_blank');
getAccounts((accounts) => {
chrome.storage.sync.set(
{
enabled: true,
accounts: accounts || [],
},
() => getAccounts(console.log)
);
});
chrome.browserAction.setBadgeText({
text: 'ON',
});
};
/**
* Get the all the accounts that are currently added
* @param {() => void} callback
*/
const getAccounts = (callback) => {
chrome.storage.sync.get('accounts', ({ accounts }) => callback(accounts));
};
chrome.tabs.onUpdated.addListener(updated);
chrome.runtime.onInstalled.addListener(installed);

@ -1,8 +1,7 @@
const $ = document.querySelector.bind(document);
const getSettings = (callback) => {
chrome.storage.sync.get(['school', 'number', 'password'], callback);
};
const getSettings = (callback) =>
chrome.storage.sync.get('accounts', ({ current, accounts }) => callback(accounts[current]));
const login = () => {
getSettings(async ({ school, number, password }) => {

@ -6,7 +6,7 @@
"options_page": "@pages/options.html",
"homepage_url": "http://mb-o.nl/autologin",
"background": {
"scripts": ["/background.js"],
"scripts": ["/events.js"],
"persistent": true
},
"browser_action": {

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Account toevoegen | Magister Auto-Login</title>
<link rel="stylesheet" href="@libraries/fonts.css" />
<link rel="stylesheet" href="@libraries/normalize.css" />
<link rel="stylesheet" href="@libraries/milligram.css" />
<link rel="stylesheet" href="@stylesheets/globals.sass" />
<link rel="stylesheet" href="@stylesheets/account.sass" />
<link rel="stylesheet" id="dark-mode-stylesheet" href="@stylesheets/dark-mode.sass" />
</head>
<body>
<div class="container wrapper">
<form id="newAccountForm" class="form" action="" method="POST">
<h1 class="header">Account toe voegen</h1>
<label for="school">School</label>
<input
autofocus
required
type="text"
placeholder="Vul de naam van je school (gedeeltelijk) in"
name="school"
id="school"
/>
<br />
<label for="username">Gebruikersnaam / Leerlingnummer</label>
<input
required
type="text"
placeholder="Vul je gebruikersnaam / leerlingnummer in"
name="username"
id="username"
/>
<br />
<label for="username">Wachtwoord</label>
<input
required
type="password"
placeholder="Vul je wachtwoord in"
name="password"
id="password"
/>
<div id="message"></div>
<label for="primaryAccount"
><input
type="checkbox"
name="primary-account"
class="primary-account"
id="primaryAccount"
/>Hoofd account</label
>
<input type="submit" class="button" value="Voeg toe" />
</form>
</div>
<script src="@scripts/constants.js"></script>
<script src="@scripts/add-account.js"></script>
<script src="@scripts/dark-mode.js"></script>
</body>
</html>

@ -1,21 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Options | Magister Auto-Login</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Opties | Magister Auto-Login</title>
<link rel="stylesheet" href="@libraries/fonts.css" />
<link rel="stylesheet" href="@libraries/normalize.css" />
<link rel="stylesheet" href="@libraries/milligram.css" />
<link rel="shortcut icon" href="@icons/128x.png" />
<link rel="stylesheet" href="@stylesheets/options.sass" />
<link rel="stylesheet" href="@stylesheets/materials-switches.sass" />
<link rel="stylesheet" id="dark-mode-stylesheet" disabled href="@stylesheets/dark-mode.sass" />
</head>
<link rel="stylesheet" href="@stylesheets/globals.sass" />
<link rel="stylesheet" id="dark-mode-stylesheet" href="@stylesheets/dark-mode.sass" />
</head>
<body>
<input type="checkbox" class="dark-mode" />
<div class="material-switch dark-mode-switch">
<label for="dark-mode-button"></label>
<input type="checkbox" id="dark-mode-button" class="dark-mode" />
</div>
<div class="container">
<div class="header">
@ -23,7 +32,12 @@
<h1>Magister Auto Login</h1>
<i><small>Gemaakt door Martijn Oosterhuis & Guus van Meerveld</small></i>
<i
><small
>Gemaakt door <a href="https://mboosterhuis.nl">Martijn Oosterhuis</a> &
<a href="https://guusvanmeerveld.dev"> Guus van Meerveld</a></small
></i
>
</div>
<h2>Accounts</h2>
@ -31,6 +45,7 @@
</div>
<script src="@scripts/constants.js"></script>
<script src="@scripts/dark-mode-button.js"></script>
<script src="@scripts/dark-mode.js"></script>
<script src="@scripts/accounts.js"></script>
</body>

@ -1,8 +1,103 @@
const getAccounts = (accounts) => {
if (accounts.length == 0) {
$('.accounts').innerHTML = 'Je hebt nog geen accounts.';
return;
const removeAccount = ({ school, username }, onFinished) => {
chrome.storage.sync.get('accounts', ({ accounts }) => {
const newAccounts = accounts.filter(
(account) => !(account.username == username && account.school == school)
);
chrome.storage.sync.set({ accounts: newAccounts }, onFinished);
});
};
const makePrimaryAccount = (username, onFinished) => {
chrome.storage.sync.set({ primaryAccount: username }, onFinished);
}
const createAccountElement = ({ username, school }, primaryAccount) => {
const _account = create('div');
_account.id = username;
_account.classList.add('account');
_account.classList.add('bg-secondary');
/**
* Display username
*/
const _name = create('h1');
_name.innerHTML = username || 'Onbekend';
/**
* Display school
*/
const _school = create('h3');
_school.innerHTML = school || 'Geen school';
if (primaryAccount != username) {
/**
* A button to remove the account
*/
const _removeButton = create('a');
_removeButton.innerHTML = 'Verwijder';
_removeButton.classList.add('remove-button');
_removeButton.addEventListener('click', (e) => {
e.preventDefault();
removeAccount({ username, school }, () => location.reload());
});
/**
* Display wether this is the primary account
*/
const _primaryAccount = create('a');
_primaryAccount.innerHTML = 'Maak hoofd account';
_primaryAccount.classList.add('make-primary-account');
_primaryAccount.addEventListener('click', (e) => {
e.preventDefault();
makePrimaryAccount(username, () => location.reload());
})
_account.appendChild(_primaryAccount);
_account.appendChild(_removeButton);
} else {
}
_account.appendChild(_name);
_account.appendChild(_school);
$('.accounts').appendChild(_account);
};
const getSettings = ({ accounts, primaryAccount }) => {
const _addAccountLink = create('a');
_addAccountLink.classList.add('button');
_addAccountLink.href = '@pages/account.html';
if (!accounts.length) {
/**
* Display message saying no accounts are added
*/
const _noAccounts = create('p');
_noAccounts.innerHTML = 'Je hebt nog geen accounts.';
_addAccountLink.innerHTML = 'Voeg er een toe';
$('.accounts').appendChild(_noAccounts);
} else {
accounts.forEach((account) => createAccountElement(account, primaryAccount));
_addAccountLink.innerHTML = 'Voeg er nog een toe';
}
$('.accounts').appendChild(_addAccountLink);
};
const accounts = chrome.storage.sync.get('accounts', getAccounts);
const accounts = chrome.storage.sync.get(['accounts', 'primaryAccount'], getSettings);

@ -0,0 +1,40 @@
$('#newAccountForm').addEventListener('submit', (e) => {
e.preventDefault();
chrome.storage.sync.get('accounts', ({ accounts }) => {
const school = $('#school').value;
const username = $('#username').value;
if (accounts.find((account) => account.username == username && account.school == school)) {
const _errorMessage = create('p');
_errorMessage.innerHTML = 'Account bestaat al.';
_errorMessage.classList.add('error-message');
$('#message').innerHTML = '';
$('#message').appendChild(_errorMessage);
return;
}
const newAccount = {
school,
username,
password: $('#password').value,
};
if (accounts.length == 0 || $('#primaryAccount').checked) {
chrome.storage.sync.set({ primaryAccount: username });
}
chrome.storage.sync.set(
{
accounts: [...accounts, newAccount],
},
() => {
location.href = '@pages/options.html';
}
);
});
});

@ -1 +1,2 @@
const $ = document.querySelector.bind(document);
const create = document.createElement.bind(document);

@ -0,0 +1,18 @@
const toggleDarkMode = () => {
const checked = $('.dark-mode').checked;
chrome.storage.sync.set({
'dark-mode': checked,
});
$('#dark-mode-stylesheet').disabled = !checked;
};
const initDarkMode = () =>
chrome.storage.sync.get('dark-mode', ({ 'dark-mode': usingDarkMode }) => {
$('.dark-mode').checked = usingDarkMode;
});
$('.dark-mode').addEventListener('click', toggleDarkMode);
initDarkMode();

@ -1,19 +1,4 @@
const toggleDarkMode = () => {
const checked = $('.dark-mode').checked;
chrome.storage.sync.set({
'dark-mode': checked,
});
$('#dark-mode-stylesheet').disabled = !checked;
};
const initDarkMode = () =>
chrome.storage.sync.get('dark-mode', (usingDarkMode) => {
$('#dark-mode-stylesheet').disabled = !usingDarkMode;
$('.dark-mode').checked = usingDarkMode;
});
$('.dark-mode').addEventListener('click', toggleDarkMode);
initDarkMode();
chrome.storage.sync.get(
'dark-mode',
({ 'dark-mode': usingDarkMode }) => ($('#dark-mode-stylesheet').disabled = !usingDarkMode)
);

@ -1,77 +0,0 @@
d('save').addEventListener('click', save);
qAll('.login').forEach((s) => {
s.addEventListener('keydown', (e) => {
if (e.key == 'Enter') {
if (e.target.id == 'school') {
d('number').focus();
}
if (e.target.id == 'number') {
d('password').focus();
}
if (e.target.id == 'password') {
save();
}
}
});
});
function save() {
var school = d('school').value;
var number = d('number').value;
var password = d('password').value;
try {
chrome.storage.sync.set({
school: school,
number: number,
password: password,
});
d('save').innerHTML = 'Opgeslagen!';
} catch (e) {
d('save').innerHTML = 'Fout';
d('save').className = 'btn btn-danger float-right';
console.error(e);
}
}
function onLoad() {
chrome.storage.sync.get(['school', 'number', 'password'], function (result) {
if (result.school !== undefined) {
d('school').value = result.school;
}
if (result.number !== undefined) {
d('number').value = result.number;
}
if (result.password !== undefined) {
d('password').value = 'lolleukgeprobeerd';
}
});
chrome.storage.sync.get(['enabled'], function (result) {
d('switch').checked = result.enabled;
});
chrome.storage.sync.get(['darkmode'], function (result) {
d('dark-mode').checked = result.darkmode;
d('dark-link').disabled = !d('dark-mode').checked;
});
d('switch').addEventListener('click', toggle);
}
function toggle() {
var checked = d('switch').checked;
chrome.storage.sync.set({
enabled: checked,
});
chrome.browserAction.setBadgeText({
text: checked ? 'ON' : 'OFF',
});
}
onLoad();

@ -0,0 +1,18 @@
.wrapper
min-height: 100vh
display: flex
align-items: center
justify-content: center
.form
width: 100%
.header
text-align: center
.error-message
color: red
.primary-account
margin-right: 1rem

@ -1,3 +1,31 @@
$text: #c5c5c5
$bg-primary: #282a2d
$bg-secondary: #2d2f31
$borders: #373a3d
body
background-color: #282a2d
color: #c5c5c5
background-color: $bg-primary
color: $text
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='week'],
input:not([type]),
textarea,
select
border-color: $borders
color: $text
.bg-secondary
background-color: $bg-secondary

@ -0,0 +1,2 @@
.bg-secondary
background-color: #f3f3f3

@ -1,4 +1,30 @@
.header
margin-top: 7.5rem
margin-bottom: 5rem
text-align: center
.account
border-radius: 5px
padding: 2rem
margin-bottom: 2rem
position: relative
a
position: absolute
cursor: pointer
.remove-button
right: 2rem
bottom: 2rem
.make-primary-account
right: 2rem
top: 2rem
.dark-mode-switch
position: absolute
right: 2rem
top: 2rem

@ -1,15 +1 @@
body
min-width: 20rem
min-height: 24rem
.darkcheck
position: absolute
margin: 7px
right: 0px
.enable
position: absolute
bottom: 0
left: 0
margin-bottom: 10px
margin-left: 20px

Loading…
Cancel
Save