Changed 'oauth2' to 'auth' where relevant.

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;
 }

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;

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;
 }

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;

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;
 }

assets/auth.css/error.css

@@ -1,3 +1,3 @@
-.oauth2-errorbody p {
+.auth-errorbody p {
     margin: .5em 1em;
 }

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;
 }
 

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;
 }

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;
 }

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;
 }

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; },
+    };
+};

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; },
+    };
+};

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();

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;
         }
     };

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);
     }
 

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');

assets/oauth2.js/app/info.jsx

@@ -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; },
-    };
-};

assets/oauth2.js/app/scope.jsx

@@ -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; },
-    };
-};

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: [

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 %}

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 %}

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>