NewSmoop/management-ui/src/customcompometns/UserSettings.vue

<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Sun, Moon } from 'lucide-vue-next'
import { useColorMode } from '@vueuse/core';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import type { Users } from '@/lib/interfaces';
import { api } from '@/lib/api';
import { X } from 'lucide-vue-next';

const mode = useColorMode()
const modeLabel = computed(() => {
    if (mode.value === 'auto') return 'System'
    return mode.value === 'dark' ? 'Dark' : 'Light'
})
type ChangePasswordDto = {
    userId?: number
    oldPassword: string
    newPassword: string
}
const router = useRouter()
// ---- State ----
const user = ref<Users | null>(null)
const loadingProfile = ref(false)

const oldPassword = ref('')
const newPassword = ref('')

const submitting = ref(false)
const errorMsg = ref<string | null>(null)
const successMsg = ref<string | null>(null)
onMounted(async () => {
    loadingProfile.value = true
    try {
        const { data } = await api.get<Users>('/users/profile')
        user.value = data
    } catch (err: any) {
        // 401 is handled by interceptor; still surface generic error if needed
        errorMsg.value = err?.response?.data?.error || 'Failed to load profile.'
    } finally {
        loadingProfile.value = false
    }
})
async function submitChangePassword() {
    errorMsg.value = null
    successMsg.value = null

    if (!user.value) {
        errorMsg.value = 'User profile not loaded.'
        return
    }
    if (!newPassword.value) {
        errorMsg.value = 'New password is required.'
        return
    }

    const payload: ChangePasswordDto = {
        userId: user.value.id, // optional in DTO, but we provide it
        oldPassword: oldPassword.value,
        newPassword: newPassword.value,
    }

    submitting.value = true
    try {
        await api.post('/auth/change_password', payload)
        successMsg.value = 'Password changed successfully.'
        // Clear inputs
        oldPassword.value = ''
        newPassword.value = ''
    } catch (err: any) {
        errorMsg.value =
            err?.response?.data?.error ||
            err?.response?.data?.message ||
            'Failed to change password.'
    } finally {
        submitting.value = false
    }
}

function goBack() {
    router.back()
}
</script>
<template>
    <div class="w-full h-full flex items-center justify-center px-4">
        <Card class="flex w-[600px]">
            <CardHeader>
                <div class="flex items-center justify-between">
                    <CardTitle>
                        Settings
                    </CardTitle>
                    <Button variant="ghost" class="w-auto px-4" @click="goBack">
                        <X/>
                    </Button>
                </div>

            </CardHeader>
            <CardContent>
                <form class="grid gap-4 py-4" @submit.prevent="submitChangePassword">
                    <div class="grid grid-cols-4 items-center gap-4">
                        <Label for="username" class="text-right">Username</Label>
                        <Input id="username" class="col-span-3"
                            :value="user?.username || (loadingProfile ? 'Loading…' : '')" disabled readonly />
                    </div>
                    <div class="grid grid-cols-4 items-center gap-4">
                        <Label for="current_password" class="text-right">Current password</Label>
                        <Input id="current_password" class="col-span-3" type="password" v-model="oldPassword"
                            autocomplete="current-password" />
                    </div>
                    <div class="grid grid-cols-4 items-center gap-4">
                        <Label for="new_password" class="text-right">New password</Label>
                        <Input id="new_password" class="col-span-3" type="password" v-model="newPassword"
                            autocomplete="new-password" required />
                    </div>
                    <div class="grid grid-cols-4 items-center gap-4">
                        <Label class="text-right">Theme</Label>
                        <div class="col-span-3 flex items-center gap-3">
                            <DropdownMenu>
                                <DropdownMenuTrigger as-child>
                                    <Button variant="outline" class="relative w-32 justify-start">
                                        <Moon
                                            class="h-[1.1rem] w-[1.1rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                                        <Sun
                                            class="absolute h-[1.1rem] w-[1.1rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                                        <span class="ml-6 truncate">{{ modeLabel }}</span>
                                        <span class="sr-only">Toggle theme</span>
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="start">
                                    <DropdownMenuItem @click="mode = 'light'">Light</DropdownMenuItem>
                                    <DropdownMenuItem @click="mode = 'dark'">Dark</DropdownMenuItem>
                                    <DropdownMenuItem @click="mode = 'auto'">System</DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>
                    </div>
                    <div v-if="errorMsg" class="text-sm text-destructive">{{ errorMsg }}</div>
                    <div v-if="successMsg" class="text-sm text-green-600">{{ successMsg }}</div>
                </form>
            </CardContent>
            <CardFooter>
                <Button type="submit" :disabled="submitting">
                    {{ submitting ? 'Saving…' : 'Save changes' }}
                </Button>
            </CardFooter>
        </Card>
    </div>

</template>