React-Redux-firebase注册流程错误

时间:2019-07-04 00:39:49

标签: react-redux-firebase

我一直在尝试建立用户的注册页面,在该页面中,我希望我的代码使用注册表单中的电子邮件和密码来创建新的用户凭据,然后将其他用户详细信息存储在新的数据库表中(以便有一个单一ID)。我以前使用过这种方法,但现在无法以相同的方式使它工作。拜托,我不知道发生了什么变化或我又没有做正确的事情?

// my my action function
import firebase from '../config/firebase';

const databaseRef = firebase.database().ref();
const adminRef = databaseRef.child('admins')

export const registerAction = (fullname,email,password) =>
  async dispatch => {
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(function(user){
        adminRef.push().set({
          userId: user.user.uid,
          userName: fullname
        });
         dispatch ({
           type: "REGISTER",
           payload: true
         })
         .catch(err =>{
           alert(err)
         })
      })
  }

// ui component

import React from "react";
import { connect } from 'react-redux';
import { registerAction } from '../../actions/authAction'

// reactstrap components
import {
  Button,
  Card,
  CardHeader,
  CardBody,
  FormGroup,
  Form,
  Input,
  InputGroupAddon,
  InputGroupText,
  InputGroup,
  Row,
  Col
} from "reactstrap";

class Register extends React.Component {

    state = {
      email : '',
      password: '',
      fullname: ''
    }


    onChange = (stateName, value) =>{
      this.setState({
        [stateName]: value
      })
    }
  render() {
    return (
      <>
        <Col lg="6" md="8">
          <Card className="bg-secondary shadow border-0">
            <CardHeader className="bg-transparent pb-5">
              <div className="text-muted text-center mt-2 mb-4">
                <small>Sign up with</small>
              </div>
            </CardHeader>
            <CardBody className="px-lg-5 py-lg-5">
              <div className="text-center text-muted mb-4">
                <small>Or sign up with credentials</small>
              </div>
              <Form role="form">
                <FormGroup>
                  <InputGroup className="input-group-alternative mb-3">
                    <InputGroupAddon addonType="prepend">
                      <InputGroupText>
                        <i className="ni ni-hat-3" />
                      </InputGroupText>
                    </InputGroupAddon>
                    <Input placeholder="FullName" type="text" id="fullname"  onChange={e => this.onChange("fullname", e.target.value) } />
                  </InputGroup>
                </FormGroup>
                <FormGroup>
                  <InputGroup className="input-group-alternative mb-3">
                    <InputGroupAddon addonType="prepend">
                      <InputGroupText>
                        <i className="ni ni-email-83" />
                      </InputGroupText>
                    </InputGroupAddon>
                    <Input placeholder="Email" type="email" id="email" onChange={e => this.onChange("email", e.target.value) } />
                  </InputGroup>
                </FormGroup>
                <FormGroup>
                  <InputGroup className="input-group-alternative">
                    <InputGroupAddon addonType="prepend">
                      <InputGroupText>
                        <i className="ni ni-lock-circle-open" />
                      </InputGroupText>
                    </InputGroupAddon>
                    <Input placeholder="Password" type="password" id="password"  onChange={e => this.onChange("password", e.target.value) }  />
                  </InputGroup>
                </FormGroup>
                <div className="text-muted font-italic">
                  <small>
                    password strength:{" "}
                    <span className="text-success font-weight-700">strong</span>
                  </small>
                </div>
                <Row className="my-4">
                  <Col xs="12">
                    <div className="custom-control custom-control-alternative custom-checkbox">
                      <input
                        className="custom-control-input"
                        id="customCheckRegister"
                        type="checkbox"
                      />
                      <label
                        className="custom-control-label"
                        htmlFor="customCheckRegister"
                      >
                        <span className="text-muted">
                          I agree with the{" "}
                          <a href="#pablo" onClick={e => e.preventDefault()}>
                            Privacy Policy
                          </a>
                        </span>
                      </label>
                    </div>
                  </Col>
                </Row>
                <div className="text-center">
                  <Button className="mt-4" color="primary" type="button" onClick= {e => this.props.registerAction(this.state.email, this.state.password, this.state.fullname)}>
                    Create account
                  </Button>
                </div>
              </Form>
            </CardBody>
          </Card>
        </Col>
      </>
    );
  }
}

const mapStateToProps = (state) =>{
    console.log(state);
  return {
  register: state.authState.loggedIn
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    registerAction: (email, password, fullname) => {
      dispatch(registerAction(email, password, fullname))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Register)


//but here is the error message i am keep getting


//{code: "auth/invalid-email", message: "The email address is badly //formatted."}

// index.js

import  configureStore  from 'store'

import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";
import "assets/scss/argon-dashboard-react.scss";

import AdminLayout from "layouts/Admin.jsx";
import AuthLayout from "layouts/Auth.jsx";

ReactDOM.render(
  <Provider store={configureStore()}>

  <BrowserRouter>
    <Switch>
      <Route path="/admin" render={props => <AdminLayout {...props} />} />
      <Route path="/auth" render={props => <AuthLayout {...props} />} />
      <Redirect from="/" to="/admin/index" />
    </Switch>
  </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

0 个答案:

没有答案