From 9aa872a9d81eb2d18d51db3efd7a04096631cd80 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Thu, 24 Apr 2025 19:40:12 +0000
Subject: [PATCH] Changed 'oauth2' to 'auth' where relevant.
---
assets/{oauth2.css => auth.css}/appinfo.css | 18 +++++-----
assets/{oauth2.css => auth.css}/approval.css | 14 ++++----
assets/{oauth2.css => auth.css}/authorise.css | 30 ++++++++--------
assets/{oauth2.css => auth.css}/banner.css | 6 ++--
assets/{oauth2.css => auth.css}/device.css | 6 ++--
assets/{oauth2.css => auth.css}/error.css | 2 +-
assets/{oauth2.css => auth.css}/main.css | 10 +++---
assets/{oauth2.css => auth.css}/scope.css | 14 ++++----
.../{oauth2.css => auth.css}/simplehead.css | 14 ++++----
assets/{oauth2.css => auth.css}/userhead.css | 26 +++++++-------
assets/auth.js/app/info.jsx | 30 ++++++++++++++++
assets/auth.js/app/scope.jsx | 33 ++++++++++++++++++
assets/{oauth2.js => auth.js}/authorise.js | 8 ++---
.../{oauth2.js => auth.js}/header/header.js | 10 +++---
assets/{oauth2.js => auth.js}/header/user.jsx | 24 ++++++-------
assets/{oauth2.js => auth.js}/main.js | 0
assets/{oauth2.js => auth.js}/verify.js | 8 ++---
assets/oauth2.js/app/info.jsx | 30 ----------------
assets/oauth2.js/app/scope.jsx | 33 ------------------
build.js | 4 +--
templates/oauth2/authorise.twig | 10 +++---
templates/oauth2/master.twig | 26 +++++++-------
templates/oauth2/verify.twig | 34 +++++++++----------
23 files changed, 195 insertions(+), 195 deletions(-)
rename assets/{oauth2.css => auth.css}/appinfo.css (68%)
rename assets/{oauth2.css => auth.css}/approval.css (72%)
rename assets/{oauth2.css => auth.css}/authorise.css (66%)
rename assets/{oauth2.css => auth.css}/banner.css (83%)
rename assets/{oauth2.css => auth.css}/device.css (85%)
rename assets/{oauth2.css => auth.css}/error.css (52%)
rename assets/{oauth2.css => auth.css}/main.css (92%)
rename assets/{oauth2.css => auth.css}/scope.css (79%)
rename assets/{oauth2.css => auth.css}/simplehead.css (70%)
rename assets/{oauth2.css => auth.css}/userhead.css (67%)
create mode 100644 assets/auth.js/app/info.jsx
create mode 100644 assets/auth.js/app/scope.jsx
rename assets/{oauth2.js => auth.js}/authorise.js (97%)
rename assets/{oauth2.js => auth.js}/header/header.js (85%)
rename assets/{oauth2.js => auth.js}/header/user.jsx (65%)
rename assets/{oauth2.js => auth.js}/main.js (100%)
rename assets/{oauth2.js => auth.js}/verify.js (96%)
delete mode 100644 assets/oauth2.js/app/info.jsx
delete mode 100644 assets/oauth2.js/app/scope.jsx
diff --git a/assets/oauth2.css/appinfo.css b/assets/auth.css/appinfo.css
similarity index 68%
rename from assets/oauth2.css/appinfo.css
rename to assets/auth.css/appinfo.css
index 5dd35da3..5f9d6395 100644
--- a/assets/oauth2.css/appinfo.css
+++ b/assets/auth.css/appinfo.css
@@ -1,17 +1,17 @@
-.oauth2-appinfo {}
+.auth-appinfo {}
-.oauth2-appinfo-name {
+.auth-appinfo-name {
font-size: 2em;
line-height: 1.5em;
}
-.oauth2-appinfo-links {
+.auth-appinfo-links {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
-.oauth2-appinfo-link {
+.auth-appinfo-link {
display: flex;
color: inherit;
gap: 5px;
@@ -20,24 +20,24 @@
padding: 2px 6px;
border-radius: 4px;
}
-.oauth2-appinfo-link-icon {
+.auth-appinfo-link-icon {
flex: 0 0 auto;
background-color: #fff;
width: 12px;
height: 12px;
}
-.oauth2-appinfo-link-icon-globe {
+.auth-appinfo-link-icon-globe {
mask: url('/images/globe-solid.svg') no-repeat center;
}
-.oauth2-appinfo-link-text {
+.auth-appinfo-link-text {
font-size: .8em;
line-height: 1.4em;
}
-.oauth2-appinfo-summary {
+.auth-appinfo-summary {
font-size: .9em;
line-height: 1.4em;
}
-.oauth2-appinfo-summary p {
+.auth-appinfo-summary p {
margin: .5em 0;
}
diff --git a/assets/oauth2.css/approval.css b/assets/auth.css/approval.css
similarity index 72%
rename from assets/oauth2.css/approval.css
rename to assets/auth.css/approval.css
index 598a10b6..45c831a3 100644
--- a/assets/oauth2.css/approval.css
+++ b/assets/auth.css/approval.css
@@ -1,34 +1,34 @@
-.oauth2-approval {
+.auth-approval {
display: flex;
flex-direction: column;
align-items: center;
}
-.oauth2-approval-icon {
+.auth-approval-icon {
flex: 0 0 auto;
background-color: #fff;
width: 40px;
height: 40px;
margin: 10px;
}
-.oauth2-approval-icon-approved {
+.auth-approval-icon-approved {
mask: url('/images/circle-check-solid.svg') no-repeat center;
}
-.oauth2-approval-icon-denied {
+.auth-approval-icon-denied {
mask: url('/images/circle-xmark-solid.svg') no-repeat center;
}
-.oauth2-approval-header {
+.auth-approval-header {
text-align: center;
font-size: 1.2em;
line-height: 1.5em;
}
-.oauth2-approval-text {
+.auth-approval-text {
width: 100%;
}
-.oauth2-approval-text p {
+.auth-approval-text p {
margin: .5em 0;
font-size: .8em;
line-height: 1.5em;
diff --git a/assets/oauth2.css/authorise.css b/assets/auth.css/authorise.css
similarity index 66%
rename from assets/oauth2.css/authorise.css
rename to assets/auth.css/authorise.css
index b04a03dc..c5cf27e5 100644
--- a/assets/oauth2.css/authorise.css
+++ b/assets/auth.css/authorise.css
@@ -1,28 +1,28 @@
-.oauth2-authorise-requesting {
+.auth-authorise-requesting {
font-size: .8em;
line-height: 1.4em;
border-bottom: 1px solid #333;
}
-.oauth2-authorise-requesting p {
+.auth-authorise-requesting p {
margin: .5em 0;
}
-.oauth2-authorise-device {
+.auth-authorise-device {
font-size: .8em;
line-height: 1.4em;
}
-.oauth2-authorise-device p {
+.auth-authorise-device p {
margin: .5em 0;
}
-.oauth2-authorise-buttons {
+.auth-authorise-buttons {
margin-top: 10px;
display: flex;
justify-content: center;
gap: 10px;
}
-.oauth2-authorise-button {
+.auth-authorise-button {
background-color: #191919;
font-family: var(--font-regular);
font-size: 1.2em;
@@ -41,32 +41,32 @@
color: #8559a5;
border-color: #8559a5;
}
-.oauth2-authorise-button:hover,
-.oauth2-authorise-button:focus {
+.auth-authorise-button:hover,
+.auth-authorise-button:focus {
color: #191919;
background-color: #8559a5;
}
-.oauth2-authorise-button[disabled] {
+.auth-authorise-button[disabled] {
opacity: .5;
}
-.oauth2-authorise-button-accept {
+.auth-authorise-button-accept {
color: #080;
border-color: #0a0;
}
-.oauth2-authorise-button-accept:hover,
-.oauth2-authorise-button-accept:focus {
+.auth-authorise-button-accept:hover,
+.auth-authorise-button-accept:focus {
color: #191919;
background-color: #0a0;
}
-.oauth2-authorise-button-deny {
+.auth-authorise-button-deny {
color: #c00;
border-color: #a00;
}
-.oauth2-authorise-button-deny:hover,
-.oauth2-authorise-button-deny:focus {
+.auth-authorise-button-deny:hover,
+.auth-authorise-button-deny:focus {
color: #191919;
background-color: #a00;
}
diff --git a/assets/oauth2.css/banner.css b/assets/auth.css/banner.css
similarity index 83%
rename from assets/oauth2.css/banner.css
rename to assets/auth.css/banner.css
index cff6f674..9bc9a375 100644
--- a/assets/oauth2.css/banner.css
+++ b/assets/auth.css/banner.css
@@ -1,16 +1,16 @@
-.oauth2-banner {
+.auth-banner {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
-.oauth2-banner-text {
+.auth-banner-text {
font-size: .9em;
line-height: 1.4em;
flex: 1 1 auto;
}
-.oauth2-banner-logo {
+.auth-banner-logo {
flex: 0 0 auto;
background-color: #fff;
mask: url('/images/flashii.svg') no-repeat center;
diff --git a/assets/oauth2.css/device.css b/assets/auth.css/device.css
similarity index 85%
rename from assets/oauth2.css/device.css
rename to assets/auth.css/device.css
index 0747d7dd..71655772 100644
--- a/assets/oauth2.css/device.css
+++ b/assets/auth.css/device.css
@@ -1,10 +1,10 @@
-.oauth2-device-form {
+.auth-device-form {
display: flex;
justify-content: center;
margin: 10px;
}
-.oauth2-device-code {
+.auth-device-code {
font-size: 1.4em;
border: 1px solid #222;
padding: 5px 10px;
@@ -19,6 +19,6 @@
max-width: 200px;
width: 100%;
}
-.oauth2-device-code:focus {
+.auth-device-code:focus {
border-color: #8559a5;
}
diff --git a/assets/oauth2.css/error.css b/assets/auth.css/error.css
similarity index 52%
rename from assets/oauth2.css/error.css
rename to assets/auth.css/error.css
index 41f3b681..853a2a7b 100644
--- a/assets/oauth2.css/error.css
+++ b/assets/auth.css/error.css
@@ -1,3 +1,3 @@
-.oauth2-errorbody p {
+.auth-errorbody p {
margin: .5em 1em;
}
diff --git a/assets/oauth2.css/main.css b/assets/auth.css/main.css
similarity index 92%
rename from assets/oauth2.css/main.css
rename to assets/auth.css/main.css
index a97e680c..ddb37974 100644
--- a/assets/oauth2.css/main.css
+++ b/assets/auth.css/main.css
@@ -26,14 +26,14 @@ a:focus {
text-decoration: underline;
}
-.oauth2-wrapper {
+.auth-wrapper {
display: flex;
flex-direction: column;
flex: 1 0 auto;
margin-bottom: 10px;
}
-.oauth2-dialog {
+.auth-dialog {
display: flex;
flex: 1 0 auto;
padding: 10px;
@@ -42,7 +42,7 @@ a:focus {
justify-content: center;
}
-.oauth2-dialog-body {
+.auth-dialog-body {
max-width: 500px;
width: 100%;
background: #191919;
@@ -51,7 +51,7 @@ a:focus {
flex-direction: column;
}
-.oauth2-header {
+.auth-header {
background-image: url('/images/clouds.png');
background-blend-mode: multiply;
background-color: #8559a5;
@@ -59,7 +59,7 @@ a:focus {
min-height: 4px;
}
-.oauth2-body {
+.auth-body {
margin: 10px;
}
diff --git a/assets/oauth2.css/scope.css b/assets/auth.css/scope.css
similarity index 79%
rename from assets/oauth2.css/scope.css
rename to assets/auth.css/scope.css
index 84a7b221..ab0e60b0 100644
--- a/assets/oauth2.css/scope.css
+++ b/assets/auth.css/scope.css
@@ -1,26 +1,26 @@
-.oauth2-scope {
+.auth-scope {
background: #292929;
border-radius: 4px;
padding: 4px 8px;
}
-.oauth2-scope-header {
+.auth-scope-header {
border-bottom: 1px solid #494949;
}
-.oauth2-scope-perms {
+.auth-scope-perms {
display: flex;
flex-direction: column;
gap: 4px;
margin: 4px 0;
}
-.oauth2-scope-perm {
+.auth-scope-perm {
display: flex;
align-items: center;
gap: 4px;
}
-.oauth2-scope-perm-icon {
+.auth-scope-perm-icon {
width: 16px;
height: 16px;
mask: url('/images/circle-check-regular.svg') no-repeat center;
@@ -28,11 +28,11 @@
background-color: #0a0;
margin: 2px;
}
-.oauth2-scope-perm-icon-warn {
+.auth-scope-perm-icon-warn {
mask: url('/images/circle-regular.svg') no-repeat center, url('/images/exclamation-solid.svg') no-repeat center center / 10px 10px;
background-color: #c80;
}
-.oauth2-scope-perm-text {
+.auth-scope-perm-text {
font-size: .8em;
line-height: 1.4em;
}
diff --git a/assets/oauth2.css/simplehead.css b/assets/auth.css/simplehead.css
similarity index 70%
rename from assets/oauth2.css/simplehead.css
rename to assets/auth.css/simplehead.css
index 639c1da7..1485ea33 100644
--- a/assets/oauth2.css/simplehead.css
+++ b/assets/auth.css/simplehead.css
@@ -1,9 +1,9 @@
-.oauth2-simplehead {
+.auth-simplehead {
display: flex;
align-items: center;
}
-.oauth2-simplehead-icon {
+.auth-simplehead-icon {
flex: 0 0 auto;
background-color: #fff;
mask: url('/images/circle-question-solid.svg') no-repeat center;
@@ -11,20 +11,20 @@
height: 40px;
margin: 10px;
}
-.oauth2-simplehead-icon--code {
+.auth-simplehead-icon--code {
mask-image: url('/images/mobile-screen-solid.svg');
}
-.oauth2-simplehead-icon--error {
+.auth-simplehead-icon--error {
mask-image: url('/images/circle-exclamation-solid.svg');
}
-.oauth2-simplehead-icon--login {
+.auth-simplehead-icon--login {
mask-image: url('/images/user-lock-solid.svg');
}
-.oauth2-simplehead-icon--wait {
+.auth-simplehead-icon--wait {
mask-image: url('/images/ellipsis-solid.svg');
}
-.oauth2-simplehead-text {
+.auth-simplehead-text {
font-size: 1.8em;
line-height: 1.4em;
}
diff --git a/assets/oauth2.css/userhead.css b/assets/auth.css/userhead.css
similarity index 67%
rename from assets/oauth2.css/userhead.css
rename to assets/auth.css/userhead.css
index b8e5efe5..9131de76 100644
--- a/assets/oauth2.css/userhead.css
+++ b/assets/auth.css/userhead.css
@@ -1,64 +1,64 @@
-.oauth2-userhead {
+.auth-userhead {
display: flex;
flex-direction: column;
background-color: #0005;
}
-.oauth2-userhead-main {
+.auth-userhead-main {
display: flex;
align-items: center;
}
-.oauth2-userhead-main-avatar {
+.auth-userhead-main-avatar {
flex: 0 0 auto;
margin: 10px;
}
-.oauth2-userhead-main-avatar-image {
+.auth-userhead-main-avatar-image {
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 4px;
}
-.oauth2-userhead-main-avatar-image img {
+.auth-userhead-main-avatar-image img {
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
-.oauth2-userhead-main-name {
+.auth-userhead-main-name {
font-size: 1.8em;
line-height: 1.4em;
}
-.oauth2-userhead-main-name a {
+.auth-userhead-main-name a {
color: inherit;
}
-.oauth2-userhead-guise {
+.auth-userhead-guise {
display: flex;
align-items: center;
background-image: repeating-linear-gradient(-45deg, #8559a57f, #8559a57f 10px, #1111117f 10px, #1111117f 20px);
}
-.oauth2-userhead-guise-avatar {
+.auth-userhead-guise-avatar {
flex: 0 0 auto;
margin: 10px;
}
-.oauth2-userhead-guise-avatar-image {
+.auth-userhead-guise-avatar-image {
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 4px;
}
-.oauth2-userhead-guise-avatar-image img {
+.auth-userhead-guise-avatar-image img {
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
-.oauth2-userhead-guise-text {
+.auth-userhead-guise-text {
font-size: .8em;
line-height: 1.5em;
overflow: hidden;
padding: 2px 0;
}
-.oauth2-userhead-guise-text p {
+.auth-userhead-guise-text p {
margin: 1px 0;
}
diff --git a/assets/auth.js/app/info.jsx b/assets/auth.js/app/info.jsx
new file mode 100644
index 00000000..89c57982
--- /dev/null
+++ b/assets/auth.js/app/info.jsx
@@ -0,0 +1,30 @@
+const MszAuthAppInfoLink = function(info) {
+ const element = <a href={info.uri} target="_blank" rel="noopener noreferrer" class="auth-appinfo-link" title={info.title}>
+ <div class="auth-appinfo-link-icon auth-appinfo-link-icon-globe"></div>
+ <div class="auth-appinfo-link-text">{info.display}</div>
+ </a>;
+
+ return {
+ get element() { return element; },
+ };
+};
+
+const MszAuthAppInfo = function(info) {
+ const linksElem = <div class="auth-appinfo-links"/>;
+ if(Array.isArray(info.links))
+ for(const link of info.links)
+ linksElem.appendChild((new MszAuthAppInfoLink(link)).element);
+
+ // TODO: author should be listed
+ const element = <div class="auth-appinfo">
+ <div class="auth-appinfo-name">{info.name}</div>
+ {linksElem}
+ <div class="auth-appinfo-summary">
+ <p>{info.summary}</p>
+ </div>
+ </div>;
+
+ return {
+ get element() { return element; },
+ };
+};
diff --git a/assets/auth.js/app/scope.jsx b/assets/auth.js/app/scope.jsx
new file mode 100644
index 00000000..8dbabbad
--- /dev/null
+++ b/assets/auth.js/app/scope.jsx
@@ -0,0 +1,33 @@
+const MszAuthAppScopeEntry = function(text, warn) {
+ const icon = <div class="auth-scope-perm-icon"/>;
+ if(warn)
+ icon.classList.add('auth-scope-perm-icon-warn');
+
+ const element = <div class="auth-scope-perm">
+ {icon}
+ <div class="auth-scope-perm-text">{text}</div>
+ </div>;
+
+ return {
+ get element() { return element; },
+ };
+};
+
+const MszAuthAppScopeList = function(scopes) {
+ const permsElem = <div class="auth-scope-perms"/>;
+ if(Array.isArray(scopes) && scopes.length > 0) {
+ for(const scope of scopes)
+ if(typeof scope === 'string')
+ permsElem.appendChild(new MszAuthAppScopeEntry(scope).element);
+ } else
+ permsElem.appendChild(new MszAuthAppScopeEntry('A limited amount of things. No scope was specified by the developer.', true).element);
+
+ const element = <div class="auth-scope">
+ <div class="auth-scope-header">This application will be able to:</div>
+ {permsElem}
+ </div>;
+
+ return {
+ get element() { return element; },
+ };
+};
diff --git a/assets/oauth2.js/authorise.js b/assets/auth.js/authorise.js
similarity index 97%
rename from assets/oauth2.js/authorise.js
rename to assets/auth.js/authorise.js
index 490ff014..fb5387dd 100644
--- a/assets/oauth2.js/authorise.js
+++ b/assets/auth.js/authorise.js
@@ -30,7 +30,7 @@ const MszOAuth2AuthoriseErrors = Object.freeze({
const MszOAuth2Authorise = async () => {
const queryParams = new URLSearchParams(window.location.search);
const loading = new MszLoading({ element: '.js-loading', size: 2 });
- const header = new MszOAuth2Header;
+ const header = new MszAuthHeader;
const fAuths = document.querySelector('.js-authorise-form');
const eAuthsInfo = document.querySelector('.js-authorise-form-info');
@@ -172,7 +172,7 @@ const MszOAuth2Authorise = async () => {
return translateError(body.error, body);
}
- const userHeader = new MszOAuth2UserHeader(body.user);
+ const userHeader = new MszAuthUserHeader(body.user);
header.setElement(userHeader);
const verifyAuthsRequest = async () => {
@@ -216,8 +216,8 @@ const MszOAuth2Authorise = async () => {
return;
}
- eAuthsInfo.replaceWith(new MszOAuth2AppInfo(body.app).element);
- eAuthsScope.replaceWith(new MszOAuth2AppScopeList(body.scope).element);
+ eAuthsInfo.replaceWith(new MszAuthAppInfo(body.app).element);
+ eAuthsScope.replaceWith(new MszAuthAppScopeList(body.scope).element);
fAuths.onsubmit = ev => {
ev.preventDefault();
diff --git a/assets/oauth2.js/header/header.js b/assets/auth.js/header/header.js
similarity index 85%
rename from assets/oauth2.js/header/header.js
rename to assets/auth.js/header/header.js
index a515f613..ab9142ad 100644
--- a/assets/oauth2.js/header/header.js
+++ b/assets/auth.js/header/header.js
@@ -1,4 +1,4 @@
-const MszOAuth2Header = function(element = '.js-oauth2-header', simpleElement = '.js-oauth2-header-simple') {
+const MszAuthHeader = function(element = '.js-auth-header', simpleElement = '.js-auth-header-simple') {
if(typeof element === 'string')
element = document.querySelector(element);
if(!(element instanceof HTMLElement))
@@ -7,8 +7,8 @@ const MszOAuth2Header = function(element = '.js-oauth2-header', simpleElement =
if(typeof simpleElement === 'string')
simpleElement = element.querySelector(simpleElement);
- const simpleElementIcon = simpleElement?.querySelector('.js-oauth2-header-simple-icon');
- const simpleElementText = simpleElement?.querySelector('.js-oauth2-header-simple-text');
+ const simpleElementIcon = simpleElement?.querySelector('.js-auth-header-simple-icon');
+ const simpleElementText = simpleElement?.querySelector('.js-auth-header-simple-text');
const hasSimpleElement = simpleElement instanceof HTMLElement;
const setSimpleVisible = state => {
@@ -18,10 +18,10 @@ const MszOAuth2Header = function(element = '.js-oauth2-header', simpleElement =
const setSimpleData = (icon, text) => {
if(hasSimpleElement) {
for(const className of simpleElementIcon.classList)
- if(className.startsWith('oauth2-simplehead-icon--'))
+ if(className.startsWith('auth-simplehead-icon--'))
simpleElementIcon.classList.remove(className);
- simpleElementIcon.classList.add(`oauth2-simplehead-icon--${icon}`);
+ simpleElementIcon.classList.add(`auth-simplehead-icon--${icon}`);
simpleElementText.textContent = text;
}
};
diff --git a/assets/oauth2.js/header/user.jsx b/assets/auth.js/header/user.jsx
similarity index 65%
rename from assets/oauth2.js/header/user.jsx
rename to assets/auth.js/header/user.jsx
index 4ca95630..612cd48f 100644
--- a/assets/oauth2.js/header/user.jsx
+++ b/assets/auth.js/header/user.jsx
@@ -1,11 +1,11 @@
-const MszOAuth2UserGuiseHeader = function(guise) {
- const element = <div class="oauth2-userhead-guise">
- <div class="oauth2-userhead-guise-avatar">
- <div class="oauth2-userhead-guise-avatar-image">
+const MszAuthUserGuiseHeader = function(guise) {
+ const element = <div class="auth-userhead-guise">
+ <div class="auth-userhead-guise-avatar">
+ <div class="auth-userhead-guise-avatar-image">
<img src={guise.avatar_uri} alt=""/>
</div>
</div>
- <div class="oauth2-userhead-guise-text">
+ <div class="auth-userhead-guise-text">
<p>Are you <a href={guise.profile_uri} target="_blank" style={`color: ${guise.colour}`}>{guise.name}</a> and did you mean to use your own account?</p>
<p><a href={guise.revert_uri} target="_blank">Click here</a> and reload this page.</p>
</div>
@@ -21,15 +21,15 @@ const MszOAuth2UserGuiseHeader = function(guise) {
};
};
-const MszOAuth2UserHeader = function(user) {
- const element = <div class="oauth2-userhead">
- <div class="oauth2-userhead-main">
- <div class="oauth2-userhead-main-avatar">
- <div class="oauth2-userhead-main-avatar-image">
+const MszAuthUserHeader = function(user) {
+ const element = <div class="auth-userhead">
+ <div class="auth-userhead-main">
+ <div class="auth-userhead-main-avatar">
+ <div class="auth-userhead-main-avatar-image">
<img src={user.avatar_uri} alt=""/>
</div>
</div>
- <div class="oauth2-userhead-main-name">
+ <div class="auth-userhead-main-name">
<a href={user.profile_uri} target="_blank">{user.name}</a>
</div>
</div>
@@ -37,7 +37,7 @@ const MszOAuth2UserHeader = function(user) {
let guiseInfo;
if(user.guise) {
- guiseInfo = new MszOAuth2UserGuiseHeader(user.guise);
+ guiseInfo = new MszAuthUserGuiseHeader(user.guise);
element.appendChild(guiseInfo.element);
}
diff --git a/assets/oauth2.js/main.js b/assets/auth.js/main.js
similarity index 100%
rename from assets/oauth2.js/main.js
rename to assets/auth.js/main.js
diff --git a/assets/oauth2.js/verify.js b/assets/auth.js/verify.js
similarity index 96%
rename from assets/oauth2.js/verify.js
rename to assets/auth.js/verify.js
index a2bd54b7..f2f46d3e 100644
--- a/assets/oauth2.js/verify.js
+++ b/assets/auth.js/verify.js
@@ -6,7 +6,7 @@
const MszOAuth2Verify = () => {
const queryParams = new URLSearchParams(window.location.search);
const loading = new MszLoading({ element: '.js-loading', size: 2 });
- const header = new MszOAuth2Header;
+ const header = new MszAuthHeader;
const fAuths = document.querySelector('.js-verify-authorise');
const eAuthsInfo = document.querySelector('.js-verify-authorise-info');
@@ -128,7 +128,7 @@ const MszOAuth2Verify = () => {
userCode = body.req.code;
- userHeader = new MszOAuth2UserHeader(body.user);
+ userHeader = new MszAuthUserHeader(body.user);
header.setElement(userHeader);
if(body.app.trusted && body.user.guise === undefined) {
@@ -139,8 +139,8 @@ const MszOAuth2Verify = () => {
return;
}
- eAuthsInfo.replaceWith(new MszOAuth2AppInfo(body.app).element);
- eAuthsScope.replaceWith(new MszOAuth2AppScopeList(body.scope).element);
+ eAuthsInfo.replaceWith(new MszAuthAppInfo(body.app).element);
+ eAuthsScope.replaceWith(new MszAuthAppScopeList(body.scope).element);
loading.visible = false;
fAuths.classList.remove('hidden');
diff --git a/assets/oauth2.js/app/info.jsx b/assets/oauth2.js/app/info.jsx
deleted file mode 100644
index e7962923..00000000
--- a/assets/oauth2.js/app/info.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-const MszOAuth2AppInfoLink = function(info) {
- const element = <a href={info.uri} target="_blank" rel="noopener noreferrer" class="oauth2-appinfo-link" title={info.title}>
- <div class="oauth2-appinfo-link-icon oauth2-appinfo-link-icon-globe"></div>
- <div class="oauth2-appinfo-link-text">{info.display}</div>
- </a>;
-
- return {
- get element() { return element; },
- };
-};
-
-const MszOAuth2AppInfo = function(info) {
- const linksElem = <div class="oauth2-appinfo-links"/>;
- if(Array.isArray(info.links))
- for(const link of info.links)
- linksElem.appendChild((new MszOAuth2AppInfoLink(link)).element);
-
- // TODO: author should be listed
- const element = <div class="oauth2-appinfo">
- <div class="oauth2-appinfo-name">{info.name}</div>
- {linksElem}
- <div class="oauth2-appinfo-summary">
- <p>{info.summary}</p>
- </div>
- </div>;
-
- return {
- get element() { return element; },
- };
-};
diff --git a/assets/oauth2.js/app/scope.jsx b/assets/oauth2.js/app/scope.jsx
deleted file mode 100644
index d9e69b90..00000000
--- a/assets/oauth2.js/app/scope.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-const MszOAuth2AppScopeEntry = function(text, warn) {
- const icon = <div class="oauth2-scope-perm-icon"/>;
- if(warn)
- icon.classList.add('oauth2-scope-perm-icon-warn');
-
- const element = <div class="oauth2-scope-perm">
- {icon}
- <div class="oauth2-scope-perm-text">{text}</div>
- </div>;
-
- return {
- get element() { return element; },
- };
-};
-
-const MszOAuth2AppScopeList = function(scopes) {
- const permsElem = <div class="oauth2-scope-perms"/>;
- if(Array.isArray(scopes) && scopes.length > 0) {
- for(const scope of scopes)
- if(typeof scope === 'string')
- permsElem.appendChild(new MszOAuth2AppScopeEntry(scope).element);
- } else
- permsElem.appendChild(new MszOAuth2AppScopeEntry('A limited amount of things. No scope was specified by the developer.', true).element);
-
- const element = <div class="oauth2-scope">
- <div class="oauth2-scope-header">This application will be able to:</div>
- {permsElem}
- </div>;
-
- return {
- get element() { return element; },
- };
-};
diff --git a/build.js b/build.js
index 088cdccd..e33a2299 100644
--- a/build.js
+++ b/build.js
@@ -16,14 +16,14 @@ const fs = require('fs');
js: [
{ source: 'common.js', target: '/assets', name: 'common.{hash}.js', },
{ source: 'misuzu.js', target: '/assets', name: 'misuzu.{hash}.js', },
- { source: 'oauth2.js', target: '/assets', name: 'oauth2.{hash}.js', },
+ { source: 'auth.js', target: '/assets', name: 'auth.{hash}.js', },
{ source: 'redirects.js', target: '/assets', name: 'redirects.{hash}.js', },
],
css: [
{ source: 'errors.css', target: '/', name: 'errors.css', },
{ source: 'common.css', target: '/assets', name: 'common.{hash}.css', },
{ source: 'misuzu.css', target: '/assets', name: 'misuzu.{hash}.css', },
- { source: 'oauth2.css', target: '/assets', name: 'oauth2.{hash}.css', },
+ { source: 'auth.css', target: '/assets', name: 'auth.{hash}.css', },
{ source: 'redirects.css', target: '/assets', name: 'redirects.{hash}.css', },
],
twig: [
diff --git a/templates/oauth2/authorise.twig b/templates/oauth2/authorise.twig
index a1391f19..70124bb4 100644
--- a/templates/oauth2/authorise.twig
+++ b/templates/oauth2/authorise.twig
@@ -8,22 +8,22 @@
<div class="js-loading"></div>
<div class="js-authorise-error hidden">
- <div class="oauth2-errorbody">
+ <div class="auth-errorbody">
<p class="js-authorise-error-text"></p>
</div>
</div>
<form class="js-authorise-form hidden">
- <div class="oauth2-authorise-requesting">
+ <div class="auth-authorise-requesting">
<p>A third-party application is requesting permission to access your account.</p>
</div>
<div class="js-authorise-form-info"></div>
<div class="js-authorise-form-scope"></div>
- <div class="oauth2-authorise-buttons">
- <button name="approve" value="yes" class="oauth2-authorise-button oauth2-authorise-button-accept">Authorise</button>
- <button name="approve" value="no" class="oauth2-authorise-button oauth2-authorise-button-deny">Cancel</button>
+ <div class="auth-authorise-buttons">
+ <button name="approve" value="yes" class="auth-authorise-button auth-authorise-button-accept">Authorise</button>
+ <button name="approve" value="no" class="auth-authorise-button auth-authorise-button-deny">Cancel</button>
</div>
</form>
{% endblock %}
diff --git a/templates/oauth2/master.twig b/templates/oauth2/master.twig
index 20735f5d..bcfc806e 100644
--- a/templates/oauth2/master.twig
+++ b/templates/oauth2/master.twig
@@ -4,30 +4,30 @@
{% block html_head %}
<link href="{{ asset('common.css') }}" rel="stylesheet">
- <link href="{{ asset('oauth2.css') }}" rel="stylesheet">
+ <link href="{{ asset('auth.css') }}" rel="stylesheet">
{% endblock %}
{% block html_body %}
- <div class="oauth2-wrapper">
- <div class="oauth2-dialog">
- <div class="oauth2-dialog-body">
+ <div class="auth-wrapper">
+ <div class="auth-dialog">
+ <div class="auth-dialog-body">
{% block body %}
{% block body_header %}
- <header class="oauth2-header js-oauth2-header">
+ <header class="auth-header js-auth-header">
{% set body_header_icon = body_header_icon|default('') %}
- <div class="oauth2-simplehead js-oauth2-header-simple{% if body_header_icon == '' %} hidden{% endif %}">
- <div class="oauth2-simplehead-icon oauth2-simplehead-icon--{{ body_header_icon }} js-oauth2-header-simple-icon"></div>
- <div class="oauth2-simplehead-text js-oauth2-header-simple-text">
+ <div class="auth-simplehead js-auth-header-simple{% if body_header_icon == '' %} hidden{% endif %}">
+ <div class="auth-simplehead-icon auth-simplehead-icon--{{ body_header_icon }} js-auth-header-simple-icon"></div>
+ <div class="auth-simplehead-text js-auth-header-simple-text">
{{ body_header_text|default('') }}
</div>
</div>
</header>
{% endblock %}
- <div class="oauth2-body">
- <div class="oauth2-banner">
- <div class="oauth2-banner-text">{{ body_title|default('') }}</div>
- <div class="oauth2-banner-logo">{{ site_get_info('name') }}</div>
+ <div class="auth-body">
+ <div class="auth-banner">
+ <div class="auth-banner-text">{{ body_title|default('') }}</div>
+ <div class="auth-banner-logo">{{ site_get_info('name') }}</div>
</div>
{% block body_content %}{% endblock %}
@@ -37,5 +37,5 @@
</div>
</div>
<script src="{{ asset('common.js') }}"></script>
- <script src="{{ asset('oauth2.js') }}"></script>
+ <script src="{{ asset('auth.js') }}"></script>
{% endblock %}
diff --git a/templates/oauth2/verify.twig b/templates/oauth2/verify.twig
index 906a2837..d8a60ff8 100644
--- a/templates/oauth2/verify.twig
+++ b/templates/oauth2/verify.twig
@@ -8,49 +8,49 @@
<div class="js-loading"></div>
<form class="js-verify-code hidden">
- <div class="oauth2-authorise-requesting">
+ <div class="auth-authorise-requesting">
<p>A third-party application that cannot display websites on its own is requesting permission to access your account.</p>
<p>Enter the code displayed on the device or application in the box below to continue authorisation.</p>
</div>
- <div class="oauth2-device-form">
- <input type="text" class="oauth2-device-code js-device-code" name="code" placeholder="XXX-XXX-XXX" autofocus>
+ <div class="auth-device-form">
+ <input type="text" class="auth-device-code js-device-code" name="code" placeholder="XXX-XXX-XXX" autofocus>
</div>
- <div class="oauth2-authorise-buttons">
- <button class="oauth2-authorise-button">Next</button>
+ <div class="auth-authorise-buttons">
+ <button class="auth-authorise-button">Next</button>
</div>
</form>
<form class="js-verify-authorise hidden">
- <div class="oauth2-authorise-requesting">
+ <div class="auth-authorise-requesting">
<p>A third-party application is requesting permission to access your account.</p>
</div>
<div class="js-verify-authorise-info"></div>
<div class="js-verify-authorise-scope"></div>
- <div class="oauth2-authorise-buttons">
- <button name="approve" value="yes" class="oauth2-authorise-button oauth2-authorise-button-accept">Authorise</button>
- <button name="approve" value="no" class="oauth2-authorise-button oauth2-authorise-button-deny">Cancel</button>
+ <div class="auth-authorise-buttons">
+ <button name="approve" value="yes" class="auth-authorise-button auth-authorise-button-accept">Authorise</button>
+ <button name="approve" value="no" class="auth-authorise-button auth-authorise-button-deny">Cancel</button>
</div>
</form>
<div class="js-verify-approved hidden">
- <div class="oauth2-approval">
- <div class="oauth2-approval-icon oauth2-approval-icon-approved"></div>
- <div class="oauth2-approval-header">Approved!</div>
- <div class="oauth2-approval-text">
+ <div class="auth-approval">
+ <div class="auth-approval-icon auth-approval-icon-approved"></div>
+ <div class="auth-approval-header">Approved!</div>
+ <div class="auth-approval-text">
<p>You have approved the authorisation request. You should now be signed in on the target device or application.</p>
</div>
</div>
</div>
<div class="js-verify-denied hidden">
- <div class="oauth2-approval">
- <div class="oauth2-approval-icon oauth2-approval-icon-denied"></div>
- <div class="oauth2-approval-header">Denied!</div>
- <div class="oauth2-approval-text">
+ <div class="auth-approval">
+ <div class="auth-approval-icon auth-approval-icon-denied"></div>
+ <div class="auth-approval-header">Denied!</div>
+ <div class="auth-approval-text">
<p>You have denied the authorisation request. Please return to the target device or application and follow displayed instructions.</p>
</div>
</div>