Skip to content

Modernise login forms and structure. #4216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: v3.0
Choose a base branch
from
Open

Modernise login forms and structure. #4216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
266 changes: 233 additions & 33 deletions DynmapCore/src/main/resources/extracted/web/css/dynmap_style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,22 @@
:root {
--colour-highlight: oklch(0.56 0.16 142.24);
--smokey-white: oklch(0.99 0 0);
--gunmetal: oklch(0.29 0.02 277.99);
--charcoal-grey: oklch(0.34 0.03 273.24);
--ship-grey: oklch(0.36 0.02 278.37);
--vampire-grey: oklch(0.45 0.02 278.64);
--cool-grey: oklch(0.72 0.02 270.22);
--slate-grey: oklch(0.6 0.02 264.54);
--status-error: oklch(0.51 0.12 22.01);
}

.montserrat-font {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

/* TILE DEBUGGING */
/*.leaflet-tile {
margin: -1;
Expand Down Expand Up @@ -1019,46 +1038,227 @@

/* Login/register panel */
.dynmaplogin {
text-align: center;
width: 100%;
font-weight: bold;
color: #FFFFFF;
display: grid;
width: 100%;
height: 100%;
place-items: center;
width: 100%;
font-weight: bold;
color: #FFFFFF;
background: var(--vampire-grey);
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
box-sizing: border-box;

& * {
box-sizing: border-box;
}

.container {
--outer-margin: 2rem;
container-type: inline-size;
container-name: container;
position: relative;
width: calc(100% - var(--outer-margin) * 2);
max-width: 960px;
padding: 3rem;
margin: var(--outer-margin);
padding-block-start: 3rem;
border-radius: 20px;
/*background-image: url("https://wallpapersok.com/images/file/minecraft-landscape-with-cloudy-sky-b9nxzmdukp1j51zq.jpg"); */
background-color: var(--gunmetal);
box-shadow: 0px 30px 30px -5px var(--ship-grey);

&::before {
position: absolute;
top: 0;
left: 0;
z-index: 0;
content: '';
display: flex;
width: 100%;
height: 100%;
background: url("https://cdn.modrinth.com/data/fRQREgAc/2eaa1e6a6fa03e485a319a628d6b29ba382855b4_96.webp");
background-position: right 1rem;
background-repeat: no-repeat;
background-size: 25%;
pointer-events: none;
opacity: 0.4;
mix-blend-mode: overlay;
}
}

h2 {
margin: 0;
font-size: 2rem;
font-weight: 700;
color: var(--smokey-white);

span {
color: var(--colour-highlight);
}
}
h3 {
margin: 0;
margin-block-end: 5rem;
padding-right: 40px;
font-size: 1rem;
font-weight: 700;
color: var(--cool-grey);
text-transform: uppercase;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
text-decoration-color: var(--colour-highlight);

&:has(~ .statusmessage > div) {
margin-block-end: 3rem;
}
}

p {
line-height: 1.4;
}

a {
color: var(--colour-highlight);
}

code {
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
padding: 4px 6px;
background: #000000;
}
border-radius: 5px;
}

table.loginregister {
color: #ffffff;
border: 1px solid rgba(64,64,64,0.6);
background: #bbb;
font-weight: bold;
margin: auto;
}
.loginregister {
font-size: 1rem;

td.login {
vertical-align: top;
color: #000000;
background-color: #bbb;
border: 1px solid rgba(64,64,64,0.6);
font-weight: bold;
margin: 2em;
width: 40em;
}
&:has(#register-form:target) #login-form {
display: none;
}

td.register {
vertical-align: top;
color: #000000;
background-color: #bbb;
border: 1px solid rgba(64,64,64,0.6);
font-weight: bold;
margin: 2em;
width: 40em;
#login-form { }

#register-form {
display: none;
&:target {
display: block;
}
}
input {
width: 100%;
padding: 0;
font-size: 1rem;
color: var(--smokey-white);
border: none;
background: transparent;
font-family: inherit;
font-weight: 500;
&::placeholder {
opacity: 0.1;
color: var(--smokey-white);

}
&:focus-visible {
background: none;
border: none;
outline: none;
}
&:is(:-webkit-autofill, :autofill) {
border: none;
}

&[type="submit"] {
max-width: 20ch;
padding-block: 1rem;
padding-inline: 2rem;
background-color: var(--colour-highlight);
border-radius: calc(infinity * 1px);
border: 2px solid transparent;
cursor: pointer;
transition: .2s background ease;
&:hover {
background-color: oklch(from var(--colour-highlight) calc(l - 0.04) c h);
}
&:focus-visible {
border: 2px solid var(--smokey-white);
}
}
}

label {
margin-block-end: .2rem;
color: var(--slate-grey);
font-size: 0.813rem;
font-weight: 400;
}
}

form {
display: grid;
grid-template-columns: minmax(100px, 1fr);
gap: 2rem;
max-width: 60ch;

p {
grid-column: 1 / -1;
}
}
.form-item {
position: relative;
grid-column: 1 / -1;
display: flex;
flex-direction: column;
padding-block: 1rem;
padding-inline: 2rem;
background-color: var(--charcoal-grey);
border-radius: 10px;
border: 2px solid transparent;
transition: border .5s ease;
&:focus-within {
border: 2px solid var(--colour-highlight);
color: black;
}
}

@container (width > 400px) {
form {
grid-template-columns: repeat(2, minmax(100px, 1fr));

}

.form-item.shortened {
grid-column: 1;
+ .shortened {
grid-column: 2;
}
}

h3 {
padding: 0;
}
}
}

div.statusmessage {
color: #FF0000;
font-weight: bold;
font-size: 24px;

position: relative;
z-index: 2;
&:empty {
display: none;
}
> div {
margin-block-end: 2rem;
padding: 1rem;
color: var(--smokey-white);
font-weight: bold;
font-size: 16px;
background: linear-gradient(90deg, var(--status-error) 30%, transparent 80%);
font-weight: 300;
border-radius: 5px;
}

.logincontainer {
Expand Down
91 changes: 48 additions & 43 deletions DynmapCore/src/main/resources/extracted/web/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@
<html>
<head>
<meta charset="utf-8" />

<META HTTP-EQUIV = "Pragma" CONTENT="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Minecraft Dynamic Map - Login/Register </title>
<link rel="icon" href="images/dynmap.ico" type="image/ico" />

<link rel="stylesheet" type="text/css" href="css/leaflet.css?_=${version}-${buildnumber}" />
<link rel="stylesheet" type="text/css" href="css/standalone.css?_=${version}-${buildnumber}" media="screen" />
<link rel="stylesheet" type="text/css" href="css/dynmap_style.css?_=${version}-${buildnumber}" media="screen" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script type="text/javascript" src="standalone/config.js?_=${version}-${buildnumber}"></script>
<script type="text/javascript" src="js/jquery-3.5.1.js?_=${version}-${buildnumber}"></script>

Expand Down Expand Up @@ -55,48 +58,50 @@
</head>
<body>
<div class='dynmaplogin'>
<h2>Minecraft Dynamic Map - Login/Register</h2>
<div id="status_message" class="statusmessage"></div>
<table class='loginregister'>
<tr><th>Existing User:</th></tr>
<tr><td class='login'>
<FORM METHOD=POST name=login ACTION="up/login">
<p>
Enter username and password:
<BR>
<BR>
<table>
<tr><td>Username</td><td><input type="text" size="20" name="j_username"></td></tr>
<tr><td>Password</td><td><input type="password" size="20" name="j_password"></td></tr>
</table>
<BR>
<input type="submit" name="login" value="Login">
</p>
</form>
<p>
</td></tr>
<tr><th>Register New User:</th></tr>
<tr>
<td class='register'>
<FORM METHOD=POST name=register ACTION="up/register">
<p>
Run '/dynmap webregister' and enter your username and registration code, and create a password:
<BR>
<BR>
<table>
<tr><td>Username</td><td><input type="text" size="20" name="j_username"></td></tr>
<tr><td>Password</td><td><input type="password" size="20" name="j_password"></td></tr>
<tr><td>Verify Password</td><td><input type="password" size="20" name="j_verify_password"></td></tr>
<tr><td>Registration Code</td><td><input type="text" size="20" name="j_passcode"></td></tr>
</table>
<BR>
<BR>
<input type="submit" name="register" value="Register">
</p>
</form>
</td>
</tr>
</table>
<div class="container">
<h3 class="">Minecraft Dynamic Map</h3>
<div id="status_message" class="statusmessage"></div>

<div class="loginregister">
<div class="login" id="login-form">
<h2>Login<span>.</span></h2>

<p>Need an account? <a href="#register-form">Register a new user</a></p>
<form method="post" name="login" action="up/login">
<div class="form-item">
<label for="j_username">Username</label><input type="text" size="20" name="j_username" id="j_username" placeholder="Enter username">
</div>
<div class="form-item">
<label for="j_password">Password</label><input type="password" size="20" name="j_password" id="j_password" placeholder="Enter password">
</div>
<input type="submit" name="login" value="Login">
</form>
</div>

<div class="register" id="register-form">
<h2>Register New User<span>.</span></h2>

<p>Already have an account? <a href="#login-form">Log in</a></p>
<form method="post" name="register" action="up/register">
<p>Run <code>/dynmap webregister [username]</code> enter your username and password, followed by the registration code</p>
<div class="form-item">
<label for="j_username">Username</label><input type="text" size="20" name="j_username" id="j_username" placeholder="Enter username">
</div>
<div class="form-item shortened">
<label for="j_password">Password</label><input type="password" size="20" name="j_password" id="j_password" placeholder="Enter password">
</div>
<div class="form-item shortened">
<label for="j_verify_password">Verify password</label><input type="password" size="20" name="j_verify_password" id="j_verify_password" placeholder="Re-enter password">
</div>
<div class="form-item">
<label for="j_passcode">Registration code</label><input type="password" size="20" name="j_passcode" id="j_passcode" placeholder="Enter registration code">
</div>
<input type="submit" name="register" value="Register">
</form>
</div>
</div>

</div>
</div>

</body>
Expand Down