在iOS Safari上使用Redux表单触发触发密码保存问题

时间:2019-05-13 19:37:37

标签: reactjs redux autocomplete redux-form react-redux-form

我的项目使用redux-forms,我试图在登录和注册表单上获得自动完成功能。我关注了我在自动完成功能上可以找到的所有文档,它适用于iOS Safari以外的所有浏览器。

我已经添加了所有适用的自动填充属性,并且表单正在按照其应有的方式提交。当用户完成登录或注册,然后以另一种方式与页面交互时,它可以正常工作。考虑到这一点,我尝试了几件事来迫使它弹出。尝试登录时,我重新路由了该用户。没有。我弹出一个警报。没有。而现在,我在这里!

登录表格:

<form onSubmit={this.login.bind(this)} autoComplete="on">
                <Field
                  component={TextField}
                  id="email"
                  fullWidth
                  autoComplete="email"
                  hintText="Email"
                  name="email"
                  type="email"
                  normalize={R.toLower}
                  validate={[required, email]}
                  {...FormElements.styles.text}
                />
                <Field
                  id="password"
                  autoFocus={!!login_email}
                  component={TextField}
                  fullWidth
                  autoComplete="current-password"
                  hintText="Password"
                  name="password"
                  type="password"
                  onKeyPress={this.passwordOnKeyPressHandler.bind(this)}
                  validate={[required]}
                  {...FormElements.styles.text}
                />
                {error && <div className="form-error m-t">{error}</div>}
                <div className="text-center m-t">
                  <div className="m-b-sm">
                    Don&apos;t have an account?{" "}
                    <a
                      className="register-link"
                      href="javascript:void(0)"
                      onClick={() =>
                        this.props.toggle(this.props.VIEWS.REGISTER)
                      }
                    >
                      Register
                    </a>
                  </div>
                  <div className="">
                    <a
                      className="forgot-password-link"
                      href="javascript:void(0)"
                      onClick={() => this.props.toggle(this.props.VIEWS.FORGOT)}
                    >
                      forgot password?
                    </a>
                  </div>
                </div>
                <div className="register__footer visible-md visible-lg">
                  {this.renderBtn({ size: "large" })}
                </div>
                <div className="auth__switch-view visible-xs visible-sm">
                  <div className="m-t">{this.renderBtn()}</div>
                </div>
              </form>

按钮:

<div className="register__action-btn-container">
        <Button
          type="submit"
          disabled={submitting}
          label={submitting ? "Logging in ..." : "Login"}
          size={params && params.size}
        />
      </div>

登录功能:

 login(e) {
    // e.preventDefault();
    document.querySelector('input[name="password"]').blur();
    // this.props.handleSubmit();
    $S.dispatch(submit(LOGIN_FORM));
    // On mobile, we have to force the username and password to be stored.
    miscUtils.triggerSavePasswordPrompt(e);
  }

试图强行执行...

function triggerSavePasswordPrompt(event) {
  if (window.PasswordCredential && event) {
    let c = new PasswordCredential(event.target);
    navigator.credentials.store(c);
  } else {
    alert("shizs effed yo")
  }
}

我希望用户在iOS Safari上提交时出现提示以保存或建议输入密码。它不是。但是,如果用户确实保存了密码,它将显示自动填充提示。

0 个答案:

没有答案