[PUI] Set password

src/frontend/src/enums/ApiEndpoints.tsx

@@ -18,6 +18,7 @@ export enum ApiEndpoints {
   user_simple_login = 'email/generate/',
   user_reset = 'auth/password/reset/',
   user_reset_set = 'auth/password/reset/confirm/',
+  user_change_password = 'auth/password/change/',
   user_sso = 'auth/social/',
   user_sso_remove = 'auth/social/:id/disconnect/',
   user_emails = 'auth/emails/',

src/frontend/src/pages/Auth/ChangePassword.tsx

@@ -0,0 +1,119 @@
+import { Trans, t } from '@lingui/macro';
+import {
+  Button,
+  Center,
+  Container,
+  Divider,
+  Group,
+  Paper,
+  PasswordInput,
+  Stack,
+  Text
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+import { useNavigate } from 'react-router-dom';
+
+import { api } from '../../App';
+import { StylishText } from '../../components/items/StylishText';
+import { LanguageContext } from '../../contexts/LanguageContext';
+import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import { apiUrl } from '../../states/ApiState';
+import { useUserState } from '../../states/UserState';
+
+export default function Set_Password() {
+  const simpleForm = useForm({
+    initialValues: {
+      new_password1: '',
+      new_password2: ''
+    }
+  });
+
+  const user = useUserState();
+  const navigate = useNavigate();
+
+  function passwordError(values: any) {
+    let message: any =
+      values?.new_password2 ||
+      values?.new_password1 ||
+      values?.error ||
+      t`Password could not be changed`;
+
+    // If message is array
+    if (!Array.isArray(message)) {
+      message = [message];
+    }
+
+    message.forEach((msg: string) => {
+      notifications.show({
+        title: t`Error`,
+        message: msg,
+        color: 'red'
+      });
+    });
+  }
+
+  function handleSet() {
+    // Set password with call to backend
+    api
+      .post(apiUrl(ApiEndpoints.user_change_password), {
+        new_password1: simpleForm.values.new_password1,
+        new_password2: simpleForm.values.new_password2
+      })
+      .then((val) => {
+        if (val.status === 200) {
+          notifications.show({
+            title: t`Password Changed`,
+            message: t`The password was set successfully. You can now login with your new password`,
+            color: 'green',
+            autoClose: false
+          });
+          navigate('/login');
+        } else {
+          passwordError(val.data);
+        }
+      })
+      .catch((err) => {
+        passwordError(err.response.data);
+      });
+  }
+
+  return (
+    <LanguageContext>
+      <Center mih='100vh'>
+        <Container w='md' miw={425}>
+          <Stack>
+            <StylishText size='xl'>{t`Reset Password`}</StylishText>
+            <Divider />
+            {user.username() && (
+              <Paper>
+                <Group>
+                  <StylishText size='md'>{t`User`}</StylishText>
+                  <Text>{user.username()}</Text>
+                </Group>
+              </Paper>
+            )}
+            <Divider />
+            <Stack gap='xs'>
+              <PasswordInput
+                required
+                label={t`New Password`}
+                description={t`Enter your new password`}
+                {...simpleForm.getInputProps('new_password1')}
+              />
+              <PasswordInput
+                required
+                label={t`Confirm New Password`}
+                description={t`Confirm your new password`}
+                {...simpleForm.getInputProps('new_password2')}
+              />
+            </Stack>
+            <Button type='submit' onClick={handleSet}>
+              <Trans>Confirm</Trans>
+            </Button>
+          </Stack>
+        </Container>
+      </Center>
+    </LanguageContext>
+  );
+}

src/frontend/src/pages/Auth/Set-Password.tsx → src/frontend/src/pages/Auth/ResetPassword.tsx

@@ -17,7 +17,7 @@ import { LanguageContext } from '../../contexts/LanguageContext';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { apiUrl } from '../../states/ApiState';
 
-export default function Set_Password() {
+export default function ResetPassword() {
   const simpleForm = useForm({ initialValues: { password: '' } });
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();

src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx

@@ -3,15 +3,17 @@ import { Group, Stack, Table, Title } from '@mantine/core';
 import { IconKey, IconUser } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
+import { useNavigate } from 'react-router-dom';
 import { YesNoUndefinedButton } from '../../../../components/buttons/YesNoButton';
 import type { ApiFormFieldSet } from '../../../../components/forms/fields/ApiFormField';
 import { ActionDropdown } from '../../../../components/items/ActionDropdown';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
-import { notYetImplemented } from '../../../../functions/notifications';
 import { useEditApiFormModal } from '../../../../hooks/UseForm';
 import { useUserState } from '../../../../states/UserState';
 
 export function AccountDetailPanel() {
+  const navigate = useNavigate();
+
   const [user, fetchUserState] = useUserState((state) => [
     state.user,
     state.fetchUserState
@@ -51,10 +53,12 @@ export function AccountDetailPanel() {
                 onClick: editUser.open
               },
               {
-                name: t`Set Password`,
+                name: t`Change Password`,
                 icon: <IconKey />,
-                tooltip: t`Set User Password`,
-                onClick: notYetImplemented
+                tooltip: t`Change User Password`,
+                onClick: () => {
+                  navigate('/change-password');
+                }
               }
             ]}
           />

src/frontend/src/router.tsx

@@ -107,8 +107,13 @@ export const Login = Loadable(lazy(() => import('./pages/Auth/Login')));
 export const Logout = Loadable(lazy(() => import('./pages/Auth/Logout')));
 export const Logged_In = Loadable(lazy(() => import('./pages/Auth/Logged-In')));
 export const Reset = Loadable(lazy(() => import('./pages/Auth/Reset')));
-export const Set_Password = Loadable(
-  lazy(() => import('./pages/Auth/Set-Password'))
+
+export const ChangePassword = Loadable(
+  lazy(() => import('./pages/Auth/ChangePassword'))
+);
+
+export const ResetPassword = Loadable(
+  lazy(() => import('./pages/Auth/ResetPassword'))
 );
 
 // Routes
@@ -168,7 +173,8 @@ export const routes = (
       <Route path='/logout' element={<Logout />} />,
       <Route path='/logged-in' element={<Logged_In />} />
       <Route path='/reset-password' element={<Reset />} />
-      <Route path='/set-password' element={<Set_Password />} />
+      <Route path='/set-password' element={<ResetPassword />} />
+      <Route path='/change-password' element={<ChangePassword />} />
     </Route>
   </Routes>
 );