#652 - add font color picker to accounts

src/main/resources/static/js/accounts.js

@@ -10,6 +10,12 @@ $(document).ready(function()
         document.getElementById('account-name').focus();
     }
 
+    $('#account-name').on('change keydown paste input', function()
+    {
+        let accountName = $(this).val();
+        document.getElementById('item-icon-fallback-name').innerText = accountName.charAt(0).toUpperCase();
+    });
+
     $('.button-request-delete-account').click(function()
     {
         fetchAndShowModalContent(this.dataset.url, '#deleteModalContainerOnDemand', '#modalConfirmDelete', function(){});

src/main/resources/templates/accounts/newAccount.ftl

@@ -19,6 +19,7 @@
 
         <#import "../helpers/customSelectMacros.ftl" as customSelectMacros>
         <#import "../helpers/iconSelect.ftl" as iconSelectMacros>
+        <#import "../helpers/fontColorPicker.ftl" as fontColorPickerMacros>
 
         <main>
             <div class="card main-card background-color">
@@ -47,7 +48,10 @@
                         </div>
 
                         <#-- icon -->
-                        <@iconSelectMacros.iconSelect id="account-icon" item=account/>
+                        <@iconSelectMacros.iconSelect id="account-icon" item=account showBackground=false/>
+
+                        <#-- font color -->
+                        <@fontColorPickerMacros.fontColorPicker account/>
 
                         <#-- state -->
                         <#if account.getAccountState()??>
@@ -92,7 +96,9 @@
         <!-- Scripts-->
         <#import "../helpers/scripts.ftl" as scripts>
         <@scripts.scripts/>
+        <script src="<@s.url '/js/libs/vanilla-picker.min.js'/>"></script>
         <script src="<@s.url '/js/accounts.js'/>"></script>
         <script src="<@s.url '/js/iconSelect.js'/>"></script>
+        <script src="<@s.url '/js/fontColorPicker.js'/>"></script>
     </@header.body>
 </html>
\ No newline at end of file