Added verifiy email address route and hooked up appearance tab

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/+layout.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
     import * as Card from '$comp/ui/card';
     import { Separator } from '$comp/ui/separator';
+    import { accessToken } from '$features/auth/index.svelte';
+    import { getMeQuery } from '$features/users/api.svelte';
+
+    import type { NavigationItemContext } from '../../routes';
 
     import SidebarNav from './(components)/sidebar-nav.svelte';
     import { routes } from './routes';
 
     let { children } = $props();
+
+    const userQuery = getMeQuery();
+    let isAuthenticated = $derived(accessToken.value !== null);
+    const filteredRoutes = $derived.by(() => {
+        const context: NavigationItemContext = { authenticated: isAuthenticated, user: userQuery.data };
+        return routes.filter((route) => (route.show ? route.show(context) : true));
+    });
 </script>
 
 <Card.Root>
@@ -17,7 +28,7 @@
     <Card.Content>
         <div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
             <aside class="-mx-4 lg:w-1/5">
-                <SidebarNav {routes} />
+                <SidebarNav routes={filteredRoutes} />
             </aside>
             <div class="flex-1">
                 {@render children()}

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/appearance/+page.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
     import { H3, Muted } from '$comp/typography';
-    import { Button } from '$comp/ui/button';
     import { Label } from '$comp/ui/label';
     import * as RadioGroup from '$comp/ui/radio-group';
     import { Separator } from '$comp/ui/separator';
+    import { setMode, userPrefersMode } from 'mode-watcher';
 
     import ThemePreview from './(components)/ThemePreview.svelte';
 
-    async function onSave() {}
+    function onUserThemePreferenceChange(mode?: string) {
+        setMode(mode as 'dark' | 'light' | 'system');
+    }
 </script>
 
 <div class="space-y-6">
@@ -17,8 +19,13 @@
     </div>
     <Separator />
 
-    <form onsubmit={onSave}>
-        <RadioGroup.Root class="grid max-w-xl grid-cols-3 gap-8 pt-2" orientation="horizontal" value="light">
+    <form>
+        <RadioGroup.Root
+            class="grid max-w-xl grid-cols-3 gap-8 pt-2"
+            orientation="horizontal"
+            onValueChange={onUserThemePreferenceChange}
+            value={$userPrefersMode}
+        >
             <Label class="[&:has([data-state=checked])>div]:border-primary" for="light">
                 <RadioGroup.Item class="sr-only" id="light" value="light" />
                 <ThemePreview mode="light" />
@@ -35,9 +42,5 @@
                 <div class="pt-2 text-center">System</div>
             </Label>
         </RadioGroup.Root>
-
-        <div class="pt-2">
-            <Button type="submit">Save</Button>
-        </div>
     </form>
 </div>

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/routes.ts

@@ -2,6 +2,7 @@ import IconAccount from '~icons/mdi/account';
 import IconSessions from '~icons/mdi/account-multiple';
 import IconNotifications from '~icons/mdi/bell';
 import IconPassword from '~icons/mdi/form-textbox-password';
+import IconVerify from '~icons/mdi/shield-check';
 import IconAppearance from '~icons/mdi/theme-light-dark';
 
 import type { NavigationItem } from '../../routes';
@@ -36,5 +37,12 @@ export const routes: NavigationItem[] = [
         href: '/next/account/sessions',
         icon: IconSessions,
         title: 'Sessions'
+    },
+    {
+        group: 'My Account',
+        href: '/next/account/verify',
+        icon: IconVerify,
+        show: () => false,
+        title: 'Verify'
     }
 ];

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/verify/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { useFetchClient } from '@exceptionless/fetchclient';
+    import { toast } from 'svelte-sonner';
+
+    const client = useFetchClient();
+    const token = $page.url.searchParams.get('token');
+
+    async function verifyAccount() {
+        if (token) {
+            try {
+                await client.post('/users/verify-email-address', undefined, {
+                    params: { token }
+                });
+                toast.success('Your account has been successfully verified.');
+            } catch {
+                toast.error('An error occurred while verifying your account.');
+            }
+        }
+
+        await goto('/next/account/manage');
+    }
+
+    verifyAccount();
+</script>

src/Exceptionless.Web/Controllers/UserController.cs

@@ -212,8 +212,8 @@ public async Task<ActionResult<UpdateEmailAddressResult>> UpdateEmailAddressAsyn
     /// Verify email address
     /// </summary>
     /// <param name="token">The token identifier.</param>
-    /// <response code="400">Verify Email Address Token has expired.</response>
     /// <response code="404">The user could not be found.</response>
+    /// <response code="422">Verify Email Address Token has expired.</response>
     [HttpGet("verify-email-address/{token:token}")]
     public async Task<IActionResult> VerifyAsync(string token)
     {
@@ -228,7 +228,10 @@ public async Task<IActionResult> VerifyAsync(string token)
         }
 
         if (!user.HasValidVerifyEmailAddressTokenExpiration(_timeProvider))
-            return BadRequest("Verify Email Address Token has expired.");
+        {
+            ModelState.AddModelError<User>(m => m.VerifyEmailAddressTokenExpiration, "Verify Email Address Token has expired.");
+            return ValidationProblem(ModelState);
+        }
 
         user.MarkEmailAddressVerified();
         await _repository.SaveAsync(user, o => o.Cache());
@@ -240,6 +243,7 @@ public async Task<IActionResult> VerifyAsync(string token)
     /// Resend verification email
     /// </summary>
     /// <param name="id">The identifier of the user.</param>
+    /// <response code="200">The user verification email has been sent.</response>
     /// <response code="404">The user could not be found.</response>
     [HttpGet("{id:objectid}/resend-verification-email")]
     public async Task<IActionResult> ResendVerificationEmailAsync(string id)