Hari 27: Auth pada React Native (2)

Kita telah membuat fitur login sebelumnya, sekarang kita lanjutkan dengan fitur register karena sebelumnya akun untuk login telah dibuatkan dari sisi backendnya sehingga dapat langsung dipakai.

Buat file pages/Register.js yang isi kodenya seperti berikut.

import React, { useState } from "react";
import {
  Container,
  Header,
  Body,
  Title,
  Content,
  Text,
  Form,
  Label,
  Input,
  Button,
  Item,
  Right,
} from "native-base";
import { Link } from "react-router-native";
import { useDispatch } from "react-redux";
import { createUser } from "../actions/user.action";

const Register = (props) => {
  const dispatch = useDispatch();
  const [user, updateUser] = useState({});

  const submitForm = () => {
    dispatch(createUser(user)).then((res) => {
      props.history.push("/");
    });
  };

  return (
    <Container>
      <Header>
        <Body>
          <Title>Register</Title>
        </Body>
      </Header>
      <Content style={{ padding: 16 }}>
        <Right>
          <Text style={{ fontSize: 32 }}>Register 30 Hari Js</Text>
        </Right>
        <Form>
          <Item floatingLabel>
            <Label>Nama</Label>
            <Input
              onChangeText={(text) => updateUser({ ...user, name: text })}
            />
          </Item>
          <Item floatingLabel>
            <Label>Label</Label>
            <Input
              onChangeText={(text) => updateUser({ ...user, label: text })}
            />
          </Item>
          <Item floatingLabel>
            <Label>Link Profile</Label>
            <Input
              onChangeText={(text) => updateUser({ ...user, picture: text })}
            />
          </Item>
          <Item floatingLabel>
            <Label>Email</Label>
            <Input
              onChangeText={(text) => updateUser({ ...user, email: text })}
            />
          </Item>
          <Item floatingLabel>
            <Label>Phone</Label>
            <Input
              onChangeText={(text) => updateUser({ ...user, phone: text })}
            />
          </Item>
          <Item floatingLabel>
            <Label>Website</Label>
            <Input
              onChangeText={(text) => updateUser({ ...user, website: text })}
            />
          </Item>
          <Item floatingLabel>
            <Label>Summary</Label>
            <Input
              onChangeText={(text) => updateUser({ ...user, summary: text })}
            />
          </Item>
          <Item floatingLabel last>
            <Label>Password</Label>
            <Input
              secureTextEntry={true}
              onChangeText={(text) => updateUser({ ...user, password: text })}
            />
          </Item>

          <Button
            style={{
              marginTop: 16,
              marginBottom: 16,
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
            }}
            onPress={submitForm}
          >
            <Text style={{ textAlign: "center" }}> Register </Text>
          </Button>
          <Link to={"/"}>
            <Text> Login </Text>
          </Link>
        </Form>
      </Content>
    </Container>
  );
};

export default Register;

Hasil akan seperti berikut.

Hasil Register

Hari 27: Auth pada React Native (2)

Comments

30 Hari Javascript

Hari 28: Refreshing otak say no to Covid-19

More from this blog

Ngoding React Nggak Harus Ribet: Ngobrolin Komponen yang Sering Disalahpahami

Ngapain Sih Pake TypeScript di React? Ribet Tapi Worth It

Regex untuk si paling anti ribet

Cara konversi bilangan String ke Number di Javascript

Tips bekerjasama dengan mentor

Command Palette

Comments

30 Hari Javascript

Hari 28: Refreshing otak say no to Covid-19

More from this blog