Register

Example
Register

import React, { useState } from "react";
import {
  Container,
  Row,
  Col,
  Form,
  FormGroup,
  Label,
  Input,
  Button,
} from "slipstream-ui";

export function RegisterView() {
  const [state, setState] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    passwordConfirm: "",
  });

  function _handleChange(e) {
    setState({ ...state, [e.target.name]: e.target.value });
  }

  function _handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <Container size="md">
      <Row>
        <Col>
          <h1 className="mb-4">Register</h1>
          <Form
            onSubmit={(e) => {
              e.preventDefault();
              alert("Form submitted!");
            }}
          >
            <FormGroup>
              <Label htmlFor="form-firstName">First Name</Label>
              <Input
                id="form-firstName"
                type="text"
                name="firstName"
                required
              />
            </FormGroup>
            <FormGroup>
              <Label htmlFor="form-lastName">Last Name</Label>
              <Input id="form-lastName" type="text" name="lastName" required />
            </FormGroup>
            <FormGroup>
              <Label htmlFor="form-email" required>
                Email
              </Label>
              <Input id="form-email" type="email" name="email" required />
            </FormGroup>
            <FormGroup>
              <Label htmlFor="form-password" required>
                Password
              </Label>
              <Input
                id="form-password"
                type="password"
                name="password"
                required
              />
            </FormGroup>
            <FormGroup>
              <Label htmlFor="form-passwordConfirm" required>
                Confirm Password
              </Label>
              <Input
                id="form-password"
                type="password"
                name="passwordConfirm"
                required
              />
            </FormGroup>
            <FormGroup>
              <Button type="submit" block>Submit</Button>
            </FormGroup>
            <ul className="flex justify-between mt-2">
              <li>
                <a>❮ Forgot Password</a>
              </li>
              <li>
                <a>Login ❯</a>
              </li>
            </ul>
          </Form>
        </Col>
      </Row>
    </Container>
  );
}

export default RegisterView;