gistfile1.txt

import React from "react";
import { Page, Toolbar } from "@mmrl/ui";
import { useActivity } from "@mmrl/hooks";
import { BugReport } from "@mui/icons-material";
import { ListItem, ListItemIcon } from "@mui/material";

const y = YAML.parse(`bind-addr: 127.0.0.1:8080
auth: password
password: SuperStrongPassword
cert: false`)

function NodeConfig() {
  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
  const [state, setState] = React.useState(y)

  const { context } = useActivity()

  const renderToolbar = () => {
    return (
      <Toolbar modifier="noshadow">
        <Toolbar.Left>
          <Toolbar.BackButton onClick={context.popPage} />
        </Toolbar.Left>
        <Toolbar.Center>Code Server</Toolbar.Center>
      </Toolbar>
    );
  };

  return (
    <Page renderToolbar={renderToolbar} sx={{ p: 0 }}>
      <List subheader={<ListSubheader>Settings</ListSubheader>}>
        <ListItemDialogEditText
          onSuccess={(val) => {
            if (val) {
              setState((prev) => Object.assign(prev, { "bind-addr": val }));
              forceUpdate()
            }
          }}
          inputLabel="Address"
          type="text"
          initialValue={state["bind-addr"]}
          title="Change binding address"
        >
          <ListItemText primary="Binding address" secondary={state["bind-addr"]} />
        </ListItemDialogEditText>

        <ListItemDialogEditText
          onSuccess={(val) => {
            if (val) {
              setState((prev) => Object.assign(prev, { "password": val }));
              forceUpdate()
            }
          }}
          inputLabel="Password"
          type="text"
          initialValue={state["password"]}
          title="Change password"
        >
          <ListItemText primary="Password" secondary={state["password"]} />
        </ListItemDialogEditText>

        <ListItem>
          <ListItemText primary="Certificate" />
          <Switch checked={state["cart"]} onChange={(e) => {
            setState((prev) => Object.assign(prev, { "cart": e.target.checked }));
            forceUpdate()
          }} />
        </ListItem>

      </List>

      <Divider />

      <List subheader={<ListSubheader>Project</ListSubheader>}>
        <ListItem disablePadding>
          <ListItemButton onClick={() => window.open("https://github.com/Googlers-Repo/code-server/issues")}>
            <ListItemIcon>
              <BugReport />
            </ListItemIcon>
            <ListItemText primary="Report a issue" />
          </ListItemButton>
        </ListItem>
      </List>
    </Page>
  );
}

export default NodeConfig;