fredy/ui/src/views/user/mutation/UserMutator.jsx

/*
 * Copyright (c) 2026 by Christian Kellner.
 * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
 */

import React from 'react';

import { xhrGet, xhrPost } from '../../../services/xhr';
import { useNavigate, useParams } from 'react-router-dom';
import { useActions } from '../../../services/state/store';
import { Divider, Input, Switch, Button, Toast } from '@douyinfe/semi-ui-19';
import './UserMutator.less';
import { SegmentPart } from '../../../components/segment/SegmentPart';
import { IconPlusCircle, IconArrowLeft } from '@douyinfe/semi-icons';
import Headline from '../../../components/headline/Headline.jsx';

const UserMutator = function UserMutator() {
  const params = useParams();
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [password2, setPassword2] = React.useState('');
  const [isAdmin, setIsAdmin] = React.useState(false);

  const navigate = useNavigate();
  const actions = useActions();

  React.useEffect(() => {
    async function init() {
      if (params.userId != null) {
        try {
          const userJson = await xhrGet(`/api/admin/users/${params.userId}`);
          const user = userJson.json;

          const defaultName = user?.username || '';
          const defaultIsAdmin = user?.isAdmin || false;

          setUsername(defaultName);
          setIsAdmin(defaultIsAdmin);
        } catch (Exception) {
          console.error(Exception);
        }
      }
    }

    init();
  }, [params.userId]);

  const saveUser = async () => {
    try {
      await xhrPost('/api/admin/users', {
        userId: params.userId || null,
        username,
        password,
        password2,
        isAdmin,
      });
      await actions.user.getUsers();
      Toast.success('User successfully saved...');
      navigate('/users');
    } catch (error) {
      console.error(error);
      Toast.error(error.json.message);
    }
  };

  return (
    <>
      <Headline
        text={params.userId ? 'Edit User' : 'New User'}
        actions={
          <Button
            icon={<IconArrowLeft />}
            onClick={() => navigate('/users')}
            theme="borderless"
            style={{ color: '#909090' }}
          >
            Back
          </Button>
        }
      />
      <form className="userMutator">
        <SegmentPart name="Username" helpText="The username used to login to Fredy">
          <Input
            type="text"
            label="Username"
            maxLength={30}
            placeholder="Username"
            autoFocus
            width={6}
            value={username}
            onChange={(val) => setUsername(val)}
          />
        </SegmentPart>
        <Divider margin="1rem" />
        <SegmentPart name="Password" helpText="The password used to login to Fredy">
          <Input
            mode="password"
            label="Password"
            placeholder="Password"
            width={6}
            value={password}
            onChange={(val) => setPassword(val)}
          />
        </SegmentPart>
        <Divider margin="1rem" />
        <SegmentPart name="Retype password" helpText="Retype the password to make sure they match">
          <Input
            mode="password"
            label="Retype password"
            placeholder="Retype password"
            width={6}
            value={password2}
            onChange={(val) => setPassword2(val)}
          />
        </SegmentPart>
        <Divider margin="1rem" />
        <SegmentPart name="Is user an admin?" helpText="Check this if the user is an administrator">
          <Switch checked={isAdmin} onChange={(checked) => setIsAdmin(checked)} />
        </SegmentPart>
        <Divider margin="1rem" />
        <div className="userMutator__actions">
          <Button size="small" theme="borderless" style={{ color: '#909090' }} onClick={() => navigate('/users')}>
            Cancel
          </Button>
          <Button size="small" type="primary" theme="solid" icon={<IconPlusCircle />} onClick={saveUser}>
            Save
          </Button>
        </div>
      </form>
    </>
  );
};

export default UserMutator;