Skip to content

Commit

Permalink
add new api access confirmation page
Browse files Browse the repository at this point in the history
  • Loading branch information
aopell committed Mar 4, 2022
1 parent c1156ea commit 3cf30bf
Show file tree
Hide file tree
Showing 9 changed files with 322 additions and 106 deletions.
103 changes: 103 additions & 0 deletions css/all.css
Original file line number Diff line number Diff line change
Expand Up @@ -889,4 +889,107 @@ a._3_bfp {
border-radius: 5px;
color: white;
background: var(--primary-color);
}

#center-wrapper.splus-api-key-page {
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#center-inner.splus-api-key-page {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-width: 600px;
border: 2px solid black;
border-radius: 10px;
}

#center-inner.splus-api-key-page #center-top .page-title,
#center-inner.splus-api-key-page #content-wrapper form p.description.warning,
#center-inner.splus-api-key-page .submit-span-wrapper {
display: none;
}

.splus-allow-access {
display: block !important;
margin: 10px 0 !important;
}

#edit-reveal {
width: 100%;
}

.splus-permissions-icon {
width: 256px;
padding: 10px;
}

.splus-permissions-icon-wrapper {
display: flex;
justify-content: center;
}

.splus-permissions-wrapper {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.splus-permissions-box {
width: 500px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.splus-permissions-header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.splus-permissions-title {
text-align: center;
padding-bottom: 10px;
width: 400px;
}

.splus-permissions-description {
text-align: center;
font-size: 14px;
width: 400px;
}

.splus-permissions-description strong {
font-size: 16px;
text-decoration: underline;
}

.splus-permissions-section {
padding-top: 10px;
}

.splus-permissions-features-list {
text-align: left;
font-size: 14px;
padding: 0 100px;
list-style: disc !important;
list-style-position: inside !important;
}

.splus-permissions-never-list {
text-align: left;
font-size: 14px;
padding: 0 10%;
list-style: disc !important;
list-style-position: inside !important;
}
Binary file added imgs/logo-full.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 38 additions & 27 deletions js/all.js
Original file line number Diff line number Diff line change
Expand Up @@ -1091,36 +1091,47 @@ async function createQuickAccess() {
])
);

let sectionsList = (await fetchApiJson(`users/${getUserId()}/sections`)).section;
try {
let sectionsList = (await fetchApiJson(`users/${getUserId()}/sections`)).section;

if (!sectionsList || sectionsList.length == 0) {
wrapper.appendChild(createElement("p", ["quick-access-no-courses"], { textContent: "No courses found" }));
} else {
let courseOptionsButton;
let iconImage;
let courseIconsContainer;
for (let section of sectionsList) {
wrapper.appendChild(createElement("div", ["quick-access-course"], {}, [
(iconImage = createElement("div", ["splus-course-icon"], { dataset: { courseTitle: `${section.course_title}: ${section.section_title}` } })),
createElement("a", ["splus-track-clicks", "quick-course-link"], { textContent: `${section.course_title}: ${section.section_title}`, href: `/course/${section.id}`, dataset: { splusTrackingTarget: "quick-access-course-link", splusTrackingLabel: "Quick Access" } }),
(courseIconsContainer = createElement("div", ["icons-container"], {}, [
createElement("a", ["icon", "icon-grades", "splus-track-clicks"], { href: `/course/${section.id}/student_grades`, title: "Grades", dataset: { splusTrackingTarget: "quick-access-grades-link", splusTrackingLabel: "Quick Access" } }),
createElement("a", ["icon", "icon-mastery", "splus-track-clicks"], { href: `/course/${section.id}/student_mastery`, title: "Mastery", dataset: { splusTrackingTarget: "quick-access-mastery-link", splusTrackingLabel: "Quick Access" } }),
(courseOptionsButton = createElement("a", ["icon", "icon-settings", "splus-track-clicks"], { href: "#", dataset: { splusTrackingTarget: "quick-access-settings-link", splusTrackingLabel: "Quick Access" } }))
]))
]));

let quickLink = Setting.getNestedValue("courseQuickLinks", section.id);
if (quickLink && quickLink !== "") {
courseIconsContainer.prepend(createElement("a", ["icon", "icon-quicklink", "splus-track-clicks"], { href: quickLink, title: `Quick Link \n(${quickLink})`, dataset: { splusTrackingTarget: "quick-access-quicklink-link", splusTrackingLabel: "Quick Access" } }))
}
if (!sectionsList || sectionsList.length == 0) {
wrapper.appendChild(createElement("p", ["quick-access-no-courses"], { textContent: "No courses found" }));
} else {
let courseOptionsButton;
let iconImage;
let courseIconsContainer;
for (let section of sectionsList) {
wrapper.appendChild(createElement("div", ["quick-access-course"], {}, [
(iconImage = createElement("div", ["splus-course-icon"], { dataset: { courseTitle: `${section.course_title}: ${section.section_title}` } })),
createElement("a", ["splus-track-clicks", "quick-course-link"], { textContent: `${section.course_title}: ${section.section_title}`, href: `/course/${section.id}`, dataset: { splusTrackingTarget: "quick-access-course-link", splusTrackingLabel: "Quick Access" } }),
(courseIconsContainer = createElement("div", ["icons-container"], {}, [
createElement("a", ["icon", "icon-grades", "splus-track-clicks"], { href: `/course/${section.id}/student_grades`, title: "Grades", dataset: { splusTrackingTarget: "quick-access-grades-link", splusTrackingLabel: "Quick Access" } }),
createElement("a", ["icon", "icon-mastery", "splus-track-clicks"], { href: `/course/${section.id}/student_mastery`, title: "Mastery", dataset: { splusTrackingTarget: "quick-access-mastery-link", splusTrackingLabel: "Quick Access" } }),
(courseOptionsButton = createElement("a", ["icon", "icon-settings", "splus-track-clicks"], { href: "#", dataset: { splusTrackingTarget: "quick-access-settings-link", splusTrackingLabel: "Quick Access" } }))
]))
]));

let quickLink = Setting.getNestedValue("courseQuickLinks", section.id);
if (quickLink && quickLink !== "") {
courseIconsContainer.prepend(createElement("a", ["icon", "icon-quicklink", "splus-track-clicks"], { href: quickLink, title: `Quick Link \n(${quickLink})`, dataset: { splusTrackingTarget: "quick-access-quicklink-link", splusTrackingLabel: "Quick Access" } }))
}

iconImage.style.backgroundImage = `url(${chrome.runtime.getURL("imgs/fallback-course-icon.svg")})`;
iconImage.style.backgroundImage = `url(${chrome.runtime.getURL("imgs/fallback-course-icon.svg")})`;

courseOptionsButton.addEventListener("click", () => openModal("course-settings-modal", {
courseId: section.id,
courseName: `${section.course_title}: ${section.section_title}`
}));
courseOptionsButton.addEventListener("click", () => openModal("course-settings-modal", {
courseId: section.id,
courseName: `${section.course_title}: ${section.section_title}`
}));
}
}
} catch (err) {
if (err === "noapikey") {
wrapper.appendChild(createElement("div", ["quick-access-no-api"], { }, [
createElement("p", [], { textContent: "Please grant access to your enrolled courses in order to use this feature." }),
createButton("quick-access-grant-access", "Grant Access", () => {location.pathname = "/api"; }),
]));
} else {
throw err;
}
}

Expand Down
90 changes: 90 additions & 0 deletions js/api-key.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
(async function () {
// Wait for loader.js to finish running
while (!window.splusLoaded) {
await new Promise(resolve => setTimeout(resolve, 10));
}
await loadDependencies("api-key", ["all"]);
})();

(function () {
let currentKey = document.getElementById("edit-current-key");
let currentSecret = document.getElementById("edit-current-secret");
currentKey.parentElement.style.display = "none";
currentSecret.parentElement.style.display = "none";

if (currentSecret.value.indexOf("*") === -1) {
let key = currentKey.value;
let secret = currentSecret.value;

trackEvent("Change Access", "allowed", "API Key");

Setting.setValue("apikey", key, () => {
Setting.setValue("apisecret", secret, () => {
Setting.setValue("apiuser", getUserId(), () => {
Setting.setValue("apistatus", "allowed", () => {
location.pathname = "/";
});
});
});
});
}

let centerInner = document.getElementById("center-inner");
centerInner.classList.add("splus-api-key-page");
centerInner.parentElement.classList.add("splus-api-key-page");

centerInner.prepend(createElement("div", ["splus-permissions-wrapper"], {}, [
createElement("div", ["splus-permissions-box"], {}, [
createElement("div", ["splus-permissions-icon-wrapper"], {}, [
createElement("img", ["splus-permissions-icon"], { src: chrome.runtime.getURL("/imgs/logo-full.png") }),
]),
createElement("div", ["splus-permissions-header"], {}, [
createElement("h2", ["splus-permissions-title"], { textContent: "Schoology Plus Needs Access to Your Account" }),
createElement("p", ["splus-permissions-description"], {}, [
createElement("span", [], { textContent: "Due to a new security feature, Schoology Plus needs access to your Schoology API Key for the following features to work correctly:" }),
createElement("div", ["splus-permissions-section"], {}, [
createElement("ul", ["splus-permissions-features-list"], {}, [
createElement("li", [], { textContent: "What-If Grades" }),
createElement("li", [], { textContent: "Assignment Checkmarks" }),
createElement("li", [], { textContent: "Quick Access" }),
createElement("li", [], { textContent: "Courses in Common" }),
]),
]),
createElement("span", [], { textContent: "By providing access to your API key, Schoology Plus can view extra details about the courses you're enrolled in." }),
createElement("div", ["splus-permissions-section"], {}, [
createElement("strong", [], { textContent: "Schoology Plus will never:" }),
createElement("ul", ["splus-permissions-never-list"], {}, [
createElement("li", [], { textContent: "Collect or store any personal information" }),
createElement("li", [], { textContent: "Have access to your account's password" }),
]),
]),
createElement("div", ["splus-permissions-section"], {}, [
createElement("span", [], { textContent: "If you have any questions, you can" }),
createElement("a", [], { textContent: " view our code on Github", href: "https://github.com/aopell/SchoologyPlus" }),
createElement("span", [], { textContent: " or" }),
createElement("a", [], { textContent: " contact us on Discord", href: "https://discord.schoologypl.us" }),
createElement("span", [], { textContent: ". You can change this setting at any time in the Schoology Plus settings menu." }),
]),
]),
]),
])
]));

let submitButton = document.getElementById("edit-reveal");
submitButton.parentElement.classList.add("splus-allow-access");
submitButton.value = "Allow Access";

submitButton.parentElement.insertAdjacentElement("afterend", createElement("div", ["splus-api-key-footer"], {style: {textAlign: "center"}}, [
createElement("a", [], {
textContent: "Deny Access", onclick: () => {
alert("API key access was denied. Please keep in mind many Schoology Plus features will not work correctly with this disabled. You can change this at any time from the Schoology Plus settings menu.");
trackEvent("Change Access", "denied", "API Key");
Setting.setValue("apiuser", getUserId(), () => {
Setting.setValue("apistatus", "denied", () => {
location.pathname = "/";
});
});
}
}),
]));
})();
Loading

0 comments on commit 3cf30bf

Please sign in to comment.