Added register page

public/assets/css/register.css

@@ -0,0 +1,95 @@
+.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;
+}

src/routers/account.js

@@ -211,6 +211,58 @@ router.post('/login', 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,
+		email: request.cookies.email,
+		username: request.cookies.username,
+		mii_name: request.cookies.mii_name,
+	};
+
+	response.clearCookie('error');
+	response.clearCookie('email');
+	response.clearCookie('username');
+	response.clearCookie('mii_name');
+
+	response.render('account_register', renderData);
+});
+
+router.post('/register', async (request, response) => {
+	const { email, username, mii_name, password, password_confirm } = request.body;
+
+	response.cookie('email', email, { domain: '.pretendo.network' });
+	response.cookie('username', username, { domain: '.pretendo.network' });
+	response.cookie('mii_name', mii_name, { domain: '.pretendo.network' });
+
+	const apiResponse = await util.apiPostGetRequest('/v1/register', {}, {
+		email, username, mii_name, password, password_confirm
+	});
+
+	if (apiResponse.statusCode !== 200) {
+		response.cookie('error', apiResponse.body.error, { domain: '.pretendo.network' });
+		return response.redirect('/account/register');
+	}
+
+	const tokens = apiResponse.body;
+
+	response.cookie('refresh_token', tokens.refresh_token, { domain: '.pretendo.network' });
+	response.cookie('access_token', tokens.access_token, { domain: '.pretendo.network' });
+	response.cookie('token_type', tokens.token_type, { domain: '.pretendo.network' });
+
+	response.clearCookie('error');
+	response.clearCookie('email');
+	response.clearCookie('username');
+	response.clearCookie('mii_name');
+
+	response.redirect('/account');
+});
+
+
+https://cdn.pretendo.cc/mii/1730592963/standard.tga
+
 router.get('/connect/discord', async (request, response) => {
 	let tokens;
 	try {

views/account_register.handlebars

@@ -0,0 +1,47 @@
+<link rel="stylesheet" href="/assets/css/register.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>
+		</a>
+		</div>
+	</form>
+	</div>
+
+	{{> footer }}
+
+</div>
+
+{{#if error}}
+<div class="banner-notice error">
+	<div>
+		<p>{{ error }}</p>
+	</div>
+</div>
+{{/if}}