📦 mlynch / ionic-react-routing-case

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52import React from 'react';

import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonList,
  IonItem,
  IonLabel,
  IonInput,
  IonButton,
  IonButtons
} from "@ionic/react";

export const SignupPage = ({ history }: any) => {
  const goTo = (path: string) => {
    history.push(path, {direction: 'forward'});
  }

  return (
  <>
    <IonHeader>
      <IonToolbar color="primary">
        <IonButtons slot="start">
          {/* this is the page the default root route goes to, so does it make sense to have a back button? */}
          {/* <IonBackButton defaultHref="/" /> */}
        </IonButtons>
        <IonTitle>Signup</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <form onSubmit={e => {e.preventDefault(); goTo('/tabs/activity')}} action="post">
        <IonList>
          <IonItem>
            <IonLabel>Email</IonLabel>
            <IonInput  type="email" />
          </IonItem>
          <IonItem>
            <IonLabel>Password</IonLabel>
            <IonInput type="password" />
          </IonItem>
          <IonButton expand="block" type="submit">Sign up</IonButton>
        </IonList>
      </form>
      <div>
        <a href="/login" onClick={(e) => { e.preventDefault(); goTo('/login')}}>Log in instead</a>
      </div>
    </IonContent>
  </>
  );
}