New options page
Guusvanmeerveld
3 years ago
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) => {
|
||||
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
|
||||
|
||||
Loading…
Reference in new issue