Release

src/app/page.tsx

@@ -23,7 +23,7 @@ export default function Page() {
             <Sponsors26/>
             <Gallery/>
             <Newsletter/>
-            {/* <Registration /> */}
+            <Registration />
             <Location />
             <Speakers/>
             <Jury/>

src/components/Registration/GroupManager/GroupManager.jsx

@@ -8,7 +8,7 @@ import {
   Typography,
 } from "@mui/material";
 import { LoadingButton } from "@mui/lab";
-import {useEffect, useMemo, useState} from "react";
+import { useEffect, useMemo, useState } from "react";
 import { GroupRest } from "../../../rest/GroupRest";
 
 export function GroupManager(props) {
@@ -17,21 +17,27 @@ export function GroupManager(props) {
   const [group, setGroup] = useState(false);
   const [groupInput, setGroupInput] = useState("");
   const [groupInputError, setGroupInputError] = useState(false);
+  const [groupName, setGroupName] = useState("");
   const groupRest = useMemo(() => new GroupRest(), []);
 
-
   function createNewGroup() {
     setLoadingNewTeam(true);
-    setGroupInputError(false)
-    groupRest.createGroup(props.eventId).then((response) => {
-      setLoadingNewTeam(false);
-      setGroup(response.data);
-    });
+    setGroupInputError(false);
+    groupRest
+      .createGroup(props.eventId, groupName)
+      .then((response) => {
+        setLoadingNewTeam(false);
+        setGroup(response.data);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoadingNewTeam(false);
+      });
   }
 
   function getGroup() {
     setFetchingExistingTeam(true);
-      setGroupInputError(false)
+    setGroupInputError(false);
     groupRest
       .getGroup(props.eventId, groupInput)
       .then((response) => {
@@ -45,17 +51,17 @@ export function GroupManager(props) {
       });
   }
 
-    useEffect(() => {
-        props.onGroupChange(group)
-    }, [group]);
+  useEffect(() => {
+    props.onGroupChange(group);
+  }, [group]);
 
   function renderGroupSelection() {
     return (
       <Box sx={{ pt: 5, pb: 5 }}>
         <Stack direction="row" spacing={2}>
           <TextField
             fullWidth
-            label={"Enter team name (e.g. chalk-increase-vague)"}
+            label={"Enter team identification (e.g. chalk-increase-vague)"}
             value={groupInput}
             onChange={(event) => setGroupInput(event.target.value)}
             error={groupInputError}
@@ -72,26 +78,47 @@ export function GroupManager(props) {
             Join
           </LoadingButton>
         </Stack>
+        <Typography variant={"body2"} color={"text.disabled"} pt={1}>
+          Identifier given by the group creator
+        </Typography>
         <Divider sx={{ pt: 2, pb: 2 }}> or </Divider>
-        <Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}>
+        <Stack direction="row" spacing={2}>
+          <TextField
+            fullWidth
+            label={"Enter team name (e.g. Carbon Coders)"}
+            value={groupName}
+            onChange={(event) => setGroupName(event.target.value)}
+            disabled={fetchingExistingTeam}
+          />
           <LoadingButton
+            sx={{ flexWrap: "nowrap" }}
+            width={"100px"}
             variant={"outlined"}
             color={"primary"}
             onClick={createNewGroup}
             loading={loadingNewTeam}
-            disabled={fetchingExistingTeam}
+            disabled={
+              fetchingExistingTeam ||
+              groupName.length < 3 ||
+              groupName.length > 30
+            }
           >
-            Create new Team
+            Create
           </LoadingButton>
-        </Box>
+        </Stack>
+        <Typography variant={"body2"} color={"text.disabled"} pt={1}>
+          This will be your team name at the event
+        </Typography>
       </Box>
     );
   }
 
   function renderGroup() {
     return (
       <Box sx={{ pt: 5, pb: 5 }}>
-        <Typography gutterBottom>You are assigned to the group</Typography>
+        <Typography gutterBottom>
+          You are assigned to the group with identifier
+        </Typography>
         <Typography sx={{ fontWeight: 800, pb: 3 }} variant={"h5"}>
           {group.phrase}
         </Typography>
@@ -100,7 +127,7 @@ export function GroupManager(props) {
         </Button>
 
         <Typography sx={{ pt: 4 }}>
-          share this name to your team members
+          share this identifier to your team members
         </Typography>
         <Typography color={"text.secondary"}>
           This is not your actual team name at the event

src/components/Registration/Registration.jsx

@@ -33,7 +33,7 @@ import universities from "./universitiesDE.json";
 import { GroupManager } from "./GroupManager/GroupManager";
 import { INPUT_TYPES } from "./InputTypes.js";
 
-const registrationClosed = true;
+const registrationClosed = false;
 const personalData = [
   {
     formLabel: "First name",
@@ -71,7 +71,8 @@ const personalData = [
     type: INPUT_TYPES.TEXT_FIELD,
     input: ["example@example.com"],
     name: "email",
-    regex: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,
+    regex:
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
     required: true,
   },
   {
@@ -199,6 +200,31 @@ const skills = [
   },
 ];
 
+const travelSponsorship = [
+  {
+    fullWidth: true,
+    input:
+      "Our partner, Quantco, provides travel scholarships for participants from around the globe. Applying is easy — just submit your CV and select the checkbox below.",
+    type: INPUT_TYPES.TYPOGRAPHY,
+  },
+  {
+    fullWidth: true,
+    input:
+      "Please email your CV in PDF format to travel-scholarship@hackhpi.org.",
+    type: INPUT_TYPES.TYPOGRAPHY,
+  },
+  {
+    formLabel: "",
+    input: [
+      "I consent to sharing my contact information and CV with our partner, Quantco, and authorize them to contact me.",
+    ],
+    name: "travelStipend",
+    type: INPUT_TYPES.CHECKBOX,
+    required: false,
+    fullWidth: true,
+  },
+];
+
 const legal = [
   {
     formLabel: "Privacy Policy",
@@ -252,11 +278,15 @@ function Registration() {
       label: "Team members",
       children: (
         <GroupManager
-          eventId={"02fc811b-1e67-402e-ac62-3f376cf33b6b"}
+          eventId={"c11a427e-f679-49b6-8574-b0d3211ad123"}
           onGroupChange={(change) => handleChange("group", change)}
         />
       ),
     },
+    {
+      label: "Travel Scholarship",
+      content: travelSponsorship,
+    },
     {
       label: "Confirmation",
       content: legal,
@@ -314,6 +344,11 @@ function Registration() {
       ) {
         return previous && false;
       }
+
+      if (current.regex && !values[current.name].match(current.regex)){
+        return previous && false;
+      }
+
       const meetsMax = current.max
         ? values[current.name]?.length <= current.max
         : true;
@@ -429,7 +464,7 @@ function Registration() {
           />
         );
       case INPUT_TYPES.TYPOGRAPHY:
-        return <Typography>{input}</Typography>;
+        return <Typography fullWidth>{input}</Typography>;
 
       default:
         return null;
@@ -461,7 +496,7 @@ function Registration() {
         email: values.email,
         fieldData: JSON.stringify(values),
         signUpForm: {
-          id: "283db119-046c-4418-939d-ab9bee06c996",
+          id: "e73735ad-c930-44ee-8631-6c5bc3aed029",
           //id: "2f1c60f2-f30b-4432-8129-9131c6e398dd",
         },
         group: values.group ? values.group : undefined,

src/rest/GroupRest.js

@@ -2,8 +2,8 @@ import axios from "axios";
 import { AbstractRest } from "./AbstractRest";
 
 export class GroupRest extends AbstractRest {
-  createGroup(signUpFormId) {
-    return axios.post(this.baseUrl + "/group", { event: { id: signUpFormId } });
+  createGroup(signUpFormId, name) {
+    return axios.post(this.baseUrl + "/group", { event: { id: signUpFormId }, name });
   }
 
   getGroup(eventId, groupName) {