bootstrap less ugly gui

This commit is contained in:
creeper123123321 2021-01-26 15:09:28 -03:00
parent 3a7e5b1e51
commit 69f9634a11
6 changed files with 127 additions and 124 deletions

View File

@ -25,7 +25,7 @@ Usage for offline mode:
Usage for online mode with two accounts (recommended):
- Run the shadow jar or ./gradlew clean run
- You should set up a CORS Proxy (something like https://github.com/Rob--W/cors-anywhere) on local machine.
- Go to https://localhost:25543/auth.html, configure the CORS Proxy URL (something like http://localhost:8080/,
- Go to https://localhost:25543/, configure the CORS Proxy URL (something like http://localhost:8080/,
note the ending slash) and listen to the username A that you're using to connect to the proxy.
- Add the account B you'll use in _u parameter to browser auth page.
- Connect to mc.example.com._v1_8._u(account B).viaaas.localhost
@ -34,7 +34,7 @@ Usage for online mode with two accounts (recommended):
Usage for online mode with one account:
- Run the shadow jar or ./gradlew clean run
- You should set up a CORS Proxy (something like https://github.com/Rob--W/cors-anywhere) on local machine.
- Go to https://localhost:25543/auth.html, configure the CORS Proxy URL (something like http://localhost:8080/,
- Go to https://localhost:25543/, configure the CORS Proxy URL (something like http://localhost:8080/,
note the ending slash) and listen to the username.
- Add the account to browser auth page.
- Connect to mc.example.com._v1_8.viaaas.localhost

View File

@ -1,61 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="VIAaaS">
<meta property="og:site_name" content="VIAaaS">
<meta name="description" content="VIAaaS authenticator">
<meta property="og:title" content="VIAaaS authenticator">
<meta property="og:description" content="Allows authentication to your premium Minecraft account when using VIAaaS">
<meta property="og:image" content="https://raw.githubusercontent.com/ViaVersion/ViaVersion/a13c417352298c2269aed8736a76205f0040b705/fabric/src/main/resources/assets/viaversion/textures/squarelogo.png">
<meta property="og:type" content="game">
<link rel="icon" href="https://raw.githubusercontent.com/ViaVersion/ViaVersion/a13c417352298c2269aed8736a76205f0040b705/fabric/src/main/resources/assets/viaversion/textures/squarelogo.png">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://cdnjs.cloudflare.com/ https://alcdn.msauth.net/; img-src https://*; connect-src 'self' http://localhost:*/ https: ws: wss:">
<meta name="referrer" content="no-referrer">
<!-- only accept http from localhost -->
<title>VIAaaS Authenticator</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.1/uuid.min.js"></script>
<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.4/js/msal-browser.js" integrity="sha384-7sxY2tN3GMVE5jXH2RL9AdbO6s46vUh9lUid4yNCHJMUzDoj+0N4ve6rLOmR88yN" crossorigin="anonymous"></script>
<script src="auth_ms.js"></script>
</head>
<body>
<div id="browser_accounts">
<p>Browser Minecraft accounts:</p>
<div><p>
<label for="cors-proxy">CORS Proxy URL:</label>
<br>
<input type="url" id="cors-proxy" name="cors-proxy" value="">
</p></div>
<div id="add-account"><form><p>
<hr>
<input id="login_submit_ms" type="button" value="Login with Microsoft">
<hr>
<br>
<label for="email">Email/Username:</label>
<br>
<input type="text" id="email" name="email" value="">
<br>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password" value="">
<br><br>
<input id="login_submit_mc" type="button" value="Login with Minecraft">
</p></form></div>
<div id="accounts"></div>
</div>
<div id="status">
<p>DO NOT TYPE YOUR CREDENTIALS IF YOU DON'T TRUST THIS VIAAAS INSTANCE OR THE CORS PROXY!</p>
<p>Mojang API calls in browser are called through a CORS Proxy. See
<a href="https://github.com/Rob--W/cors-anywhere">https://github.com/Rob--W/cors-anywhere</a>
for setting up one. Calling Mojang API from a remote IP address may block your account.</p>
<p>WebSocket connection status: <span id="connection_status">?</span></p>
<hr>
<p><span id="actions"></span></p>
<p><span id="listening"></span></p>
</div>
<script src="auth.js"></script>
</body>
</html>

View File

@ -6,20 +6,23 @@ if (urlParams.get("mcauth_success") == "false") {
alert("Couldn't authenticate with Minecraft.ID: " + urlParams.get("mcauth_msg"));
}
function askWsUrl() {
let url = localStorage.getItem("ws-url") || "wss://localhost:25543/ws";
url = prompt("VIAaaS instance websocket", url) || url;
function defaultWs() {
return window.location.host == "viaversion.github.io" || !window.location.host ? "wss://localhost:25543/ws" : "wss://" + window.location.host + "/ws";
}
function getWsUrl() {
let url = localStorage.getItem("ws-url") || defaultWs();
localStorage.setItem("ws-url", url);
return url;
}
var wsUrl = window.location.host == "viaversion.github.io" ? askWsUrl() : "wss://" + window.location.host + "/ws";
var wsUrl = getWsUrl();
var socket = null;
var connectionStatus = document.getElementById("connection_status");
var listening = document.getElementById("listening");
var actions = document.getElementById("actions");
var acounts = document.getElementById("accounts");
var accounts = document.getElementById("accounts-list");
var listenVisible = false;
isSuccess = status => status >= 200 && status < 300;
@ -214,33 +217,35 @@ function getTokens() {
function renderActions() {
actions.innerHTML = "";
if (username != null && mcauth_code != null) {
if (listenVisible) {
if (username != null && mcauth_code != null) {
let p = document.createElement("p");
let add = document.createElement("a");
p.appendChild(add);
add.innerText = "Listen to " + username;
add.href = "#";
add.onclick = () => {
socket.send(JSON.stringify({
"action": "minecraft_id_login",
"username": username,
"code": mcauth_code}));
mcauth_code = null;
};
actions.appendChild(p);
}
let p = document.createElement("p");
let add = document.createElement("a");
p.appendChild(add);
add.innerText = "Listen to " + username;
add.href = "#";
add.onclick = () => {
socket.send(JSON.stringify({
"action": "minecraft_id_login",
"username": username,
"code": mcauth_code}));
mcauth_code = null;
let link = document.createElement("a");
p.appendChild(link);
link.innerText = "Listen to username in VIAaaS instance";
link.href = "#";
link.onclick = () => {
let user = prompt("Username (Minecraft.ID is case-sensitive): ", "");
if (!user) return;
let callbackUrl = new URL(location.origin + location.pathname + "#username=" + encodeURIComponent(user));
location = "https://api.minecraft.id/gateway/start/" + encodeURIComponent(user) + "?callback=" + encodeURIComponent(callbackUrl);
};
actions.appendChild(p);
}
let p = document.createElement("p");
let link = document.createElement("a");
p.appendChild(link);
link.innerText = "Listen to username in VIAaaS instance";
link.href = "#";
link.onclick = () => {
let user = prompt("Username (Minecraft.ID is case-sensitive): ", "");
if (!user) return;
let callbackUrl = new URL(location.origin + location.pathname + "#username=" + encodeURIComponent(user));
location = "https://api.minecraft.id/gateway/start/" + encodeURIComponent(user) + "?callback=" + encodeURIComponent(callbackUrl);
};
actions.appendChild(p);
}
function onSocketMsg(event) {
@ -321,8 +326,13 @@ function connect() {
$(() => {
$("#cors-proxy").on("change", () => localStorage.setItem('cors-proxy', $("#cors-proxy").val()));
$("#cors-proxy").on("change", () => localStorage.setItem("cors-proxy", $("#cors-proxy").val()));
$("#cors-proxy").val(getCorsProxy());
$("#ws-url").on("change", () => {
localStorage.setItem("ws-url", $("#ws-url").val());
location.reload();
});
$("#ws-url").val(getWsUrl());
$("#login_submit_mc").on("click", () => loginMc($("#email").val(), $("#password").val()));
$("#login_submit_ms").on("click", loginMs);

View File

@ -1,7 +1,7 @@
// https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-auth-code
const redirectUrl = location.origin == "https://localhost:25543" ?
"https://localhost:25543/auth.html" : "https://viaversion.github.io/VIAaaS/src/main/resources/web/auth.html";
"https://localhost:25543/" : "https://viaversion.github.io/VIAaaS/src/main/resources/web/";
const msalConfig = {
auth: {

View File

@ -5,18 +5,95 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="VIAaaS">
<meta property="og:site_name" content="VIAaaS">
<meta name="description" content="VIAaaS">
<meta property="og:title" content="VIAaaS">
<meta property="og:description" content="ViaVersion as a Service - Standalone ViaVersion proxy">
<meta name="description" content="VIAaaS - ViaVersion as a Service">
<meta property="og:title" content="VIAaaS - ViaVersion as a Service">
<meta property="og:description" content="Allows authentication to your premium Minecraft account when using VIAaaS">
<meta property="og:image" content="https://raw.githubusercontent.com/ViaVersion/ViaVersion/a13c417352298c2269aed8736a76205f0040b705/fabric/src/main/resources/assets/viaversion/textures/squarelogo.png">
<meta property="og:type" content="game">
<link rel="icon" href="https://raw.githubusercontent.com/ViaVersion/ViaVersion/a13c417352298c2269aed8736a76205f0040b705/fabric/src/main/resources/assets/viaversion/textures/squarelogo.png">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
<link rel="stylesheet" href="style.css">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://cdn.jsdelivr.net/ https://cdnjs.cloudflare.com/ https://alcdn.msauth.net/; img-src data: https://*; connect-src 'self' http://localhost:*/ https: ws: wss:">
<meta name="referrer" content="no-referrer">
<!-- only accept http from localhost -->
<title>VIAaaS - ViaVersion as a Service</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.1/uuid.min.js"></script>
<script src="https://alcdn.msauth.net/browser/2.0.0-beta.4/js/msal-browser.js"></script>
<script src="auth_ms.js"></script>
</head>
<body>
<h1>VIAaaS</h1>
<p><a href="auth.html">Authenticator</a></p>
<p><a href="https://github.com/ViaVersion/VIAaaS">Source code</a></p>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">VIAaaS</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="accounts-tab" data-bs-toggle="tab" href="#accounts" role="tab" aria-controls="accounts" aria-selected="false">Accounts</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="settings-tab" data-bs-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="aboutDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
About
</a>
<ul class="dropdown-menu" aria-labelledby="aboutDropdown">
<li><a class="dropdown-item" href="https://github.com/ViaVersion/VIAaaS/">Source Code</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container tab-content" id="content">
<div id="home" class="tab-pane fade show active" role="tabpanel" aria-labelledby="home-tab">
<p>DO NOT TYPE YOUR CREDENTIALS IF YOU DON'T TRUST THIS VIAAAS INSTANCE OR THE CORS PROXY!</p>
<p>Mojang API calls in browser are called through a CORS Proxy. See
<a href="https://github.com/Rob--W/cors-anywhere">https://github.com/Rob--W/cors-anywhere</a>
for setting up one. Calling Mojang API from a remote IP address may block your account.</p>
<p>WebSocket connection status: <span id="connection_status">?</span></p>
<hr>
<p><span id="actions"></span></p>
<p><span id="listening"></span></p>
</div>
<div id="settings" class="tab-pane fade" role="tabpanel" aria-labelledby="settings-tab">
<div class="mb-3">
<label for="cors-proxy" class="form-label">CORS Proxy URL</label>
<input type="url" class="form-control" id="cors-proxy" placeholder="http://localhost:8080/">
</div>
<div class="mb-3">
<label for="ws-url" class="form-label">WebSocket URL</label>
<input type="url" class="form-control" id="ws-url" placeholder="ws://viaaas.example.com/ws">
</div>
</div>
<div id="accounts" class="tab-pane fade" role="tabpanel" aria-labelledby="accounts-tab">
<p>Browser Minecraft accounts:</p>
<div id="accounts-list"></div>
<hr>
<div id="add-account">
<button id="login_submit_ms" type="submit" class="btn btn-primary mb-3">Login with Microsoft</button>
<hr>
<div class="mb-3">
<label for="email" class="form-label">Email/Username</label>
<input type="text" id="email" name="email" class="form-control" placeholder="example@example.com">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control" placeholder="password">
</div>
<button id="login_submit_mc" type="submit" class="btn btn-primary mb-3">Login with Minecraft</button>
</div>
</div>
</div>
<script src="auth.js"></script>
</body>
</html>

View File

@ -1,23 +0,0 @@
body {
word-break: break-word;
font-family: sans-serif;
}
@media (min-width: 700px) {
#browser_accounts {
float: right;
width: 300px;
}
}
#browser_accounts {
text-align: center;
display: inline-block;
border: 1px solid black;
padding: 10px;
}
#connection_status {
background: black;
color: white;
}
.account_head {
width: 16px;
}