mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-18 16:07:10 +00:00
Change Email & password Function
This commit is contained in:
headlessdev
parent
5413dbf948
commit
6661b1e711
@ -27,10 +27,110 @@ import {
|
|||||||
AccordionItem,
|
AccordionItem,
|
||||||
AccordionTrigger,
|
AccordionTrigger,
|
||||||
} from "@/components/ui/accordion"
|
} from "@/components/ui/accordion"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { useState } from "react";
|
||||||
|
import axios from "axios";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||||
|
import { AlertCircle, Check } from "lucide-react";
|
||||||
|
|
||||||
export default function Settings() {
|
export default function Settings() {
|
||||||
const { theme, setTheme } = useTheme();
|
const { theme, setTheme } = useTheme();
|
||||||
|
|
||||||
|
const [email, setEmail] = useState<string>("")
|
||||||
|
const [password, setPassword] = useState<string>("")
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState<string>("")
|
||||||
|
const [oldPassword, setOldPassword] = useState<string>("")
|
||||||
|
|
||||||
|
const [emailError, setEmailError] = useState<string>("")
|
||||||
|
const [passwordError, setPasswordError] = useState<string>("")
|
||||||
|
const [emailErrorVisible, setEmailErrorVisible] = useState<boolean>(false)
|
||||||
|
const [passwordErrorVisible, setPasswordErrorVisible] = useState<boolean>(false)
|
||||||
|
|
||||||
|
const [passwordSuccess, setPasswordSuccess] = useState<boolean>(false)
|
||||||
|
const [emailSuccess, setEmailSuccess] = useState<boolean>(false)
|
||||||
|
|
||||||
|
const changeEmail = async () => {
|
||||||
|
setEmailErrorVisible(false);
|
||||||
|
setEmailSuccess(false);
|
||||||
|
setEmailError("");
|
||||||
|
|
||||||
|
if (!email) {
|
||||||
|
setEmailError("Email is required");
|
||||||
|
setEmailErrorVisible(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setEmailErrorVisible(false);
|
||||||
|
setEmailError("");
|
||||||
|
}
|
||||||
|
, 3000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await axios.post('/api/auth/edit_email', {
|
||||||
|
newEmail: email,
|
||||||
|
jwtToken: Cookies.get('token')
|
||||||
|
});
|
||||||
|
setEmailSuccess(true);
|
||||||
|
setEmail("");
|
||||||
|
setTimeout(() => {
|
||||||
|
setEmailSuccess(false);
|
||||||
|
}, 3000);
|
||||||
|
} catch (error: any) {
|
||||||
|
setEmailError(error.response.data.error);
|
||||||
|
setEmailErrorVisible(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setEmailErrorVisible(false);
|
||||||
|
setEmailError("");
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const changePassword = async () => {
|
||||||
|
try {
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
setPasswordError("Passwords do not match");
|
||||||
|
setPasswordErrorVisible(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setPasswordErrorVisible(false);
|
||||||
|
setPasswordError("");
|
||||||
|
}, 3000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!oldPassword || !password || !confirmPassword) {
|
||||||
|
setPasswordError("All fields are required");
|
||||||
|
setPasswordErrorVisible(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setPasswordErrorVisible(false);
|
||||||
|
setPasswordError("");
|
||||||
|
}, 3000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await axios.post('/api/auth/edit_password', {
|
||||||
|
oldPassword: oldPassword,
|
||||||
|
newPassword: password,
|
||||||
|
jwtToken: Cookies.get('token')
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status === 200) {
|
||||||
|
setPasswordSuccess(true);
|
||||||
|
setPassword("");
|
||||||
|
setOldPassword("");
|
||||||
|
setConfirmPassword("");
|
||||||
|
setTimeout(() => {
|
||||||
|
setPasswordSuccess(false);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
setPasswordErrorVisible(true);
|
||||||
|
setPasswordError(error.response.data.error);
|
||||||
|
setTimeout(() => {
|
||||||
|
setPasswordErrorVisible(false);
|
||||||
|
setPasswordError("");
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<SidebarProvider>
|
<SidebarProvider>
|
||||||
<AppSidebar />
|
<AppSidebar />
|
||||||
@ -63,6 +163,104 @@ export default function Settings() {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<Accordion type="single" collapsible>
|
<Accordion type="single" collapsible>
|
||||||
<AccordionItem value="item-1">
|
<AccordionItem value="item-1">
|
||||||
|
<AccordionTrigger className="text-xl font-bold">User</AccordionTrigger>
|
||||||
|
<AccordionContent className="text-sm font-normal">
|
||||||
|
<div className="pb-4">Manage your user settings here. You can change your email, password, and other account settings.</div>
|
||||||
|
<div className="flex flex-col md:flex-row gap-2 mb-2">
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="pb-1 font-semibold text-lg">Change Email</div>
|
||||||
|
{ emailErrorVisible &&
|
||||||
|
<div className="pb-2 pt-2">
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
<AlertTitle>Error</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
{emailError}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{ emailSuccess &&
|
||||||
|
<div className="pb-2 pt-2">
|
||||||
|
<Alert>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
<AlertTitle>Success</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Email changed successfully.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
placeholder="Enter new email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className="mb-2"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={changeEmail}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Change Email
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="pb-1 font-semibold text-lg">Change Password</div>
|
||||||
|
{ passwordErrorVisible &&
|
||||||
|
<div className="pb-2 pt-2">
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
<AlertTitle>Error</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
{passwordError}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{ passwordSuccess &&
|
||||||
|
<div className="pb-2 pt-2">
|
||||||
|
<Alert>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
<AlertTitle>Success</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Password changed successfully.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="Enter old password"
|
||||||
|
value={oldPassword}
|
||||||
|
onChange={(e) => setOldPassword(e.target.value)}
|
||||||
|
className="mb-2"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="Enter new password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="mb-2"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="Confirm new password"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||||
|
className="mb-2"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={changePassword}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Change Password
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
<AccordionItem value="item-2">
|
||||||
<AccordionTrigger className="text-xl font-bold">Theme</AccordionTrigger>
|
<AccordionTrigger className="text-xl font-bold">Theme</AccordionTrigger>
|
||||||
<AccordionContent className="text-sm font-normal">
|
<AccordionContent className="text-sm font-normal">
|
||||||
<div className="pb-1">Select a theme for the application. You can choose between light, dark, or system theme.</div>
|
<div className="pb-1">Select a theme for the application. You can choose between light, dark, or system theme.</div>
|
||||||
|
|||||||
15
package-lock.json
generated
15
package-lock.json
generated
@ -4545,6 +4545,21 @@
|
|||||||
"optional": true
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-win32-x64-msvc": {
|
||||||
|
"version": "15.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.3.0.tgz",
|
||||||
|
"integrity": "sha512-vHUQS4YVGJPmpjn7r5lEZuMhK5UQBNBRSB+iGDvJjaNk649pTIcRluDWNb9siunyLLiu/LDPHfvxBtNamyuLTw==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user