Election Setup - Basic info (#112)

* Rename SetupInstructionsStep to BasicInfoStep * Remove unnecessary components from BasicInfoStep * Basic Info Page * Build an ElectionSetupRequest across wizard steps * Better styling * Validation * Fix compiler errors * Implemented PR feedback * Split onNext and dataChanged events and remove submitElectionRequest param per PR feedback * Fix more warnings * Link logo to root * onComplete={handleSubmit} per PR * Renamed next -> moveToNextStep per PR * More PR feedback
2022-01-27 12:48:55 -05:00 · 2022-01-27 12:48:55 -05:00 · 2693950ce4
--- a/packages/admin-app/src/components/AppBar/AppBar.tsx
+++ b/packages/admin-app/src/components/AppBar/AppBar.tsx
@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import { MessageId } from '../../lang';
 import useToken from '../../useToken';
 import { ReactComponent as ElectionGuardLogo } from '../../images/electionguard-logo.svg';
+import routeIds from '../../routes/RouteIds';

 export interface AppBarProps {
    title?: string;
@ -44,7 +45,7 @@ export const AppBar: React.FunctionComponent<AppBarProps> = ({ title, loggedIn }
    const classes = useStyles();

    const logoutButton = (
-        <Button href="/" color="inherit" onClick={() => setToken(undefined)}>
+        <Button href={routeIds.home} color="inherit" onClick={() => setToken(undefined)}>
            <FormattedMessage
                id={MessageId.AuthLogout}
                description="Sign out of application"
@ -57,7 +58,9 @@ export const AppBar: React.FunctionComponent<AppBarProps> = ({ title, loggedIn }
        <MaterialAppBar position="static" title={title}>
            <Toolbar className={classes.toolbar}>
                <Box className={classes.logoContainer}>
-                    <ElectionGuardLogo className={classes.logo} />
+                    <a href={routeIds.home}>
+                        <ElectionGuardLogo className={classes.logo} />
+                    </a>
                </Box>
                {loggedIn ? logoutButton : null}
            </Toolbar>
--- a/packages/admin-app/src/components/ElectionSetupWizard/ElectionSetupWizard.tsx
+++ b/packages/admin-app/src/components/ElectionSetupWizard/ElectionSetupWizard.tsx
@ -1,6 +1,8 @@
-import { ApiClientFactory } from '@electionguard/api-client';
+import { ApiClientFactory, SubmitElectionRequest } from '@electionguard/api-client';
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import routeIds from '../../routes/RouteIds';

 import { createEnumStepper } from '../../utils/EnumStepper';
 import WizardStep from '../WizardStep';
@ -11,11 +13,11 @@ import {
    ManifestPreviewStep,
    ManifestUploadStep,
    SetupCompleteStep,
-    SetupInstructionsStep,
+    BasicInfoStep,
 } from './Steps';

 export enum ElectionSetupStep {
-    Instructions = 0,
+    BasicInfo = 0,
    JointKeySelect = 1,
    JointKeyRetrieved = 2,
    ManifestMenu = 3,
@ -29,21 +31,38 @@ export enum ElectionSetupStep {
 * Wizard to setup the election
 */
 export const ElectionSetupWizard: React.FC = () => {
-    const [step, setStep] = useState(ElectionSetupStep.Instructions);
-    const { nextStep } = createEnumStepper(ElectionSetupStep);
-    const next = () => setStep(nextStep(step));
+    const [request, setRequest] = useState({} as SubmitElectionRequest);
+    const [step, setStep] = useState(ElectionSetupStep.BasicInfo);
+    const { nextStep: getNextStep } = createEnumStepper(ElectionSetupStep);
+    const navigate = useNavigate();
+    const handleNext = () => {
+        const nextStep = getNextStep(step);
+        setStep(nextStep);
+    };
+    const handleChanged = (requestFromStep: SubmitElectionRequest) => {
+        const newRequest = {
+            ...request,
+            ...requestFromStep,
+        };
+        setRequest(newRequest);
+    };
+
+    const handleSubmit = () => {
+        // todo: submit data to API
+        navigate(routeIds.home);
+    };

    const service = ApiClientFactory.getGuardianApiClient();
    return (
        <Box height="100%">
-            <WizardStep active={step === ElectionSetupStep.Instructions}>
-                <SetupInstructionsStep onNext={next} />
+            <WizardStep active={step === ElectionSetupStep.BasicInfo}>
+                <BasicInfoStep onNext={handleNext} onChanged={handleChanged} />
            </WizardStep>
            <WizardStep active={step === ElectionSetupStep.JointKeySelect}>
-                <JointKeySelectStep onNext={next} />
+                <JointKeySelectStep onNext={handleNext} onChanged={handleChanged} />
            </WizardStep>
            <WizardStep active={step === ElectionSetupStep.JointKeyRetrieved}>
-                <JointKeyRetrievedStep onNext={next} />
+                <JointKeyRetrievedStep onNext={handleNext} />
            </WizardStep>
            <WizardStep active={step === ElectionSetupStep.ManifestMenu}>
                <ManifestMenuStep
@ -58,13 +77,13 @@ export const ElectionSetupWizard: React.FC = () => {
            </WizardStep>
            <WizardStep active={step === ElectionSetupStep.ManifestPreview}>
                <ManifestPreviewStep
-                    onNext={next}
+                    onNext={handleNext}
                    backToMenu={() => setStep(ElectionSetupStep.ManifestMenu)}
                    preview={service.getManifestPreview()}
                />
            </WizardStep>
            <WizardStep active={step === ElectionSetupStep.SetupComplete}>
-                <SetupCompleteStep onComplete={next} />
+                <SetupCompleteStep onComplete={handleSubmit} />
            </WizardStep>
        </Box>
    );
--- a/packages/admin-app/src/components/ElectionSetupWizard/Steps/BasicInfoStep.tsx
+++ b/packages/admin-app/src/components/ElectionSetupWizard/Steps/BasicInfoStep.tsx
@ -0,0 +1,90 @@
+import { Box, Container, IconButton, TextField, Tooltip } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useState } from 'react';
+import InfoIcon from '@mui/icons-material/Info';
+
+import { useIntl } from 'react-intl';
+import { SubmitElectionRequest } from '@electionguard/api-client';
+import FormattedButton from '../../FormattedButton';
+import IconHeader from '../../IconHeader';
+import { Message, MessageId } from '../../../lang';
+
+export interface SetupInstructionsStepProps {
+    onNext: () => void;
+    onChanged: (submitElectionRequest: SubmitElectionRequest) => void;
+}
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    text: {
+        marginBottom: theme.spacing(4),
+    },
+}));
+
+/**
+ * Basic Information Retrieval for Election Setup
+ */
+const BasicInfoStep: React.FC<SetupInstructionsStepProps> = ({
+    onNext,
+    onChanged: onDataChanged,
+}) => {
+    const [electionId, setElectionId] = useState('');
+    const classes = useStyles();
+    const intl = useIntl();
+
+    const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+        e.preventDefault();
+        const submitElectionRequest = {
+            election_id: electionId,
+        } as SubmitElectionRequest;
+        onDataChanged(submitElectionRequest);
+        onNext();
+    };
+
+    return (
+        <Container maxWidth="md" className={classes.root}>
+            <IconHeader title={new Message(MessageId.ElectionSetup_BasicInfo_Title)} />
+            <Container maxWidth="xs">
+                <form onSubmit={handleSubmit}>
+                    <TextField
+                        id="election_id"
+                        label="Election ID"
+                        variant="standard"
+                        fullWidth
+                        className={classes.text}
+                        onChange={(e) => setElectionId(e.target.value)}
+                        InputProps={{
+                            endAdornment: (
+                                <Tooltip
+                                    title={intl.formatMessage({
+                                        id: MessageId.ElectionSetup_BasicInfo_ElectionIdTooltip,
+                                    })}
+                                >
+                                    <IconButton>
+                                        <InfoIcon />
+                                    </IconButton>
+                                </Tooltip>
+                            ),
+                        }}
+                    />
+                    <Box display="flex" justifyContent="center">
+                        <FormattedButton
+                            type="submit"
+                            variant="contained"
+                            color="secondary"
+                            disabled={!electionId}
+                            text={new Message(MessageId.ElectionSetup_BasicInfo_Next)}
+                        />
+                    </Box>
+                </form>
+            </Container>
+        </Container>
+    );
+};
+
+export default BasicInfoStep;
--- a/packages/admin-app/src/components/ElectionSetupWizard/Steps/JointKeyRetrievedStep.tsx
+++ b/packages/admin-app/src/components/ElectionSetupWizard/Steps/JointKeyRetrievedStep.tsx
@ -4,9 +4,9 @@ import { VpnKey as KeyIcon } from '@mui/icons-material';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';

-import { Message, MessageId, loremIpsum } from '../../../lang';
 import IconHeader from '../../IconHeader';
 import InternationalText from '../../InternationalText';
+import { Message, MessageId } from '../../../lang';

 const useStyles = makeStyles((theme) => ({
    root: {
@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
 }));

 export interface JointKeyRetrievedStepProps {
-    onNext?: () => void;
+    onNext: () => void;
 }

 /**
@ -34,6 +34,11 @@ export interface JointKeyRetrievedStepProps {
 */
 const JointKeyRetrievedStep: React.FC<JointKeyRetrievedStepProps> = ({ onNext }) => {
    const classes = useStyles();
+
+    const onButtonClick = () => {
+        onNext();
+    };
+
    return (
        <Box
            display="flex"
@ -58,24 +63,19 @@ const JointKeyRetrievedStep: React.FC<JointKeyRetrievedStepProps> = ({ onNext })
                        variant="h5"
                        component="h2"
                        id={MessageId.ElectionSetupJointKeyRetrievedCTA}
-                        defaultMessage="Create a new election with retrieved key"
                    />
                    <InternationalText
                        className={classes.spaced}
                        id={MessageId.ElectionSetupJointKeyRetrievedDescription}
-                        defaultMessage={loremIpsum}
                    />

                    <Button
                        className={classes.spaced}
                        variant="contained"
                        color="secondary"
-                        onClick={onNext}
+                        onClick={onButtonClick}
                    >
-                        <FormattedMessage
-                            id={MessageId.ElectionSetupJointKeyRetreivedNext}
-                            defaultMessage="Continue"
-                        />
+                        <FormattedMessage id={MessageId.ElectionSetupJointKeyRetreivedNext} />
                    </Button>
                </Box>
            </Container>
--- a/packages/admin-app/src/components/ElectionSetupWizard/Steps/JointKeySelectStep.tsx
+++ b/packages/admin-app/src/components/ElectionSetupWizard/Steps/JointKeySelectStep.tsx
@ -1,6 +1,4 @@
-/* tslint:disable */
-/* eslint-disable */
-import { ClientFactory, KeyCeremony, KeyCeremonyQueryResponse } from '@electionguard/api-client';
+import { ClientFactory, KeyCeremony, SubmitElectionRequest } from '@electionguard/api-client';
 import {
    Box,
    Button,
@ -14,7 +12,7 @@ import {
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { SaveAlt as SaveIcon } from '@mui/icons-material';
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
 // todo: Remove useGetJointKeys - import { useGetJointKeys } from '@electionguard/api-client';
@ -36,13 +34,14 @@ const useStyles = makeStyles((theme) => ({
 }));

 export interface JointKeySelectStepProps {
-    onNext?: () => void;
+    onNext: () => void;
+    onChanged: (submitElectionRequest: SubmitElectionRequest) => void;
 }

 /**
 * Joint Key Select Step for Election Setup
 */
-const JointKeySelectStep: React.FC<JointKeySelectStepProps> = ({ onNext }) => {
+const JointKeySelectStep: React.FC<JointKeySelectStepProps> = ({ onNext, onChanged }) => {
    const [keyCeremony, setKeyCeremony] = useState<KeyCeremony>();
    const [keyCeremonies, setKeyCeremonies] = useState<KeyCeremony[]>([]);

@ -58,14 +57,9 @@ const JointKeySelectStep: React.FC<JointKeySelectStepProps> = ({ onNext }) => {
    const ceremonyClient = ClientFactory.GetCeremonyClient();

    const getKeyCeremonies = async () => {
-        await ceremonyClient
-            .find(0, 100, { filter: {} })
-            .then((response) => {
-                setKeyCeremonies(response.key_ceremonies);
-            })
-            .catch((ex: any) => {
-                console.error(ex);
-            });
+        await ceremonyClient.find(0, 100, { filter: {} }).then((response) => {
+            setKeyCeremonies(response.key_ceremonies);
+        });
    };

    const queryClient = new QueryClient();
@ -74,7 +68,15 @@ const JointKeySelectStep: React.FC<JointKeySelectStepProps> = ({ onNext }) => {

    useEffect(() => {
        getKeyCeremonies();
-    }, []);
+    });
+
+    const onNextClick = () => {
+        const submitElectionRequest = {
+            key_name: keyCeremony?.key_name,
+        } as SubmitElectionRequest;
+        onChanged(submitElectionRequest);
+        onNext();
+    };

    return (
        <Container maxWidth="md">
@ -123,7 +125,7 @@ const JointKeySelectStep: React.FC<JointKeySelectStepProps> = ({ onNext }) => {
                            className={classes.spaced}
                            variant="contained"
                            color="secondary"
-                            onClick={onNext}
+                            onClick={onNextClick}
                        >
                            <FormattedMessage
                                id={MessageId.ElectionSetupJointKeySelectNext}
--- a/packages/admin-app/src/components/ElectionSetupWizard/Steps/ManifestPreviewStep.tsx
+++ b/packages/admin-app/src/components/ElectionSetupWizard/Steps/ManifestPreviewStep.tsx
@ -35,6 +35,10 @@ const ManifestPreviewStep: React.FC<ManifestPreviewStepProps> = ({
    preview,
 }) => {
    const classes = useStyles();
+    const onButtonClick = () => {
+        onNext();
+    };
+
    return (
        <Grid container className={classes.root}>
            <Container maxWidth="md">
@ -134,7 +138,7 @@ const ManifestPreviewStep: React.FC<ManifestPreviewStepProps> = ({
                    <Button
                        variant="contained"
                        color="secondary"
-                        onClick={onNext}
+                        onClick={onButtonClick}
                        className={classes.button}
                    >
                        <FormattedMessage
--- a/packages/admin-app/src/components/ElectionSetupWizard/Steps/SetupInstructionsStep.tsx
+++ b/packages/admin-app/src/components/ElectionSetupWizard/Steps/SetupInstructionsStep.tsx
@ -1,36 +0,0 @@
-import { Container } from '@mui/material';
-import React from 'react';
-
-import { Message, MessageId } from '../../../lang';
-import StepHeader from '../../StepHeader';
-import StepIntroduction from '../../StepIntroduction';
-
-export interface SetupInstructionsStepProps {
-    onNext?: () => void;
-}
-
-/**
- * Setup Instructions Step for Election Setup
- */
-const SetupInstructionsStep: React.FC<SetupInstructionsStepProps> = ({ onNext }) => (
-    <Container maxWidth="md">
-        <StepHeader
-            title={new Message(MessageId.ElectionSetupIntroductionTitle)}
-            description={new Message(MessageId.ElectionSetupIntroductionDescription)}
-            buttonText={new Message(MessageId.ElectionSetupIntroductionNext)}
-            onClick={onNext}
-        />
-        <StepIntroduction
-            heading={new Message(MessageId.ElectionSetupIntroductionStepsHeading)}
-            description={new Message(MessageId.ElectionSetupIntroductionStepsInstructions)}
-            steps={[
-                new Message(MessageId.ElectionSetupIntroductionStep1),
-                new Message(MessageId.ElectionSetupIntroductionStep2),
-                new Message(MessageId.ElectionSetupIntroductionStep3),
-                new Message(MessageId.ElectionSetupIntroductionStep4),
-            ]}
-        />
-    </Container>
-);
-
-export default SetupInstructionsStep;
--- a/packages/admin-app/src/components/ElectionSetupWizard/Steps/index.ts
+++ b/packages/admin-app/src/components/ElectionSetupWizard/Steps/index.ts
@ -1,5 +1,5 @@
-export { default as SetupInstructionsStep } from './SetupInstructionsStep';
-export type { SetupInstructionsStepProps } from './SetupInstructionsStep';
+export { default as BasicInfoStep } from './BasicInfoStep';
+export type { SetupInstructionsStepProps } from './BasicInfoStep';

 export { default as JointKeySelectStep } from './JointKeySelectStep';
 export type { JointKeySelectStepProps } from './JointKeySelectStep';
--- a/packages/admin-app/src/components/StepHeader/StepHeader.tsx
+++ b/packages/admin-app/src/components/StepHeader/StepHeader.tsx
@ -1,62 +0,0 @@
-import { Box, Container, SvgIconProps } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import React from 'react';
-
-import { Message } from '../../lang';
-import FormattedButton from '../FormattedButton';
-import IconHeader from '../IconHeader';
-import InternationalText from '../InternationalText';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        padding: 0,
-    },
-    spaced: {
-        marginBottom: theme.spacing(2),
-    },
-}));
-
-export interface StepHeaderProps {
-    title: Message;
-    description: Message;
-    buttonText: Message;
-    disabledButtonText?: Message;
-    loading?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-    Icon?: React.ComponentType<SvgIconProps>;
-}
-
-/**
- * Common Header for Steps
- */
-export const StepHeader: React.FC<StepHeaderProps> = ({
-    title,
-    description,
-    buttonText,
-    onClick,
-    loading,
-    disabled,
-    Icon,
-}) => {
-    const classes = useStyles();
-    return (
-        <Container className={classes.root}>
-            <IconHeader Icon={Icon} title={title} />
-            <InternationalText className={classes.spaced} component="p" id={description.id} />
-            <Box width="100%" display="flex" justifyContent="center">
-                <FormattedButton
-                    className={classes.spaced}
-                    variant="contained"
-                    color="secondary"
-                    onClick={onClick}
-                    disabled={disabled}
-                    loading={loading}
-                    text={buttonText}
-                />
-            </Box>
-        </Container>
-    );
-};
-
-export default StepHeader;
--- a/packages/admin-app/src/components/StepHeader/index.ts
+++ b/packages/admin-app/src/components/StepHeader/index.ts
@ -1,5 +0,0 @@
-import StepHeader from './StepHeader';
-
-export * from './StepHeader';
-
-export default StepHeader;
--- a/packages/admin-app/src/components/StepIntroduction/StepIntroduction.tsx
+++ b/packages/admin-app/src/components/StepIntroduction/StepIntroduction.tsx
@ -1,57 +0,0 @@
-import { Container } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import React from 'react';
-
-import { Message } from '../../lang';
-import InternationalText from '../InternationalText';
-import OrderedList from '../OrderedList';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        padding: 0,
-    },
-    spaced: {
-        marginBottom: theme.spacing(2),
-    },
-}));
-
-export interface StepIntroductionProps {
-    heading: Message;
-    description: Message;
-    steps: Message[];
-}
-
-/**
- * Common Introduction for Steps
- */
-export const StepIntroduction: React.FC<StepIntroductionProps> = ({
-    heading,
-    description,
-    steps,
-}) => {
-    const classes = useStyles();
-    return (
-        <Container className={classes.root}>
-            <InternationalText
-                className={classes.spaced}
-                color="primary"
-                variant="h6"
-                component="h2"
-                id={heading.id}
-                description={heading.description}
-            />
-            <InternationalText
-                className={classes.spaced}
-                id={description.id}
-                description={description.description}
-            />
-            <OrderedList>
-                {steps.map((step) => (
-                    <InternationalText key={step.id} id={step.id} description={step.description} />
-                ))}
-            </OrderedList>
-        </Container>
-    );
-};
-
-export default StepIntroduction;
--- a/packages/admin-app/src/components/StepIntroduction/index.ts
+++ b/packages/admin-app/src/components/StepIntroduction/index.ts
@ -1,5 +0,0 @@
-import StepIntroduction from './StepIntroduction';
-
-export * from './StepIntroduction';
-
-export default StepIntroduction;
--- a/packages/admin-app/src/lang/MessageId.ts
+++ b/packages/admin-app/src/lang/MessageId.ts
@ -56,15 +56,9 @@ enum MessageId {
    ElectionSetupSetupCompleteTitle = 'election_setup.setup_complete.title',
    ElectionSetupSetupCompleteNext = 'election_setup.setup_complete.next',

-    ElectionSetupIntroductionTitle = 'election_setup.introduction.title',
-    ElectionSetupIntroductionDescription = 'election_setup.introduction.description',
-    ElectionSetupIntroductionNext = 'election_setup.introduction.next',
-    ElectionSetupIntroductionStepsHeading = 'election_setup.introduction.steps_heading',
-    ElectionSetupIntroductionStepsInstructions = 'election_setup.introduction.steps_instruction',
-    ElectionSetupIntroductionStep1 = 'election_setup.introduction.step1',
-    ElectionSetupIntroductionStep2 = 'election_setup.introduction.step2',
-    ElectionSetupIntroductionStep3 = 'election_setup.introduction.step3',
-    ElectionSetupIntroductionStep4 = 'election_setup.introduction.step4',
+    ElectionSetup_BasicInfo_Title = 'election_setup.basic_info.title',
+    ElectionSetup_BasicInfo_Next = 'election_setup.basic_info.next',
+    ElectionSetup_BasicInfo_ElectionIdTooltip = 'election_setup.basic_info.election_id_tooltip',

    ElectionSetupUploadManifestTitle = 'election_setup.upload_manifest.title',
    ElectionSetupUploadManifestUpload = 'election_setup.upload_manifest.upload',
--- a/packages/admin-app/src/lang/en.json
+++ b/packages/admin-app/src/lang/en.json
@ -22,7 +22,6 @@
    "login_form.submit": "Submit",

    "election_setup.manifest_menu.title": "Add Election Manifest",
-    "election_setup.manifest_menu.about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat magna nec nibh congue, non pretium mauris feugiat. Nam commodo ultrices semper. Praesent hendrerit ut nibh nec mollis. Ut fermentum maximus nibh nec vulputate. Fusce ultricies, arcu quis faucibus egestas, ligula tellus placerat orci, sed scelerisque nisl mi eu nisi. Quisque pulvinar justo justo, non tristique enim pretium non. Cras eu lacus gravida, eleifend magna at, ultricies tortor.",
    "election_setup.manifest_menu.prompt": "Select what you would like to do:",

    "election_setup.joint_key_retrieved.title": "Joint Key Retrieved",
@ -54,15 +53,9 @@
    "election_setup.setup_complete.title": "Congratulations, the election is ready.",
    "election_setup.setup_complete.next": "Return to Election List",

-    "election_setup.introduction.title": "Welcome to the Election Setup",
-    "election_setup.introduction.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat magna nec nibh congue, non pretium mauris feugiat. Nam commodo ultrices semper. Praesent hendrerit ut nibh nec mollis. Ut fermentum maximus nibh nec vulputate. Fusce ultricies, arcu quis faucibus egestas, ligula tellus placerat orci, sed scelerisque nisl mi eu nisi. Quisque pulvinar justo justo, non tristique enim pretium non. Cras eu lacus gravida, eleifend magna at, ultricies tortor.",
-    "election_setup.introduction.next": "Continue",
-    "election_setup.introduction.steps_heading": "Here's what to expect",
-    "election_setup.introduction.steps_instruction": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat magna nec nibh congue, non pretium mauris feugiat. Nam commodo ultrices semper. Praesent hendrerit ut nibh nec mollis. Ut fermentum maximus nibh nec vulputate. Fusce ultricies, arcu quis faucibus egestas, ligula tellus placerat orci, sed scelerisque nisl mi eu nisi. Quisque pulvinar justo justo, non tristique enim pretium non. Cras eu lacus gravida, eleifend magna at, ultricies tortor.",
-    "election_setup.introduction.step1": "<bold>Lorem ipsum dolor sit amet</bold>, consectetur adipiscing elit. Duis feugiat magna nec nibh congue, non pretium mauris feugiat. Nam commodo ultrices semper. Praesent hendrerit ut nibh nec mollis. Ut fermentum maximus nibh nec vulputate. Fusce ultricies, arcu quis faucibus egestas, ligula tellus placerat orci, sed scelerisque nisl mi eu nisi. Quisque pulvinar justo justo, non tristique enim pretium non. Cras eu lacus gravida, eleifend magna at, ultricies tortor.",
-    "election_setup.introduction.step2": "<primary>Lorem ipsum dolor sit amet</primary>, consectetur adipiscing elit. Duis feugiat magna nec nibh congue, non pretium mauris feugiat. Nam commodo ultrices semper. Praesent hendrerit ut nibh nec mollis. Ut fermentum maximus nibh nec vulputate. Fusce ultricies, arcu quis faucibus egestas, ligula tellus placerat orci, sed scelerisque nisl mi eu nisi. Quisque pulvinar justo justo, non tristique enim pretium non. Cras eu lacus gravida, eleifend magna at, ultricies tortor.",
-    "election_setup.introduction.step3": "<secondary>Lorem ipsum dolor sit amet</secondary>, consectetur adipiscing elit. Duis feugiat magna nec nibh congue, non pretium mauris feugiat. Nam commodo ultrices semper. Praesent hendrerit ut nibh nec mollis. Ut fermentum maximus nibh nec vulputate. Fusce ultricies, arcu quis faucibus egestas, ligula tellus placerat orci, sed scelerisque nisl mi eu nisi. Quisque pulvinar justo justo, non tristique enim pretium non. Cras eu lacus gravida, eleifend magna at, ultricies tortor.",
-    "election_setup.introduction.step4": "<italic>Lorem ipsum dolor sit amet</italic>, consectetur adipiscing elit. Duis feugiat magna nec nibh congue, non pretium mauris feugiat. Nam commodo ultrices semper. Praesent hendrerit ut nibh nec mollis. Ut fermentum maximus nibh nec vulputate. Fusce ultricies, arcu quis faucibus egestas, ligula tellus placerat orci, sed scelerisque nisl mi eu nisi. Quisque pulvinar justo justo, non tristique enim pretium non. Cras eu lacus gravida, eleifend magna at, ultricies tortor.",
+    "election_setup.basic_info.title": "Election Setup: Basic Info",
+    "election_setup.basic_info.next": "Continue",
+    "election_setup.basic_info.election_id_tooltip": "A unique identifier for an election.",

    "election_list.title": "Election List",
    "election_list.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat magna nec nibh congue, non pretium mauris feugiat. Nam commodo ultrices semper. Praesent hendrerit ut nibh nec mollis. Ut fermentum maximus nibh nec vulputate. Fusce ultricies, arcu quis faucibus egestas, ligula tellus placerat orci, sed scelerisque nisl mi eu nisi. Quisque pulvinar justo justo, non tristique enim pretium non. Cras eu lacus gravida, eleifend magna at, ultricies tortor.",
--- a/packages/api-client/src/api/Api.ts
+++ b/packages/api-client/src/api/Api.ts
@ -90,13 +90,6 @@ export interface ElectionGuardMediatorApiClient {

    getElection(election_id: string): Promise<Election[] | undefined>;

-    putElection(
-        election_id: string,
-        key_name: string,
-        manifest: ElectionManifest,
-        context: CiphertextElectionContext
-    ): Promise<boolean | undefined>;
-
    findElection(filter: any, skip: number, limit: number): Promise<Election[] | undefined>;

    openElection(election_id: string): Promise<boolean | undefined>;
--- a/packages/api-client/src/api/MediatorApi.ts
+++ b/packages/api-client/src/api/MediatorApi.ts
@ -17,7 +17,6 @@ import {
    makeContextElection,
    openElection,
    publishElection,
-    putElection,
 } from '../server/elections';
 import {
    announceGuardianKeyCeremony,
@ -76,8 +75,6 @@ export default class MediatorApi implements ElectionGuardMediatorApiClient {

    getElection = getElection;

-    putElection = putElection;
-
    findElection = findElection;

    openElection = openElection;
--- a/packages/api-client/src/api/MockMediatorApi.ts
+++ b/packages/api-client/src/api/MockMediatorApi.ts
@ -17,7 +17,6 @@ import {
    makeContextElection,
    openElection,
    publishElection,
-    putElection,
 } from '../mocks/elections';
 import {
    announceGuardianKeyCeremony,
@ -76,8 +75,6 @@ export default class MockMediatorApi implements ElectionGuardMediatorApiClient {

    getElection = getElection;

-    putElection = putElection;
-
    findElection = findElection;

    openElection = openElection;
--- a/packages/api-client/src/mocks/elections.ts
+++ b/packages/api-client/src/mocks/elections.ts
@ -2,7 +2,6 @@
 import {
    ElectionConstants,
    Election,
-    ElectionManifest,
    CiphertextElectionContext,
    ElectionState,
 } from '../models/election';
@ -43,13 +42,6 @@ export const getElection = async (election_id: string): Promise<Election[] | und
    },
 ];

-export const putElection = async (
-    _election_id: string,
-    _key_name: string,
-    _manifest: ElectionManifest,
-    _context: CiphertextElectionContext
-): Promise<boolean | undefined> => true;
-
 export const findElection = async (
    _filter: any,
    _skip: number,
--- a/packages/api-client/src/models/election.ts
+++ b/packages/api-client/src/models/election.ts
@ -46,20 +46,6 @@ export class ElectionQueryResponse extends BaseResponse {
 */
 export class ElectionQueryRequest extends BaseQueryRequest {}

-/**
- * @class SubmitElectionRequest request data to submit a new election to the server
- * @extends BaseRequest
- */
-export class SubmitElectionRequest extends BaseRequest {
-    election_id = '';
-
-    key_name = '';
-
-    context: CiphertextElectionContext;
-
-    manifest: ElectionManifest;
-}
-
 /**
 * @class MakeElectionContextRequest request to build an Election Context for a given election.
 * @extends BaseRequest
--- a/packages/api-client/src/nswag/index.ts
+++ b/packages/api-client/src/nswag/index.ts
@ -7,6 +7,7 @@ export {
    CeremonyClient,
    KeyCeremony,
    KeyCeremonyQueryResponse,
+    SubmitElectionRequest,
 } from './clients';

 export { ClientFactory } from './ClientFactory';
--- a/packages/api-client/src/server/elections.ts
+++ b/packages/api-client/src/server/elections.ts
@ -1,11 +1,9 @@
 /* eslint-disable max-classes-per-file */
-import { get, post, put } from '../utils/http';
+import { get, post } from '../utils/http';
 import {
    ElectionConstants,
    Election,
    ElectionQueryResponse,
-    SubmitElectionRequest,
-    ElectionManifest,
    CiphertextElectionContext,
    MakeElectionContextRequest,
    MakeElectionContextResponse,
@ -25,23 +23,6 @@ export const getElection = async (election_id: string): Promise<Election[] | und
    return response.parsedBody?.data.elections;
 };

-export const putElection = async (
-    election_id: string,
-    key_name: string,
-    manifest: ElectionManifest,
-    context: CiphertextElectionContext
-): Promise<boolean | undefined> => {
-    const data: SubmitElectionRequest = {
-        election_id,
-        key_name,
-        manifest,
-        context,
-    };
-    const path = `${process.env.REACT_APP_MEDIATOR_SERVICE}/api/v1/election`;
-    const response = await put<{ resp: BaseResponse }>(path, data);
-    return response.parsedBody?.resp.is_success();
-};
-
 export const findElection = async (
    filter: any,
    skip: number,
--- a/packages/result-app/src/lang/MessageId.ts
+++ b/packages/result-app/src/lang/MessageId.ts
@ -56,16 +56,6 @@ enum MessageId {
    ElectionSetupSetupCompleteTitle = 'election_setup.setup_complete.title',
    ElectionSetupSetupCompleteNext = 'election_setup.setup_complete.next',

-    ElectionSetupIntroductionTitle = 'election_setup.introduction.title',
-    ElectionSetupIntroductionDescription = 'election_setup.introduction.description',
-    ElectionSetupIntroductionNext = 'election_setup.introduction.next',
-    ElectionSetupIntroductionStepsHeading = 'election_setup.introduction.steps_heading',
-    ElectionSetupIntroductionStepsInstructions = 'election_setup.introduction.steps_instruction',
-    ElectionSetupIntroductionStep1 = 'election_setup.introduction.step1',
-    ElectionSetupIntroductionStep2 = 'election_setup.introduction.step2',
-    ElectionSetupIntroductionStep3 = 'election_setup.introduction.step3',
-    ElectionSetupIntroductionStep4 = 'election_setup.introduction.step4',
-
    ElectionSetupUploadManifestTitle = 'election_setup.upload_manifest.title',
    ElectionSetupUploadManifestUpload = 'election_setup.upload_manifest.upload',
    ElectionSetupUploadManifestError = 'election_setup.upload_manifest.error',