112 lines
3.9 KiB
JavaScript
112 lines
3.9 KiB
JavaScript
export class ServerAuth {
|
|
constructor (address, port, tlsEnabled) {
|
|
this.address = address;
|
|
this.port = port;
|
|
this.isTLSenabled = !!tlsEnabled;
|
|
}
|
|
|
|
getAuth () {
|
|
const serverdata = JSON.parse(localStorage.getItem(`server:${
|
|
!!this.isTLSenabled ? "wss" : "ws"
|
|
}:${address}:${port}`) ?? "null");
|
|
if (!serverdata) return null;
|
|
}
|
|
}
|
|
|
|
// Authorization form
|
|
ServerAuth.authForm = document.createElement("div");
|
|
["auth-window"].forEach(c =>
|
|
ServerAuth.authForm.classList.add(c));
|
|
ServerAuth.authForm.innerHTML = `
|
|
<center><h1>Authorization</h1></center>
|
|
<hr/>
|
|
|
|
<div id="auth-zone">
|
|
<center style="" id="register" class="auth-act-item">
|
|
<div class="params-auth">
|
|
<div class="btn-group" role="group" style="width: 90%; margin-bottom: 15px;">
|
|
<button type="button" class="btn btn-light text-dark btn-outline-light">Register</button>
|
|
<button type="button" class="btn btn-dark btn-outline-light" id="menu-log-in">Log-In</button>
|
|
</div>
|
|
|
|
<!-- Field: username -->
|
|
<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
|
|
<label class="form-label">Username</label>
|
|
<input type="text" class="form-control text-light bg-dark" id="rg.username">
|
|
<div class="form-text text-light">Your username into server.</div>
|
|
</div>
|
|
|
|
<!-- Field: password -->
|
|
<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
|
|
<label class="form-label">Password</label>
|
|
<input type="password" class="form-control text-light bg-dark" id="rg.password">
|
|
<div class="form-text text-light">Your password into server.</div>
|
|
</div>
|
|
<!-- Not field: retry password -->
|
|
<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
|
|
<label class="form-label">Retry password</label>
|
|
<input type="password" class="form-control text-light bg-dark" id="rg.retry-password">
|
|
<div class="form-text text-light">Retry password for you don't forget password.</div>
|
|
</div>
|
|
|
|
<!-- Field: server-code -->
|
|
<div class="mb-3" style="width: 90%; margin-bottom: 15px;" id="server-code-form" hidden>
|
|
<label class="form-label">Server password</label>
|
|
<input type="text" class="form-control text-light bg-dark" id="rg.server-code">
|
|
<div class="form-text text-light">Enter the password from server.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-auth-block">
|
|
<hr><button type="button" class="btn btn-dark btn-outline-light" id="reg-btn">Register</button>
|
|
</div>
|
|
</center>
|
|
|
|
<center style="" id="log-in" class="auth-act-item" hidden>
|
|
<div class="params-auth">
|
|
<div class="btn-group" role="group" style="width: 90%; margin-bottom: 15px;">
|
|
<button type="button" class="btn btn-dark btn-outline-light" id="menu-register">Register</button>
|
|
<button type="button" class="btn btn-light text-dark btn-outline-light">Log-In</button>
|
|
</div>
|
|
|
|
<!-- Field: username -->
|
|
<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
|
|
<label class="form-label">Username</label>
|
|
<input type="text" class="form-control text-light bg-dark" id="username">
|
|
<div class="form-text text-light">Your username into server.</div>
|
|
</div>
|
|
|
|
<!-- Field: password -->
|
|
<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
|
|
<label class="form-label">Password</label>
|
|
<input type="password" class="form-control text-light bg-dark" id="password">
|
|
<div class="form-text text-light">Your password into server.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-auth-block">
|
|
<hr><button type="button" class="btn btn-dark btn-outline-light" id="auth-btn">Log-In</button>
|
|
</div>
|
|
</center>
|
|
`;
|
|
|
|
// Main menu form
|
|
ServerAuth.mainMenuForm = document.createElement("div");
|
|
["mainmenu-window"].forEach(c =>
|
|
ServerAuth.mainMenuForm.classList.add(c));
|
|
ServerAuth.mainMenuForm.innerHTML = `
|
|
<div id="games-panel" hidden>
|
|
<div id="games-content">
|
|
<center><h2>Games</h2></center><hr/>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main-panel" >
|
|
<div id="main-content">
|
|
<center><h2>Your Profile</h2></center><hr/>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mainmenu-load" hidden><center>Loading...</center></div>
|
|
`;
|