получить элементы из моей выборки для рендеринга () с использованиемactjs - PullRequest
Новая
       15

получить элементы из моей выборки для рендеринга () с использованиемactjs

0 голосов
/ 29 октября 2019

Мне нужно скрыть форму аутентификации, когда пользователь подключен, и показать ее, когда он нажимает кнопку выхода из системы. 

    constructor (props) {
        super(props);
        this.state = {
          cnx_mail: '',
          cnx_pwd: '',
          items: [],
          errors: {},

          formErrors: {cnx_mail: '', cnx_pwd: ''},
          emailValid: false,
          passwordValid: false,
          formValid: false
        }
         this.handleUserInput = this.handleUserInput.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
  The login button :

    handleSubmit = (event) => {
        event.preventDefault();
        fetch(`${API}/api/connexion`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',   
              },
            body: JSON.stringify ({
                email: this.state.cnx_mail,
                password: this.state.cnx_pwd,
              })
        })
        .then(res => res.json())
        .then(json => {
            console.log(json);

//Here we get all the token 
            localStorage.setItem('head', json.result.split('.')[0]);
            localStorage.setItem('payload', json.result.split('.')[1]);
            localStorage.setItem('signature', json.result.split('.')[2]);

//Here we get the role to redirect user to accounts (if admin)
            roole = JSON.parse(atob(json.result.split('.')[1])).account[0].role === 'admin';
            this.setState({ therole : roole });
            if(roole) {
                console.log(json.result);
                this.props.history.push('/accounts');   
            }
            else {
                console.log("is user");
            }
            return roole;
        })
      }

этот код говорит, что если это простой пользователь (role == "admin")он будет перенаправлен на страницу аккаунтов, в противном случае (role == "user") он останется на той же странице ("/"), но мне придется скрыть форму аутентификации, которая обычно логична.

ЭтоФорма: 

                            <form className="demoForm" onSubmit={this.handleSubmit} noValidate  encType="application/x-www-form-urlencoded">
                                <div className="alreadysubscribed-input">
                                    <div className={`alreadysubscribed-field group-input ${this.errorClass(this.state.formErrors.cnx_mail)}`}>
                                        <input type="email" required className="form-control fatb-input input-form" name="cnx_mail"
                                            value={this.state.cnx_mail}
                                            id="cnx_mail"
                                            onChange={this.handleUserInput} error={errors.cnx_mail} />
                                            <label className="fatb-label" htmlFor="cnx_mail">Email</label>
                                            <div className="fatb-bar"></div>                                  
                                    </div>

                                    <div className={`alreadysubscribed-field group-input ${this.errorClass(this.state.formErrors.cnx_pwd)}`}>
                                        <input type="password" required className="form-control fatb-input input-form" name="cnx_pwd"
                                            value={this.state.cnx_pwd}
                                            id="cnx_pwd"
                                            onChange={this.handleUserInput} error={errors.cnx_pwd} />
                                            <label className="fatb-label" htmlFor="cnx_pwd">Mot de passe</label>
                                            <div className="fatb-bar"></div>
                                    </div>
                                </div>
                                <FormErrors formErrors={this.state.formErrors} />

                                <div className="btn-cnx">
                                    {/* <span className="mas">Se connecter</span> */}
                                    <button className="fatb-btn bubbly-button btn-anim3 w100p" type="submit"  name="cnx_btn" disabled={!this.state.formValid}>se connecter</button>
                                </div>
                            </form>

Спасибо

...