mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-09-07 16:36:55 -05:00
styles: update login/register forms design
This commit is contained in:
Ash Monty
1
package-lock.json
generated
1
package-lock.json
generated
@@ -5,6 +5,7 @@
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "website",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
|
||||
@@ -1,87 +1,125 @@
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.login-wrapper {
|
||||
.account-form-wrapper {
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
form.login {
|
||||
padding: 48px;
|
||||
background-color: #151934;
|
||||
.account-form-wrapper .logotype {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: -6px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.account-form-wrapper .logotype svg {
|
||||
width: 140px;
|
||||
}
|
||||
.account-form-wrapper .logotype svg text {
|
||||
font-size: 20px;
|
||||
transform: translate(593px, 495px);
|
||||
}
|
||||
|
||||
form.account {
|
||||
display: block;
|
||||
padding: 40px 48px;
|
||||
background-color: #292E53;
|
||||
color: var(--text-secondary);
|
||||
border-radius: 12px;
|
||||
max-width: calc(90vw - 92px);
|
||||
width: 400px;
|
||||
width: 360px;
|
||||
max-width: calc(90vw - 96px);
|
||||
}
|
||||
|
||||
form.login input {
|
||||
form.account h2 {
|
||||
margin: 0;
|
||||
color: var(--text)
|
||||
}
|
||||
|
||||
form.account p {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
form.account div {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
form.account input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: var(--btn-secondary);
|
||||
background-color: #353C6A;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text);
|
||||
width: calc(100% - 24px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
form.login input::placeholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
form.login input:focus {
|
||||
background-color: #fff;
|
||||
color: var(--btn-secondary);
|
||||
transition: 200ms;
|
||||
form.account input:focus {
|
||||
background-color: #4B5595;
|
||||
outline: none;
|
||||
transition: 150ms;
|
||||
}
|
||||
|
||||
form.login button {
|
||||
form.account label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
form.account button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
padding: 12px;
|
||||
background: var(--btn);
|
||||
padding: 12px 30px;
|
||||
background: #353C6A;
|
||||
margin-top: 18px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
form.login a.pwdreset {
|
||||
display: block;
|
||||
color: var(--text-secondary);
|
||||
form.account button[type="submit"] {
|
||||
background: var(--btn);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
form.account a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: var(--text-secondary);
|
||||
text-align: right;
|
||||
margin: 6px 0;
|
||||
width: 100%;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
form.login a.pwdreset:hover {
|
||||
form.account a:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
form.login .register {
|
||||
text-decoration: none;
|
||||
form.account a.pwdreset {
|
||||
margin-left: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
form.login .register button {
|
||||
background: var(--btn-secondary);
|
||||
form.account a.register {
|
||||
margin:auto;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 23px;
|
||||
form.account.register div:last-child {
|
||||
margin-top: 42px;
|
||||
}
|
||||
|
||||
@keyframes banner-notice {
|
||||
|
||||
@@ -1,95 +0,0 @@
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.register-wrapper {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
form.register {
|
||||
padding: 48px;
|
||||
background-color: #151934;
|
||||
border-radius: 12px;
|
||||
max-width: calc(90vw - 92px);
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
form.register input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: var(--btn-secondary);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
color: var(--text);
|
||||
width: calc(100% - 24px);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
form.register input::placeholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
form.register input:focus {
|
||||
background-color: #fff;
|
||||
color: var(--btn-secondary);
|
||||
transition: 200ms;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
form.register button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
padding: 12px;
|
||||
background: var(--btn);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form.register .login {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
form.register .login button {
|
||||
background: var(--btn-secondary);
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
@keyframes banner-notice {
|
||||
0% {top: -150px}
|
||||
20% {top: 35px}
|
||||
80% {top: 35px}
|
||||
100% {top: -150px}
|
||||
}
|
||||
.banner-notice {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: -150px;
|
||||
width: 100%;
|
||||
animation: banner-notice 5s;
|
||||
}
|
||||
.banner-notice div {
|
||||
padding: 4px 36px;
|
||||
border-radius: 5px;
|
||||
z-index: 3;
|
||||
}
|
||||
.banner-notice.error div {
|
||||
background: #A9375B;
|
||||
}
|
||||
@@ -279,6 +279,19 @@ router.post('/register', async (request, response) => {
|
||||
response.redirect('/account');
|
||||
});
|
||||
|
||||
router.get('/register', async (request, response) => {
|
||||
const renderData = {
|
||||
layout: 'main',
|
||||
locale: util.getLocale(request.locale.region, request.locale.language),
|
||||
localeString: request.locale.toString(),
|
||||
error: request.cookies.error
|
||||
};
|
||||
|
||||
response.clearCookie('error');
|
||||
|
||||
response.render('account_register', renderData);
|
||||
});
|
||||
|
||||
router.get('/connect/discord', async (request, response) => {
|
||||
let tokens;
|
||||
try {
|
||||
|
||||
@@ -1,36 +1,51 @@
|
||||
<link rel="stylesheet" href="/assets/css/login.css" />
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
{{> header}}
|
||||
|
||||
|
||||
<div class="login-wrapper">
|
||||
<h1 class="title dot">Login</h1>
|
||||
<form action="/account/login" method="post" class="login">
|
||||
<div>
|
||||
<input name="username" id="username" placeholder="Username" required>
|
||||
</div>
|
||||
<div>
|
||||
<input name="password" id="password" type="password" placeholder="Password" required>
|
||||
</div>
|
||||
<input name="grant_type" id="grant_type" type="hidden" value="password">
|
||||
<div>
|
||||
<button type="submit">Login</button>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/account/passwordreset" class="pwdreset">Forgot your password?</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/account/register" class="register">
|
||||
<button type="button">Don't have an account?</button>
|
||||
<div class="account-form-wrapper">
|
||||
<a class="logotype" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
|
||||
<g id="XMLID_6_" transform="translate(8.222 1.418)">
|
||||
<path id="XMLID_15_"
|
||||
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
|
||||
transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
|
||||
<path id="XMLID_14_"
|
||||
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
|
||||
transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
|
||||
<path id="XMLID_9_"
|
||||
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
|
||||
transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
|
||||
</g>
|
||||
</g>
|
||||
<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
|
||||
font-family="Poppins-Bold, Poppins" font-weight="700">
|
||||
<tspan x="0" y="0">Pretendo</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="/account/login" method="post" class="account">
|
||||
<h2>Sign in</h2>
|
||||
<p>Enter your account details below</p>
|
||||
<div>
|
||||
<label for="username">Username</label>
|
||||
<input name="username" id="username" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password">Password</label>
|
||||
<input name="password" id="password" type="password" required>
|
||||
<a href="/account/passwordreset" class="pwdreset">Forgot your password?</a>
|
||||
</div>
|
||||
<input name="grant_type" id="grant_type" type="hidden" value="password">
|
||||
<div class="buttons">
|
||||
<button type="submit">Login</button>
|
||||
<a href="/account/register" class="register">Don't have an account?</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{> footer }}
|
||||
|
||||
</div>
|
||||
|
||||
{{#if error}}
|
||||
|
||||
@@ -1,41 +1,61 @@
|
||||
<link rel="stylesheet" href="/assets/css/register.css" />
|
||||
<link rel="stylesheet" href="/assets/css/login.css" />
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
{{> header}}
|
||||
|
||||
|
||||
<div class="register-wrapper">
|
||||
<h1 class="title dot">Register</h1>
|
||||
<form action="/account/register" method="post" class="register">
|
||||
<div>
|
||||
<input name="email" id="email" type="email" placeholder="Email" value="{{ email }}" required>
|
||||
</div>
|
||||
<div>
|
||||
<input name="username" id="username" placeholder="Username" value="{{ username }}" minlength=6 maxlength=16 required>
|
||||
</div>
|
||||
<div>
|
||||
<input name="mii_name" id="mii_name" placeholder="Mii Name (Max 10 characters)" value="{{ mii_name }}" maxlength=10 required>
|
||||
</div>
|
||||
<div>
|
||||
<input name="password" id="password" type="password" placeholder="Password" autocomplete="new-password" required>
|
||||
</div>
|
||||
<div>
|
||||
<input name="password_confirm" id="password_confirm" type="password" placeholder="Confirm Password" required>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Register</button>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/account/login" class="login">
|
||||
<button type="button">Already have an account?</button>
|
||||
<div class="account-form-wrapper">
|
||||
<a class="logotype" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
|
||||
<g id="XMLID_6_" transform="translate(8.222 1.418)">
|
||||
<path id="XMLID_15_"
|
||||
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
|
||||
transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
|
||||
<path id="XMLID_14_"
|
||||
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
|
||||
transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
|
||||
<path id="XMLID_9_"
|
||||
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
|
||||
transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
|
||||
</g>
|
||||
</g>
|
||||
<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
|
||||
font-family="Poppins-Bold, Poppins" font-weight="700">
|
||||
<tspan x="0" y="0">Pretendo</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form action="/account/register" method="post" class="account register">
|
||||
<h2>Register</h2>
|
||||
<p>Enter your account details below</p>
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<input name="email" id="email" type="email" value="{{ email }}" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="username">Username</label>
|
||||
<input name="username" id="username" value="{{ username }}" minlength=6 maxlength=16 required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="mii_name">Mii Name (Max 10 characters)</label>
|
||||
<input name="mii_name" id="mii_name" value="{{ mii_name }}" maxlength=10 required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password">Password</label>
|
||||
<input name="password" id="password" type="password" autocomplete="new-password" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password_confirm">Confirm Password</label>
|
||||
<input name="password_confirm" id="password_confirm" type="password" autocomplete="new-password" required>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="submit">Register</button>
|
||||
<a href="/account/login" class="register">Already have an account?</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{> footer }}
|
||||
|
||||
</div>
|
||||
|
||||
{{#if error}}
|
||||
|
||||
Reference in New Issue
Block a user