diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/index.html b/gemp-lotr/gemp-lotr-async/src/main/web/index.html
index 7e33bb016..94902330d 100644
--- a/gemp-lotr/gemp-lotr-async/src/main/web/index.html
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/index.html
@@ -16,116 +16,7 @@
-
-
+
@@ -163,116 +54,11 @@
-
+
+
-
+
GEMP: Play the Lord of the Rings TCG
diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/index.css b/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/index.css
new file mode 100644
index 000000000..036c8a6a7
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/index.css
@@ -0,0 +1,107 @@
+shtml {
+ height: 100%;
+}
+body {
+ font-size: 100%;
+ height: 100%;
+ background-image: url('../../../images/dwarrowdelf.jpg');
+ background-size: cover;
+ background-repeat:no-repeat;
+ background-position: center center;
+ background-color: #000000;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ margin: 0;
+}
+
+.centerContainer {
+ margin: 0;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ margin-top: 150px;
+}
+
+.banner {
+ display: block;
+ text-align: center;
+ background-color: #222222CC;
+ width: 105vw;
+ left: -2.5vw;
+ padding: 10px;
+ color: #D98E04;
+ font-size: 500%;
+ margin: -5px 0 0 0;
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ align-items: stretch;
+}
+
+.login {
+ margin: 10px;
+ padding: 10px;
+ font-size: 125%;
+ display:grid;
+ grid-row-gap: 10px;
+}
+
+.status, .error {
+ margin: 0;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.status {
+ color:#ffffff;
+ overflow:visible
+}
+
+.error {
+ color: #ff0000
+}
+
+.interaction {
+ margin: 0;
+ margin-left: auto;
+ margin-right: auto;
+ color: #ffffff;
+}
+
+.info {
+ text-align: center;
+ background-color: #222222CC;
+ margin-bottom: 150px;
+ width: 100vw;
+ margin-left: calc(-50vw + 50%);
+ color: #FFFFFF;
+}
+
+.sw-shoutout {
+ margin: auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+input {
+ font-size: 90%;
+}
+
+.ui-button-text-only .ui-button-text {
+ font-size: 70%;
+ padding: .2em .5em;
+}
+
+a {
+ color: #BF6B04;
+}
+
+a:visited {
+ color: #A63F03;
+}
diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/login.js b/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/login.js
new file mode 100644
index 000000000..a990903a9
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/login.js
@@ -0,0 +1,104 @@
+
+var comm = new GempLotrCommunication("/gemp-lotr-server", function () {
+ alert("Unable to contact the server");
+});
+
+function register() {
+ var login = $("#login").val();
+ var password = $("#password").val();
+ var password2 = $("#password2").val();
+ if (password != password2) {
+ $(".error").html("Password and Password repeated are different! Try again");
+ } else {
+ comm.register(login, password, function () {
+ location.href = "/gemp-lotr/hall.html";
+ },
+ {
+ "0": function () {
+ alert("Unable to connect to server, either server is down or there is a problem" +
+ " with your internet connection");
+ },
+ "400": function () {
+ $(".error").html("Login is invalid. Login must be between 2-10 characters long, and contain only
" +
+ " english letters, numbers or _ (underscore) and - (dash) characters.");
+ },
+ "409": function () {
+ $(".error").html("User with this login already exists in the system. Try a different one.");
+ },
+ "503": function () {
+ $(".error").html("Server is down for maintenance. Please come at a later time.");
+ }
+ });
+ }
+
+}
+
+function registrationScreen() {
+ comm.getRegistrationForm(
+ function (html) {
+ $(".error").html();
+ $(".interaction").html(html);
+ $("#registerButton").button().click(register);
+ });
+}
+
+function login() {
+ var login = $("#login").val();
+ var password = $("#password").val();
+ comm.login(login, password, function () {
+ location.href = "/gemp-lotr/hall.html";
+ },
+ {
+ "0": function () {
+ alert("Unable to connect to server, either server is down or there is a problem" +
+ " with your internet connection");
+ },
+ "401": function () {
+ $(".error").html("Invalid username or password. Try again.");
+ loginScreen();
+ },
+ "403": function () {
+ $(".error").html("You have been permanently banned. If you think it was a mistake you can try sending a private message to Merrick_H on
TLHH forums.");
+ $(".interaction").html("");
+ },
+ "409": function () {
+ $(".error").html("You have been temporarily banned. You can try logging in at a later time. If you think it was a mistake you can try sending a private message to Merrick_H on
TLHH forums.");
+ $(".interaction").html("");
+ },
+ "503": function () {
+ $(".error").html("Server is down for maintenance. Please come at a later time.");
+ }
+ });
+}
+
+function loginScreen() {
+ $(".interaction").html("");
+ $(".interaction").append("Login below, or ");
+ var registerButton = $("
Register
").button();
+ registerButton.click(registrationScreen);
+
+ $(".interaction").append(registerButton);
+ $(".interaction").append("
Login:
Password:
");
+
+ var loginButton = $("
Login
").button();
+ loginButton.click(login);
+
+ $("#password").keypress(function (e) {
+ if (e.which == 13) {
+ login();
+ e.preventDefault();
+ return false;
+ }
+ });
+
+ $(".interaction").append(loginButton);
+}
+
+$(document).ready(
+ function () {
+ comm.getStatus(
+ function (html) {
+ $(".status").append(html);
+ });
+ loginScreen();
+ });
\ No newline at end of file