New options page
parent
c245c62e0b
commit
217cc4ad84
@ -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);
|
|
@ -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 };
|
@ -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);
|
@ -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,8 +1,103 @@
|
|||||||
const getAccounts = (accounts) => {
|
const removeAccount = ({ school, username }, onFinished) => {
|
||||||
if (accounts.length == 0) {
|
chrome.storage.sync.get('accounts', ({ accounts }) => {
|
||||||
$('.accounts').innerHTML = 'Je hebt nog geen accounts.';
|
const newAccounts = accounts.filter(
|
||||||
return;
|
(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 $ = 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 = () => {
|
chrome.storage.sync.get(
|
||||||
const checked = $('.dark-mode').checked;
|
'dark-mode',
|
||||||
|
({ 'dark-mode': usingDarkMode }) => ($('#dark-mode-stylesheet').disabled = !usingDarkMode)
|
||||||
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();
|
|
||||||
|
@ -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
|
body
|
||||||
background-color: #282a2d
|
background-color: $bg-primary
|
||||||
color: #c5c5c5
|
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
|
.header
|
||||||
|
margin-top: 7.5rem
|
||||||
margin-bottom: 5rem
|
margin-bottom: 5rem
|
||||||
|
|
||||||
text-align: center
|
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
|
||||||
|
Loading…
Reference in new issue