feat: allow updating birthday in user account settings

2026-09-30 06:12:26 -05:00 · 2024-06-01 21:35:25 -05:00
parent 68bcd1f8a6
commit c5658dc6b3
4 changed files with 84 additions and 30 deletions
--- a/src/assets/user-info-settings/index.css
+++ b/src/assets/user-info-settings/index.css
@@ -20,7 +20,6 @@ button:active,

 header {
 	position: relative;
-	background: #37A985;
 	color: #FFF;
 	height: 70px;
 	line-height: 70px;
@@ -42,8 +41,8 @@ input[type="submit"] {
 	font-family: Poppins, Arial, Helvetica, sans-serif;
 	color: #45297A;
 	min-width: 200px;
-	box-sizing: content-box;
 	-webkit-box-sizing: content-box;
+	box-sizing: content-box;
 	-webkit-box-align: center;
 	-webkit-box-pack: center;
 	min-height: 60px;
@@ -58,7 +57,7 @@ input[type="submit"] {
 }

 .body-content {
-	margin: 30px 60px 0 200px;
+	margin: 30px 60px 0 220px;
 }

 div.group h2 {
@@ -82,6 +81,8 @@ div.group > * {

 div.group > p.content,
 div.group > input[type="text"],
+div.group > input[type="date"],
+div.group > textarea,
 div.group > select {
 	background: #FFF;
 	color: #6A6C75;
@@ -93,17 +94,18 @@ div.group > select {
 	width: 100%;
 	height: 58px;
 	box-sizing: border-box;
-	appearance: none;
-	-webkit-appearance: none;
 	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
 	text-indent: 1px;
 	text-overflow: '';
 	line-height: 38px;
-	user-select: none;
+	resize: none;
 }

-div.group > input[type="text"] {
-	color: #000;
+div.group > input[type="text"],
+div.group > input[type="date"] {
+	color: #9D6FF3;
 }

 div.group > select {
@@ -126,20 +128,22 @@ div.group > svg {
 	border: none;
 	height: 40px;
 	width: 40px;
-	box-sizing: border-box;
-	user-select: none;
 	padding: 0px;
 	margin-bottom: -10px;
 	margin-left: 5px;
+	-webkit-box-sizing: border-box;
+	-webkit-user-select: none;
+	box-sizing: border-box;
+	user-select: none;
 }

 .account-info {
 	float: left;
-	width: 200px;
-	box-sizing: content-box;
+	width: 220px;
 	-webkit-box-sizing: content-box;
 	-webkit-box-align: center;
 	-webkit-box-pack: center;
+	box-sizing: content-box;
 }

 .account-info > img {
@@ -149,7 +153,7 @@ div.group > svg {
 	overflow: hidden;
 	border-radius: 100%;
 	background: #E4DBF2;
-	margin: 30px 30px 0 35px;
+	margin: 30px 30px 0 46px;
 	box-shadow: 0-1px 2px rgba(0, 0, 0, 0.4);
 }

@@ -208,7 +212,7 @@ div.group > svg {
 }

 .account-info .tier-name {
-	margin: 12px auto;
+	margin: 5px auto;
 	line-height: 1.2em;
 	border-radius: 1.2em;
 	border-width: 2px;
@@ -233,7 +237,7 @@ div.radio {
 .server-selection input {
 	opacity: 0;
 	position: absolute;
-	width: 200px;
+	width: 130px;
 	height: 70px;
 	cursor: pointer;
 }
@@ -241,9 +245,10 @@ div.radio {
 div.radio label {
 	display: inline-block;
 	color: #6A6C75;
-	min-width: 200px;
-	box-sizing: content-box;
+	padding: 0 10px;
+	min-width: 110px;
 	-webkit-box-sizing: content-box;
+	box-sizing: content-box;
 	-webkit-box-align: center;
 	-webkit-box-pack: center;
 	text-align: center;
@@ -254,6 +259,11 @@ div.radio label {
 	margin: 5px;
 	font-weight: normal;
 	font-size: 15px;
+	-o-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	-ms-border-radius: 10px;
+	border-radius: 10px;
 }

 div.radio label h2 {
--- a/src/services/nnas/routes/account-settings.ts
+++ b/src/services/nnas/routes/account-settings.ts
@@ -19,6 +19,7 @@ import regionsList from '@/services/nnas/regions.json';
 const router = express.Router();

 const accountSettingsSchema = z.object({
+	birthdate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
 	gender: z.enum(['M', 'F']),
 	tz_name: z.string(),
 	region: z.coerce.number(),
@@ -99,10 +100,18 @@ router.get('/mii/:pid/:face', async function (request: express.Request, response
 		return;
 	}

-	const miiImage = await got(`${config.cdn.base_url}/mii/${request.params.pid}/${request.params.face}.png`).buffer();
+	try {
+		const url = `${config.cdn.base_url}/mii/${request.params.pid}/${request.params.face}.png`;
+		console.log(url);
+		const miiImage = await got(url).buffer();

-	response.set('Content-Type', 'image/png');
-	response.send(miiImage);
+		response.set('Content-Type', 'image/png');
+		response.send(miiImage);
+	} catch (error: any) {
+		LOG_ERROR(error);
+		response.sendStatus(404);
+		return;
+	}
 });

 /**
@@ -163,6 +172,7 @@ router.post('/update', async function (request: express.Request, response: expre
 			return;
 		}

+		pnid.birthdate = person.data.birthdate;
 		pnid.gender = person.data.gender;
 		pnid.region = region;
 		pnid.country = person.data.country;
--- a/src/types/services/nnas/account-settings.ts
+++ b/src/types/services/nnas/account-settings.ts
@@ -1,6 +1,7 @@
 import { GenderTypes } from '@/types/common/gender-types';

 export interface AccountSettings {
+	birthdate: string;
 	gender: GenderTypes;
 	tz_name: string;
 	region: number;
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -30,7 +30,7 @@
 				<h1>User Settings</h1>
 				<div class="group">
 					<h2>Birth Date</h2>
-					<p class="content"><%= PNID.birthdate %></p>
+					<input name="birthdate" type="date" class="content" value="<%= PNID.birthdate %>" min="1900-01-01" max="2024-06-01" pattern="[0-9\-]{10}" maxlength="10" onchange="dateValidation(this)"/>
 				</div>
 				<div class="group">
 					<h2>Gender</h2>
@@ -41,7 +41,7 @@
 				</div>
 				<div class="group">
 					<h2>Country</h2>
-					<select name="country" id="country" onclick="warning()">
+					<select name="country" id="country" onclick="countryChangeWarning()">
 						<% for (let region of regionsList) { %>
 						<option value="<%= region.iso_code %>" <% if (PNID.country === region.iso_code) { %>selected<% } %>><%= region.name %></option>
 						<% } %>
@@ -90,7 +90,7 @@
 								<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
 								<line x1="12" y1="22.08" x2="12" y2="12"></line>
 							</svg>
-							<h2>Production</h2>
+							<h2>Prod</h2>
 						</label>
 						<% if(PNID.access_level >= 1) { %>
 						<input type="radio" id="beta" name="server_selection" value="test" <% if (PNID.server_access_level === 'test') { %> checked="" <% } %> <% if(PNID.access_level < 1) { %> disabled <% } %> >
@@ -104,8 +104,11 @@
 						<% if(PNID.access_level === 3) { %>
 						<input type="radio" id="dev" name="server_selection" value="dev" <% if (PNID.server_access_level === 'dev') { %> checked="" <% } %> <% if(PNID.access_level < 3) { %> disabled <% } %> >
 						<label for="dev">
-							<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-								<polygon points="2,21 22,21 14,11.5 14,5 10,3 10,11.5"></polygon>
+							<svg xmlns="http://www.w3.org/2000/svg"" width="30" height="30" viewBox="0 0 256 256">
+								<path d="M109.77,97,83.82,52a8,8,0,0,0-11.55-2.54A95.94,95.94,0,0,0,32,119.14,8.1,8.1,0,0,0,40,128H92" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+								<path d="M146.23,97l26-44.94a8,8,0,0,1,11.55-2.54A95.94,95.94,0,0,1,224,119.14a8.1,8.1,0,0,1-8,8.86H164" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+								<path d="M146,159.18l25.83,44.73a8,8,0,0,1-3.56,11.26,96.24,96.24,0,0,1-80.54,0,8,8,0,0,1-3.56-11.26L110,159.18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+								<circle cx="128" cy="128" r="12"/>
 							</svg>
 							<h2>Dev</h2>
 						</label>
@@ -119,7 +122,7 @@
 						<label for="marketing_flag">
 							<h2>Receive</h2>
 						</label>
-							<input type="radio" id="false" name="marketing_flag" value="false" <% if (!PNID.flags.marketing) { %>checked=""<% } %>>
+						<input type="radio" id="false" name="marketing_flag" value="false" style="width: 195px;" <% if (!PNID.flags.marketing) { %>checked=""<% } %>>
 						<label for="marketing_flag">
 							<h2>Do Not Receive</h2>
 						</label>
@@ -146,12 +149,42 @@
 		</script>
 		<% } %>
 		<script>
-			var seen = false;
-			function warning() {
-				if(seen) return;
-				seen = true;
+			var seenCountry = false, seenBirthday = false;
+			function countryChangeWarning() {
+				if(seenCountry) return;
+				seenCountry = true;
 				wiiuDialog.alert('Warning: Changing your country may cause unexpected results. You may need to re-link your PNID for the changes to apply. \n\nFor more information, see:\nhttps://preten.do/PAS-727-0001', 'I Understand');
 			}
+
+			function birthdayChangeWarning() {
+				if(seenBirthday) return;
+				seenBirthday = true;
+				wiiuDialog.alert('Warning: Changing your birthday may cause unexpected results. You may need to re-link your PNID for the changes to apply. \n\nFor more information, see:\nhttps://preten.do/PAS-727-0002', 'I Understand');
+			}
+
+			function dateValidation(element) {
+				birthdayChangeWarning();
+				if (!isValidDate(element.value)) {
+					element.value = '<%= PNID.birthdate %>';
+					wiiuDialog.alert('Invalid date. Please use YYYY-MM-DD.', 'OK');
+				}
+			}
+
+			function isValidDate(s) {
+				var bits = s.split('-');
+				var y = bits[0],
+					m = bits[1],
+					d = bits[2];
+				//* Assume not leap year by default (note zero index for Jan)
+				var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+				//* If evenly divisible by 4 and not evenly divisible by 100,
+				//* or is evenly divisible by 400, then a leap year
+				if ((!(y % 4) && y % 100) || !(y % 400)) {
+					daysInMonth[1] = 29;
+				}
+				return !(/\D/.test(String(d))) && d > 0 && d <= daysInMonth[--m]
+			}
 		</script>
 	</body>