SignUp Page

    Co-authored-by: Meneguini <[email protected]>
    Co-authored-by: DukeManh <[email protected]>

src/web/next.config.js

@@ -13,7 +13,15 @@ const dotenv = require('dotenv');
 const loadApiUrlFromEnv = (envFile) => dotenv.config({ path: envFile });
 
 // ENV Variables we need to forward to next by prefix with NEXT_PUBLIC_*
-const envVarsToForward = ['WEB_URL', 'API_URL', 'IMAGE_URL', 'POSTS_URL', 'AUTH_URL'];
+const envVarsToForward = [
+  'WEB_URL',
+  'API_URL',
+  'IMAGE_URL',
+  'POSTS_URL',
+  'AUTH_URL',
+  'FEED_DISCOVERY_URL',
+  'USERS_URL',
+];
 
 // Copy an existing ENV Var so it's visible to next: API_URL -> NEXT_PUBLIC_API_URL
 const forwardToNext = (envVar) => {

src/web/package.json

@@ -15,7 +15,9 @@
     "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^10.1.3",
     "@types/smoothscroll-polyfill": "^0.3.1",
+    "@types/yup": "^0.29.11",
     "dotenv": "^8.2.0",
+    "formik": "^2.2.6",
     "highlight.js": "10.7.2",
     "jwt-decode": "^3.1.2",
     "nanoid": "^3.1.22",
@@ -25,7 +27,8 @@
     "react-use": "^17.2.1",
     "smoothscroll-polyfill": "^0.4.4",
     "swr": "^0.5.5",
-    "valid-url": "^1.0.9"
+    "valid-url": "^1.0.9",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.6",

src/web/src/components/BannerButtons.tsx

@@ -73,14 +73,16 @@ const LandingButtons = () => {
           >
             Sign in
           </Button>
-          <Button
-            style={{
-              fontSize: '1.3rem',
-            }}
-            variant="outlined"
-          >
-            Sign up
-          </Button>
+          <Link href="/signup" passHref>
+            <Button
+              style={{
+                fontSize: '1.3rem',
+              }}
+              variant="outlined"
+            >
+              Sign up
+            </Button>
+          </Link>
         </>
       )}
     </div>

src/web/src/components/SignUp/FormFields/CheckBoxInput.tsx

@@ -0,0 +1,48 @@
+import { createStyles, makeStyles } from '@material-ui/core';
+import { useField } from 'formik';
+import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    formInputLabel: {
+      fontSize: '1.4em',
+      color: 'black',
+    },
+    formControlLabel: {
+      fontSize: '1em',
+      color: '#474747',
+    },
+  })
+);
+
+type CheckboxProps = {
+  name: string;
+  label: string;
+  checked: boolean;
+};
+
+const CheckBoxInput = (props: CheckboxProps) => {
+  const classes = useStyles();
+
+  const { label, name, checked, ...rest } = props;
+  const [field, meta] = useField(props);
+
+  return (
+    <FormControl {...rest} error={!!meta.error && meta.touched}>
+      <FormGroup>
+        <FormControlLabel
+          control={<Checkbox {...field} checked={checked} />}
+          label={<span className={classes.formControlLabel}>{label}</span>}
+          name={name}
+        />
+      </FormGroup>
+      <FormHelperText>{meta.error && meta.touched ? meta.error : ''}</FormHelperText>
+    </FormControl>
+  );
+};
+
+export default CheckBoxInput;

src/web/src/components/SignUp/FormFields/TextInput.tsx

@@ -0,0 +1,49 @@
+import { useField, FieldHookConfig } from 'formik';
+import TextField, { TextFieldProps } from '@material-ui/core/TextField';
+import { createStyles, makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    formInput: {
+      fontSize: '1.1em',
+      color: 'black',
+    },
+    formInputLabel: {
+      fontSize: '1.2em',
+      color: 'black',
+    },
+  })
+);
+
+const TextInput = (props: TextFieldProps & FieldHookConfig<string>) => {
+  const classes = useStyles();
+
+  const { helperText, error, ...rest } = props;
+  const [field, meta] = useField(props);
+
+  const renderHelperText = () =>
+    error || (meta.touched && meta.error) ? meta.error || helperText : '';
+
+  return (
+    <TextField
+      InputProps={{
+        classes: {
+          input: classes.formInput,
+        },
+      }}
+      InputLabelProps={{
+        classes: {
+          root: classes.formInputLabel,
+        },
+      }}
+      fullWidth
+      type="text"
+      error={error || (meta.touched && !!meta.error)}
+      helperText={renderHelperText()}
+      {...field}
+      {...rest}
+    />
+  );
+};
+
+export default TextInput;

src/web/src/components/SignUp/FormFields/index.tsx

@@ -0,0 +1,4 @@
+import TextInput from './TextInput';
+import CheckBoxInput from './CheckBoxInput';
+
+export { TextInput, CheckBoxInput };

src/web/src/components/SignUp/Forms/BasicInfo.tsx

@@ -0,0 +1,163 @@
+import { ReactNode } from 'react';
+import { createStyles, makeStyles } from '@material-ui/core';
+import { connect } from 'formik';
+
+import { SignUpForm } from '../../../interfaces';
+import useAuth from '../../../hooks/use-auth';
+import formModels from '../Schema/FormModel';
+import { TextInput } from '../FormFields';
+
+const { firstName, lastName, displayName, email } = formModels;
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    root: {
+      padding: '0',
+      margin: '0',
+      width: '100%',
+      position: 'relative',
+      minHeight: '100%',
+    },
+    container: {
+      display: 'grid',
+      gridTemplateColumns: '1fr',
+      justifyItems: 'center',
+      textAlign: 'center',
+      alignItems: 'center',
+      width: '100%',
+      position: 'absolute',
+      minHeight: '100%',
+      [theme.breakpoints.down(600)]: {
+        width: '95%',
+        marginLeft: '2.5%',
+      },
+    },
+    helloMessage: {
+      fontSize: '0.8em',
+    },
+    userInfo: {
+      color: '#292929',
+      margin: '0',
+      padding: '.5%',
+      width: '90%',
+      height: '80%',
+      fontSize: '0.8em',
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr',
+      justifyContent: 'center',
+      alignItems: 'center',
+      border: '1px solid #C5EB98',
+      background: 'rgba(197, 235, 152, 0.2)',
+      borderRadius: '5px',
+      [theme.breakpoints.down(600)]: {
+        gridTemplateColumns: '1fr',
+      },
+      '& span': {
+        color: '#525252',
+      },
+    },
+    userInfoLabel: {
+      gridColumnStart: '1',
+      gridColumnEnd: '3',
+      [theme.breakpoints.down(600)]: {
+        gridColumnStart: '1',
+        gridColumnEnd: '2',
+      },
+    },
+    displayNameTitle: {
+      fontSize: '0.85em',
+    },
+    button: {
+      fontSize: '0.8em',
+      height: '35px',
+      width: '50%',
+      background: '#121D59',
+      color: '#A0D1FB',
+      marginLeft: '5%',
+      '&:hover': {
+        color: 'black',
+        border: '1px solid #121D59',
+      },
+    },
+    displayNameInfo: {
+      textAlign: 'start',
+      gridColumnStart: '1',
+      gridColumnEnd: '3',
+      fontSize: '1em',
+    },
+    inputContainer: {
+      display: 'grid',
+      alignItems: 'center',
+      justifyItems: 'center',
+      width: '90%',
+      gridTemplateColumns: '80% 20%',
+      '& .MuiFormHelperText-root': {
+        fontSize: '0.9em',
+        color: 'black',
+      },
+      '& .MuiFormLabel-root': {
+        color: 'black',
+      },
+      '& .MuiInputBase-input.Mui-disabled': {
+        marginTop: '16px',
+      },
+    },
+  })
+);
+
+type Props = {
+  children: ReactNode;
+};
+
+const InputContainer = ({ children }: Props) => {
+  const classes = useStyles();
+
+  return <div className={classes.inputContainer}>{children}</div>;
+};
+
+const BasicInfo = connect<{}, SignUpForm>((props) => {
+  const classes = useStyles();
+  const { values } = props.formik;
+  const { user } = useAuth();
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.container}>
+        <div className={classes.helloMessage}>
+          <h1>Hello {user?.name || values.displayName}</h1>
+        </div>
+        <div className={classes.userInfo}>
+          <h2 className={classes.userInfoLabel}>
+            The following information is what we already have:
+          </h2>
+          <h2>
+            <b>Display name: </b>
+            <span>{user?.name || values.displayName}</span>
+          </h2>
+          <h2>
+            <b>Email: </b>
+            <span>{values.email}</span>
+          </h2>
+        </div>
+        <InputContainer>
+          <TextInput disabled name={email.name} value={values.email} />
+        </InputContainer>
+        <InputContainer>
+          <TextInput
+            label={displayName.label}
+            helperText="Will be displayed in all your interactions within Telescope"
+            name={displayName.name}
+          />
+        </InputContainer>
+        <InputContainer>
+          <TextInput label={firstName.label} name={firstName.name} />
+        </InputContainer>
+        <InputContainer>
+          <TextInput label={lastName.label} name={lastName.name} />
+        </InputContainer>
+      </div>
+    </div>
+  );
+});
+
+export default BasicInfo;