Merge pull request #135 from CommonsEngine/feat/account-settings

Add Account Settings Flow

Author: kasunben

.prettierignore

@@ -6,8 +6,10 @@ prisma/reset.sh
 prisma/schema.prisma
 # Ignore Handlebars templates that use conditional attrs
 platform/src/views/layouts/spa/index.html
+platform/src/views/_partials/header.html
 platform/src/views/_partials/layout/head.html
 platform/src/views/_partials/sidebar.html
+platform/src/views/_partials/modal/account-settings.html
 platform/src/views/register.html
 plugins/**
 tools/plugin-templates/

platform/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@sovereign/platform",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "Core runtime and service framework for the Sovereign platform",
   "license": "AGPL-3.0",
   "main": "./index.cjs",

platform/src/config/env.js

@@ -89,6 +89,8 @@ const baseTemplate = Object.freeze({
   TOTP_RECOVERY_CODES: Number(process.env.TOTP_RECOVERY_CODES ?? 8),
   TOTP_RECOVERY_LENGTH: Number(process.env.TOTP_RECOVERY_LENGTH ?? 10),
 
+  PROFILE_PICTURE_MAX_BYTES: Number(process.env.PROFILE_PICTURE_MAX_BYTES ?? 2 * 1024 * 1024),
+
   DATABASE_URL: process.env.DATABASE_URL || `file:${defaultDbPath}`,
 
   DEFAULT_USER_ROLE: process.env.DEFAULT_USER_ROLE || "platform:user",

platform/src/handlers/auth/login.js

@@ -49,9 +49,18 @@ export default async function login(req, res) {
           select: {
             id: true,
             name: true,
+            firstName: true,
+            lastName: true,
+            pictureUrl: true,
             status: true,
             passwordHash: true,
             primaryEmailId: true,
+            profile: {
+              select: {
+                locale: true,
+                timezone: true,
+              },
+            },
             primaryEmail: {
               select: { id: true, email: true, isVerified: true },
             },

platform/src/middlewares/auth.js

@@ -35,6 +35,11 @@ export async function requireAuth(req, res, next) {
       id: session.userId,
       name: session.user.name,
       email: primaryEmail,
+      firstName: session.user.firstName ?? null,
+      lastName: session.user.lastName ?? null,
+      pictureUrl: session.user.pictureUrl ?? null,
+      locale: session.user.locale ?? null,
+      timezone: session.user.timezone ?? null,
       primaryEmailId: session.user.primaryEmail?.id || session.user.primaryEmailId || null,
       roles,
       role: roles[0] || null,
@@ -69,6 +74,11 @@ export async function requireAuth(req, res, next) {
         req.user = {
           id: guest.id,
           name: guest.name,
+          firstName: guest.firstName ?? null,
+          lastName: guest.lastName ?? null,
+          pictureUrl: guest.pictureUrl ?? null,
+          locale: guest.locale ?? null,
+          timezone: guest.timezone ?? null,
           email: guestEmail || null,
           primaryEmailId: guestEmailId || guest.primaryEmailId || null,
           roles: [],
@@ -91,6 +101,11 @@ export async function requireAuth(req, res, next) {
       req.user = {
         id: session.userId,
         name: session.user.name,
+        firstName: session.user.firstName ?? null,
+        lastName: session.user.lastName ?? null,
+        pictureUrl: session.user.pictureUrl ?? null,
+        locale: session.user.locale ?? null,
+        timezone: session.user.timezone ?? null,
         email: primaryEmail,
         primaryEmailId: session.user.primaryEmail?.id || session.user.primaryEmailId || null,
         roles,

platform/src/middlewares/exposeGlobals.js

@@ -1,6 +1,7 @@
 import path from "node:path";
 
 import * as fs from "$/utils/fs.js";
+import env from "$/config/env.js";
 
 // TODO: Utilize config/head.js for these
 
@@ -67,6 +68,8 @@ const pluginAccessible = (module, pluginAccess) => {
 };
 
 export default function exposeGlobals(req, res, next) {
+  const config = env();
+
   if (req.path.startsWith("/api/") || req.path.startsWith("/auth/")) {
     return next();
   }
@@ -111,6 +114,12 @@ export default function exposeGlobals(req, res, next) {
 
   res.locals.user = {
     name: req.user?.name || "guest",
+    firstName: req.user?.firstName ?? null,
+    lastName: req.user?.lastName ?? null,
+    email: req.user?.email ?? null,
+    pictureUrl: req.user?.pictureUrl ?? null,
+    locale: req.user?.locale ?? null,
+    timezone: req.user?.timezone ?? null,
     primaryRole: req.user?.role || null,
     roles: Array.isArray(req.user?.roles) ? req.user.roles : [],
   };
@@ -152,5 +161,12 @@ export default function exposeGlobals(req, res, next) {
     res.locals.showSidebar = activeModule ? activeModule?.ui?.layout?.sidebar !== false : true;
   }
 
+  res.locals.accountSettings = {
+    passwordMinLength: config.AUTH_PASSWORD_MIN_LENGTH,
+    supportedLocales: Array.isArray(config.LOCALES_SUPPORTED) ? config.LOCALES_SUPPORTED : [],
+    timezoneDefault: config.TIMEZONE_DEFAULT,
+    profilePictureMaxBytes: Number(config.PROFILE_PICTURE_MAX_BYTES ?? 0),
+  };
+
   next();
 }

platform/src/public/css/sv_styled.css

@@ -284,6 +284,18 @@
       color var(--transition-base) var(--transition-easing-standard),
       box-shadow var(--transition-base) var(--transition-easing-standard);
   }
+  .sv-header__user-avatar[data-has-avatar="true"] svg {
+    display: none;
+  }
+  .sv-header__user-avatar[data-has-avatar="false"] .sv-header__user-avatar-img {
+    display: none;
+  }
+  .sv-header__user-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
   .sv-header__user-avatar > img {
     width: 100%;
     height: 100%;
@@ -832,6 +844,52 @@
     /* uses your .button styles; this adds spacing consistency */
     --no-op: 0; /* workaround for empty rule */
   }
+  .account-settings__section {
+    display: grid;
+    gap: var(--space-s, 12px);
+  }
+  .account-settings__picture {
+    display: flex;
+    align-items: center;
+    gap: var(--space-m, 16px);
+    flex-wrap: wrap;
+  }
+  .account-settings__picture-preview {
+    width: 80px;
+    height: 80px;
+    border-radius: var(--radius-round);
+    border: 1px solid var(--color-border-primary);
+    background: var(--color-bg-muted);
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    position: relative;
+  }
+  .account-settings__picture-preview[data-picture-loaded="true"]
+    .account-settings__picture-placeholder {
+    display: none;
+  }
+  .account-settings__picture-preview[data-picture-loaded="true"] img {
+    display: block;
+  }
+  .account-settings__picture-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: none;
+  }
+  .account-settings__picture-placeholder {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    color: var(--color-text-secondary);
+  }
+  .account-settings__picture-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs, 6px);
+  }
   /* Responsive */
   @media (max-width: 640px) {
     .sv-modal__dialog {