Theme switcher groundwork: ThemeVariant field through API + state

eFormAPI/eFormAPI.Web/Infrastructure/Models/Settings/User/UserSettingsModel.cs

@@ -28,6 +28,7 @@ public class UserSettingsModel
     public string Locale { get; set; }
     public int LanguageId { get; set; }
     public bool DarkTheme { get; set; }
+    public string ThemeVariant { get; set; }
     public string Formats { get; set; }
     public string TimeZone { get; set; }
     public string LoginRedirectUrl { get; set; }

eFormAPI/eFormAPI.Web/Infrastructure/Models/Users/UserInfoViewModel.cs

@@ -40,6 +40,7 @@ public class UserInfoViewModel
     public string Formats { get; set; }
     public string TimeZone { get; set; }
     public bool DarkTheme { get; set; }
+    public string ThemeVariant { get; set; }
     public bool IsDeviceUser { get; set; }
     public string ArchiveSoftwareVersion { get; set; }
     public string ArchiveModel { get; set; }

eFormAPI/eFormAPI.Web/Services/AccountService.cs

@@ -101,6 +101,7 @@ public async Task<OperationDataResult<UserSettingsModel>> GetUserSettings()
         var timeZone = string.IsNullOrEmpty(user.TimeZone) ? "Europe/Copenhagen" : user.TimeZone;
         var formats = string.IsNullOrEmpty(user.Formats) ? "de-DE" : user.Formats;
         var darkTheme = user.DarkTheme;
+        var themeVariant = string.IsNullOrEmpty(user.ThemeVariant) ? "eform" : user.ThemeVariant;
         var locale = string.IsNullOrEmpty(user.Locale) ? "da" : user.Locale;
         var core = await coreHelper.GetCore();
         var dbContextHelper = core.DbContextHelper;
@@ -121,6 +122,7 @@ public async Task<OperationDataResult<UserSettingsModel>> GetUserSettings()
             Locale = locale,
             LanguageId = languageId,
             DarkTheme = darkTheme,
+            ThemeVariant = themeVariant,
             Formats = formats,
             TimeZone = timeZone,
             LoginRedirectUrl = securityGroupRedirectLink,
@@ -158,6 +160,10 @@ public async Task<OperationResult> UpdateUserSettings(UserSettingsModel model)
         user.TimeZone = model.TimeZone;
         user.Formats = model.Formats;
         user.DarkTheme = model.DarkTheme;
+        if (!string.IsNullOrEmpty(model.ThemeVariant))
+        {
+            user.ThemeVariant = model.ThemeVariant;
+        }
         var updateResult = await userManager.UpdateAsync(user);
         if (!updateResult.Succeeded)
         {

eFormAPI/eFormAPI.Web/Services/AdminService.cs

@@ -83,6 +83,7 @@ public async Task<OperationDataResult<Paged<UserInfoViewModel>>> Index(UserInfoR
                         x.user.TimeZone,
                         x.user.Formats,
                         x.user.DarkTheme,
+                        x.user.ThemeVariant,
                         x.user.ArchiveModel,
                         x.user.ArchiveManufacturer,
                         x.user.ArchiveOsVersion,
@@ -116,6 +117,7 @@ public async Task<OperationDataResult<Paged<UserInfoViewModel>>> Index(UserInfoR
                 UserName = x.UserName,
                 Email = x.Email,
                 DarkTheme = x.DarkTheme,
+                ThemeVariant = x.ThemeVariant,
                 Language = x.Locale,
                 TimeZone = x.TimeZone,
                 Formats = x.Formats,

eFormAPI/eFormAPI.Web/eFormAPI.Web.csproj

@@ -56,8 +56,8 @@
     <PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="10.0.5" />
     <PackageReference Include="Microsoft.Extensions.PlatformAbstractions" Version="1.1.0" />
     <PackageReference Include="Microting.eForm" Version="10.0.17" />
-    <PackageReference Include="Microting.EformAngularFrontendBase" Version="10.0.21" />
-    <PackageReference Include="Microting.eFormApi.BasePn" Version="10.0.17" />
+    <PackageReference Include="Microting.EformAngularFrontendBase" Version="10.0.22" />
+    <PackageReference Include="Microting.eFormApi.BasePn" Version="10.0.18" />
     <PackageReference Include="PureOtp" Version="1.0.0.1" />
     <PackageReference Include="Sentry" Version="6.3.1" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="10.1.7" />

eform-client/src/app/common/models/settings/user-settings.model.ts

@@ -3,6 +3,7 @@ export class UserSettingsModel {
   formats: string;
   timeZone: string;
   darkTheme: boolean;
+  themeVariant: string;
   loginRedirectUrl: string;
   languageId: number;
   profilePicture: string;

eform-client/src/app/common/models/user/user-info-model.ts

@@ -8,6 +8,7 @@ export class UserInfoModel {
   fullName: string;
   role: string;
   darkTheme: boolean;
+  themeVariant?: string;
   isDeviceUser: boolean;
   language: string;
   timeZone: string;
@@ -36,6 +37,7 @@ export class UserInfoModel {
       this.fullName = data.fullName;
       this.role = data.role;
       this.darkTheme = data.darkTheme;
+      this.themeVariant = data.themeVariant;
       this.isDeviceUser = data.isDeviceUser;
       this.language = data.language;
       this.timeZone = data.timeZone;

eform-client/src/app/state/auth/auth.actions.ts

@@ -31,6 +31,11 @@ export const updateDarkTheme = createAction(
   (payload: boolean) => ({payload})
 );
 
+export const updateThemeVariant = createAction(
+  '[Auth] Update Theme Variant',
+  (payload: string) => ({payload})
+);
+
 export const updateUserInfo = createAction(
   '[Auth] Update User Info',
   (payload: { userSettings: OperationDataResult<UserSettingsModel>, userClaims: UserClaimsModel }) => ({payload})

eform-client/src/app/state/auth/auth.recuder.ts

@@ -7,6 +7,7 @@ import {
   loadAuthSuccess, logout,
   refreshToken,
   updateCurrentUserLocaleAndDarkTheme, updateDarkTheme, updateSideMenuOpened,
+  updateThemeVariant,
   updateUserInfo, updateUserLocale
 } from './';
 import {StoreStatusEnum} from 'src/app/common/const';
@@ -21,6 +22,7 @@ export interface AuthCurrentUser {
   locale?: string;
   languageId?: number;
   darkTheme?: boolean;
+  themeVariant?: string;
   loginRedirectUrl?: string;
   claims?: UserClaimsModel;
   isFirstUser: boolean,
@@ -61,6 +63,7 @@ export const authInitialState: AuthState = {
     locale: 'da', // TODO add env for test run
     languageId: 0,
     darkTheme: false,
+    themeVariant: 'eform',
     loginRedirectUrl: '',
     isFirstUser: false,
     avatarUrl: '',
@@ -158,6 +161,7 @@ const _authReducer = createReducer(
     currentUser: {
       ...state.currentUser,
       darkTheme: payload.userSettings.model.darkTheme,
+      themeVariant: payload.userSettings.model.themeVariant || 'eform',
       locale: payload.userSettings.model.locale,
       loginRedirectUrl: payload.userSettings.model.loginRedirectUrl || '',
       claims: payload.userClaims,
@@ -209,6 +213,13 @@ const _authReducer = createReducer(
       darkTheme: payload
     }
   })),
+  on(updateThemeVariant, (state, {payload}) => ({
+    ...state,
+    currentUser: {
+      ...state.currentUser,
+      themeVariant: payload
+    }
+  })),
 );
 
 export function authReducer(state: AuthState | undefined, action: any) {

eform-client/src/app/state/auth/auth.selector.ts

@@ -32,6 +32,8 @@ export const selectSideMenuOpened
   = createSelector(selectAuth, (state: AuthState) => state.sideMenuOpened);
 export const selectIsDarkMode
   = createSelector(selectAuthUser, (state) => state.darkTheme);
+export const selectThemeVariant
+  = createSelector(selectAuthUser, (state) => state.themeVariant || 'eform');
 export const selectCurrentUserLocale
   = createSelector(selectAuthUser, (state) => state.locale);
 export const selectCurrentUserLanguageId