Merge pull request 'Added Last Name display and made it editable' (#145) from SEND015 into main

Reviewed-on: #145

frontend/pweb/lib/pages/settings/profile/account/name/name.dart

@@ -17,16 +17,20 @@ class _AccountNameConstants {
 }
 
 class AccountName extends StatelessWidget {
-  final String name;
+  final String firstName;
+  final String lastName;
   final String title;
   final String hintText;
+  final String lastNameHint;
   final String errorText;
 
   const AccountName({
     super.key,
-    required this.name,
+    required this.firstName,
+    required this.lastName,
     required this.title,
     required this.hintText,
+    required this.lastNameHint,
     required this.errorText,
   });
 
@@ -34,12 +38,14 @@ class AccountName extends StatelessWidget {
   Widget build(BuildContext context) {
     return ChangeNotifierProvider(
       create: (ctx) => AccountNameState(
-        initialName: name,
+        initialFirstName: firstName,
+        initialLastName: lastName,
         errorMessage: errorText,
         accountProvider: ctx.read<AccountProvider>(),
       ),
       child: _AccountNameBody(
         hintText: hintText,
+        lastNameHint: lastNameHint,
       ),
     );
   }
@@ -48,9 +54,11 @@ class AccountName extends StatelessWidget {
 class _AccountNameBody extends StatelessWidget {
   const _AccountNameBody({
     required this.hintText,
+    required this.lastNameHint,
   });
 
   final String hintText;
+  final String lastNameHint;
 
   @override
   Widget build(BuildContext context) {
@@ -58,8 +66,9 @@ class _AccountNameBody extends StatelessWidget {
     final provider = context.watch<AccountProvider>();
     final theme = Theme.of(context);
 
-    final currentName = provider.account?.name ?? state.initialName;
-    state.syncName(currentName);
+    final currentFirstName = provider.account?.name ?? state.initialFirstName;
+    final currentLastName = provider.account?.lastName ?? state.initialLastName;
+    state.syncNames(currentFirstName, currentLastName);
 
     return Column(
       mainAxisSize: MainAxisSize.min,
@@ -69,6 +78,7 @@ class _AccountNameBody extends StatelessWidget {
           children: [
             AccountNameText(
               hintText: hintText,
+              lastNameHint: lastNameHint,
               inputWidth: _AccountNameConstants.inputWidth,
               borderWidth: _AccountNameConstants.borderWidth,
             ),

frontend/pweb/lib/pages/settings/profile/account/name/text.dart

@@ -9,11 +9,13 @@ class AccountNameText extends StatelessWidget {
   const AccountNameText({
     super.key,
     required this.hintText,
+    required this.lastNameHint,
     required this.inputWidth,
     required this.borderWidth,
   });
 
   final String hintText;
+  final String lastNameHint;
   final double inputWidth;
   final double borderWidth;
 
@@ -25,29 +27,55 @@ class AccountNameText extends StatelessWidget {
     if (state.isEditing) {
       return SizedBox(
         width: inputWidth,
-        child: TextFormField(
-          controller: state.controller,
-          style: theme.textTheme.headlineMedium?.copyWith(
-            fontWeight: FontWeight.bold,
-          ),
-          autofocus: true,
-          enabled: !state.isBusy,
-          decoration: InputDecoration(
-            hintText: hintText,
-            isDense: true,
-            border: UnderlineInputBorder(
-              borderSide: BorderSide(
-                color: theme.colorScheme.primary,
-                width: borderWidth,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            TextFormField(
+              controller: state.firstNameController,
+              style: theme.textTheme.headlineMedium?.copyWith(
+                fontWeight: FontWeight.bold,
+              ),
+              autofocus: true,
+              enabled: !state.isBusy,
+              decoration: InputDecoration(
+                hintText: hintText,
+                labelText: hintText,
+                isDense: true,
+                border: UnderlineInputBorder(
+                  borderSide: BorderSide(
+                    color: theme.colorScheme.primary,
+                    width: borderWidth,
+                  ),
+                ),
               ),
             ),
-          ),
+            const SizedBox(height: 8),
+            TextFormField(
+              controller: state.lastNameController,
+              style: theme.textTheme.headlineSmall?.copyWith(
+                fontWeight: FontWeight.w600,
+              ),
+              enabled: !state.isBusy,
+              decoration: InputDecoration(
+                hintText: lastNameHint,
+                labelText: lastNameHint,
+                isDense: true,
+                border: UnderlineInputBorder(
+                  borderSide: BorderSide(
+                    color: theme.colorScheme.primary,
+                    width: borderWidth,
+                  ),
+                ),
+              ),
+            ),
+          ],
         ),
       );
     }
 
+    final displayName = state.currentFullName.isNotEmpty ? state.currentFullName : hintText;
     return Text(
-      state.currentName,
+      displayName,
       style: theme.textTheme.headlineMedium?.copyWith(
         fontWeight: FontWeight.bold,
       ),

frontend/pweb/lib/pages/settings/profile/page.dart

@@ -23,8 +23,11 @@ class ProfileSettingsPage extends StatelessWidget {
   Widget build(BuildContext context) {
     final loc = AppLocalizations.of(context)!;
     final theme = Theme.of(context);
-    final accountName = context.select<AccountProvider, String?>(
-      (provider) => provider.account?.describable.name,
+    final accountFirstName = context.select<AccountProvider, String?>(
+      (provider) => provider.account?.name,
+    );
+    final accountLastName = context.select<AccountProvider, String?>(
+      (provider) => provider.account?.lastName,
     );
     final accountAvatarUrl = context.select<AccountProvider, String?>(
       (provider) => provider.account?.avatarUrl,
@@ -49,9 +52,11 @@ class ProfileSettingsPage extends StatelessWidget {
                 errorText: loc.avatarUpdateError,
               ),
               AccountName(
-                name: accountName ?? loc.userNamePlaceholder,
+                firstName: accountFirstName ?? '',
+                lastName: accountLastName ?? '',
                 title: loc.accountName,
                 hintText: loc.accountNameHint,
+                lastNameHint: loc.lastName,
                 errorText: loc.accountNameUpdateError,
               ),
               AccountPassword(