React-bootstrap модальные формы входа / регистрации

ProgramBox

React-bootstrap модальные формы входа / регистрации

Post author:admin
Запись опубликована:16 марта, 2023
Post category:Вопросы по программированию

#reactjs #react-bootstrap

Вопрос:

Привет, я новичок в React и в настоящее время пытаюсь реализовать модальный режим react-bootstrap. В настоящее время у меня есть два отдельных режима для входа и регистрации. Но в модальном теле каждого идентификатора хотелось бы иметь вкладку, на которой я могу переключаться между модальным содержимым входа и регистрации. Есть ли лучший способ сделать это? Я думал о том, чтобы иметь один AuthModal и иметь два компонента для содержимого входа / регистрации. Пожалуйста, сообщите.

Модальная регистрация:

 import React, { Component } from 'react'
import { Button, Modal, OverlayTrigger, Popover, Tooltip, Nav, NavItem, Row, Col, FormGroup, FieldGroup, Checkbox } from 'react-bootstrap'
import axios from 'axios';
import cookie from 'react-cookie';
import FacebookLogin from 'react-facebook-login';
import GoogleLogin from 'react-google-login';

const responseGoogle = (response) => {
  console.log(response);
  console.log(response.accessToken)
  axios.post('https://api.tech/sessions/google', {
    google_token: response.accessToken
  })
  .then(function (response) {
    var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
    cookie.save('user', userInfo);
    console.log(response);
    SignupModal.setState({ showModal: false });
  })
  .catch(function (error) {
    console.log(error);
  });
}
const responseFacebook = (response) => {
  console.log(response.accessToken)
  axios.post('https://api.tech/sessions/facebook', {
    facebook_token: response.accessToken
  })
 .then(function (response) {
    var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
    cookie.save('user', userInfo);
    console.log(response);
    SignupModal.close()
  })
  .catch(function (error) {
    console.log(error);
  });
}

export default class SignupModal extends Component {

  constructor() {
    super();
    console.log(this)
    this.render.bind(this);
    this.state = {showModal: false}
    this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
    this.handleLastNameChange = this.handleLastNameChange.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);


  }

  close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }

  handleFirstNameChange(e) {
    this.setState({firstName: e.target.value});
  }

  handleLastNameChange(e) {
    this.setState({lastName: e.target.value});
  }

  handleEmailChange(e) {
    this.setState({email: e.target.value});
  }

  handlePasswordChange(e) {
    this.setState({password: e.target.value});
  }

  signUp() {
    console.log(this)
    var that = this;
    axios.post('https://api.tech/users', {
      user: {
        email: this.state.email,
        password: this.state.password
      }
    })
    .then(function (response) {
      console.log(response);
      var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
      cookie.save('user', userInfo);
      axios({
        method: 'put',
        url: 'https://api.tech/users/'   response.data.data.id,
        headers: {'Authorization': response.data.data.attributes['auth-token']},
        data: {
          user: {
            first_name: that.state.firstName,
            last_name: that.state.lastName
          }
        }
      });
      that.setState({ showModal: false });
    })
    .catch(function (error) {
      console.log(error);
    });
  }

  handleSelect(eventKey) {
    event.preventDefault();
    alert(`selected ${eventKey}`);
  }
  render () {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = (
      <Tooltip id="modal-tooltip">
        wow.
      </Tooltip>
    );
    return (
      <div>
        <span onClick={this.open.bind(this)}>Sign Up</span>

        <Modal show={this.state.showModal} onHide={this.close.bind(this)} className="modal-wrapper signup-modal">
          <Modal.Body>
            <Nav bsStyle='pills'   activeKey={this.eventKey}  onSelect={this.handleSelect}>
              <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Log In</span></NavItem>
              <NavItem eventKey={2} title="Item" ><span className="login-nav-tab">Sign Up</span></NavItem>
            </Nav>
            <form>
              <FormGroup>
                <input value={this.state.firstName} onChange={this.handleFirstNameChange} className="form-control" placeholder="First Name"/>
              </FormGroup>
              <FormGroup>
                <input value={this.state.lastName} onChange={this.handleLastNameChange} className="form-control" placeholder="Last Name"/>
              </FormGroup>
              <FormGroup>
                <input value={this.state.email} onChange={this.handleEmailChange} className="form-control" placeholder="Email"/>
              </FormGroup>
              <FormGroup>
                <input value={this.state.password} onChange={this.handlePasswordChange} className="form-control" placeholder="Password"/>
              </FormGroup>
              <Row>
                <Col md={12}>
                  <p className="term-conditions">
                    By signing up, I agree to the <a href="javascript:void(0);">Terms of Service</a> and <a href="javascript:void(0);">Privacy Policy</a>
                  </p>
                </Col>
                <Col md={12}>
                  <Button onClick={this.signUp.bind(this)} className="btn btn-black btn-block">Sign Up</Button>
                </Col>
              </Row>
            </form>
            <div className="social-signup">
              <span className="divider-or">OR</span>
              <p>
                Sign in with social account
              </p>
              <Row>
                <Col xs={6}>
                  <GoogleLogin
                  className='btn btn-block btn-google'
                  clientId=""
                  buttonText="Google"
                  onSuccess={responseGoogle}
                  onFailure={responseGoogle}
                />
                </Col>
                <Col xs={6}>
                  <FacebookLogin
                  className='btn btn-block btn-facebook'
                  appId=""
                  autoLoad={true}
                  fields="name,email,picture"
                  callback={responseFacebook}
                  cssClass="btn btn-block btn-facebook"
                />
                </Col>
              </Row>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button className="btn btn-black" onClick={this.close.bind(this)}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }

}

Модальный вход :

 import React, { Component } from 'react'
import { Button, Modal, OverlayTrigger, Popover, Tooltip, Nav, NavItem, Row, Col, FormGroup, FieldGroup, Checkbox } from 'react-bootstrap'
import axios from 'axios';
import FacebookLogin from 'react-facebook-login';
import GoogleLogin from 'react-google-login';
import cookie from 'react-cookie';

const responseGoogle = (response) => {
  console.log(response.accessToken)
  axios.post('https://api.tech/sessions/google', {
    google_token: response.accessToken
  })
  .then(function (response) {
    var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
    cookie.save('user', userInfo);
    console.log(response);
    LoginModal.setState({ showModal: false });
  })
  .catch(function (error) {
    console.log(error);
  });
}
const responseFacebook = (response) => {
  console.log(response.accessToken)
  axios.post('https://api.tech/sessions/facebook', {
    facebook_token: response.accessToken
  })
 .then(function (response) {
    console.log(response); 
    var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
    cookie.save('user', userInfo);
  })
  .catch(function (error) {
    console.log(error);
  });
}

export default class LoginModal extends Component {
  constructor() {
    super();
    this.render.bind(this);
    this.state = {showModal: false}
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
  }

  close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }


  login() {
    console.log(this)
    axios.post('https://api.tech/sessions', {
      email: this.state.email,
      password: this.state.password
    })
    .then(function (response) {
      console.log(response);
      var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
      cookie.save('user', userInfo);
      // console.log(response);
      // var user = cookie.load('user');
      // console.log("hello");
      // console.log(user);

      //this.setState({ showModal: false });
    })
    .catch(function (error) {
      console.log(error);
    });
  }

  handleEmailChange(e) {
    this.setState({email: e.target.value});
  }

    handlePasswordChange(e) {
    this.setState({password: e.target.value});
  }

  handleSelect(eventKey) {
    event.preventDefault();
    alert(`selected ${eventKey}`);
  }
  render () {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = (
      <Tooltip id="modal-tooltip">
        wow.
      </Tooltip>
    );
    return (
      <div>
        <span onClick={this.open.bind(this)}>Log In</span>

        <Modal show={this.state.showModal} onHide={this.close.bind(this)} className="modal-wrapper login-modal-wrapper">
          <Modal.Body>
            <Nav bsStyle='pills'   activeKey={this.eventKey}  onSelect={this.handleSelect}>
              <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Log In</span></NavItem>
              <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Sign Up</span></NavItem>
            </Nav>
            <form>
              <FormGroup >
                    <input value={this.state.email} onChange={this.handleEmailChange} className="form-control" placeholder="Email"/>
              </FormGroup>
              <FormGroup>
                <input value={this.state.password} onChange={this.handlePasswordChange} className="form-control" placeholder="Password"/>
              </FormGroup>
              <Row className='top-space'>
                  <Col sm={6}>
                    <Checkbox className="checkbox-login"> Remember Me </Checkbox>
                  </Col>
                  <Col sm={6} className='forgot-password'>
                    <a href="">Forgot Password</a>
                  </Col>
                </Row>
                <Row className='top-space'>
                  <Col md={12}>
                    <Button onClick={this.login.bind(this)} className="btn btn-black btn-block">Login</Button>
                  </Col>
                </Row>
              </form>
            <div className="social-signup">
              <span className="divider-or">OR</span>
              <p>
                Sign in with social account
              </p>
              <Row>
                <Col xs={6}>
                  <GoogleLogin
                  className='btn btn-block btn-google'
                  clientId=""
                  buttonText="Google"
                  onSuccess={responseGoogle}
                  onFailure={responseGoogle}
                />
                </Col>
                <Col xs={6}>
                  <FacebookLogin
                  className='btn btn-block btn-facebook'
                  appId=""
                  autoLoad={true}
                  fields="name,email,picture"
                  callback={responseFacebook}
                  onSuccess={this.close.bind(this)}
                  cssClass="btn btn-block btn-facebook"
                />
                </Col>
              </Row>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button className="btn btn-black" onClick={this.close.bind(this)}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }

}

и моя панель навигации:

 import React, { Component } from 'react';
import LoginModal from './modals/LoginModal'
import SignupModal from './modals/SignupModal'
import axios from 'axios';
import { Nav, NavItem, Navbar, NavDropdown, MenuItem  } from 'react-bootstrap'
import cookie from 'react-cookie';

export default class MyNavbar extends Component {


  constructor() {
    super();
    var user = cookie.load('user');
    var that= this;
    this.state = {name: null, signedIn: false}
    if (user){
      axios.get('https://api.tech/users/'   user.id)
        .then(function (response) {
          console.log(response);
          that.setState({name: response.data.data.attributes['first-name']   ' '   response.data.data.attributes['last-name'], signedIn: true});
          //this.setState({ showModal: false });
        })
        .catch(function (error) {
          console.log(error);
        });
      }
    this.render.bind(this);
  }

  render() {

    return (
      <Navbar inverse className="navbar-wrapper">
        <Navbar.Header>
          <Navbar.Brand>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav className="navleft">
            <NavItem eventKey={1} href="#">Shop <i className="fa fa-home"></i></NavItem>
            <NavItem eventKey={2} href="#">Explore <i className="fa fa-compass"></i></NavItem>
            <NavItem  href="#">Alerts <i className="fa fa-bell-o"></i></NavItem>
          </Nav>
          <Nav pullRight className="navright">
            <NavItem eventKey={3} href="#">Style Game</NavItem>
            <NavItem eventKey={4} href="#">Editor's Blog</NavItem>
            <NavItem href="#" className={this.state.signedIn === true ? '' : 'hidden'}>{this.state.name}</NavItem>
            <NavItem eventKey={2} href="#" className={this.state.signedIn === true ? 'hidden' : ''}><SignupModal/></NavItem>
            <NavItem eventKey={1} href="#" className={this.state.signedIn === true ? 'hidden' : ''}><LoginModal/></NavItem>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

    );
  }
}

Вопрос:

Вам также может понравиться

Преобразование словаря, который присутствует внутри двух списков, в csv

Двойная верхняя граница, одна из которых центрирована с определенной шириной на одном элементе

Как оптимально выполнить группировку в MongoDB / PHP