GitFOSS

// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// app
import type { CommonProps } from "../../types";
import { buildRouteLink } from "../../utils/shared";
import { AppRoute } from "../../routes.defs";
import {
  Button,
  Card,
  Grid,
  Layout,
  PageWrapper,
  TextArea,
  TextInput,
} from "../../components";

export interface SettingsKeyAddViewProps extends CommonProps {
  flashMessage?: string;
  flashData?: {
    name: string;
    key: string;
  };
}

const SettingsKeyAddView: ReactView<SettingsKeyAddViewProps> = ({
  commonProps,
  flashMessage,
  flashData,
}) => {
  const username = commonProps.currentUserUsername!;
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <Grid.Col fluid nowrap gap={8}>
          <h1 style={{ margin: 0 }}>Add Key</h1>
          <Card themeScheme={commonProps.themeScheme}>
            <form
              method={"POST"}
              action={buildRouteLink(
                AppRoute.SETTINGS_KEY_ADD_ACTION,
                { username: username },
                { encodeURIComponent: 0 }
              )}
            >
              <Grid.Col fluid nowrap gap={16} alignItems={"flex-end"}>
                <Grid.Col fluid nowrap gap={4}>
                  <label>
                    <strong>Name:</strong>
                  </label>
                  <TextInput
                    name={"name"}
                    themeScheme={commonProps.themeScheme}
                    placeholder={"Key name..."}
                    defaultValue={flashData?.name}
                  />
                </Grid.Col>
                <Grid.Col fluid nowrap gap={4}>
                  <label>
                    <strong>Key:</strong>
                  </label>
                  <TextArea
                    style={{ height: 200, maxWidth: "100%", minWidth: "100%" }}
                    name={"key"}
                    themeScheme={commonProps.themeScheme}
                    placeholder={"Public key..."}
                  >
                    {flashData?.key}
                  </TextArea>
                </Grid.Col>
                {flashMessage != null && (
                  <strong style={{ color: "red" }}>{flashMessage}</strong>
                )}
                <Button type={"submit"}>Add Key</Button>
              </Grid.Col>
            </form>
          </Card>
        </Grid.Col>
      </PageWrapper>
    </Layout>
  );
};

export default SettingsKeyAddView;