提交/处理注册表格后,烧瓶返回新的角度页面

时间:2020-09-08 14:32:08

标签: javascript python angular typescript flask

我正在创建一个具有Angular前端和Flask后端的Web应用程序。 我有注册和登录页面。当用户提交注册表单时,我希望Flask处理数据,然后将其重定向到登录页面。

首先,我使用静态html对Flask应用进行了原型设计。要在注册后呈现新页面,我将使用:

flash("A confirmation email has been sent via email", "success")
return redirect(url_for("main.index"))

如何使用Angular达到相同的目的?有等效的render_template函数吗?

register.component.ts:

import { Component, Injectable, NgModule } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { CustomValidators } from './custom-validators';
import { HttpClientModule } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss'],
  providers: [HttpClientModule]
})
export class RegisterComponent {
  public frmSignup: FormGroup;


  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.frmSignup = this.createSignupForm();
  }

  createSignupForm(): FormGroup {
    return this.fb.group(
      {
        full_name: [
          null,
          Validators.compose([Validators.required])
        ],
        org: [
          null,
          Validators.compose([Validators.required])
        ],
        user_type: [
          null,
          Validators.compose([Validators.required])
        ],
        email: [
          null,
          Validators.compose([Validators.email, Validators.required])
        ],
        password: [
          null,
          Validators.compose([
            Validators.required,
            CustomValidators.patternValidator(/\d/, {
              hasNumber: true
            }),
            CustomValidators.patternValidator(/[A-Z]/, {
              hasUpperCase: true
            }),
            CustomValidators.patternValidator(/[a-z]/, {
              hasLowerCase: true
            }),
            CustomValidators.patternValidator(
              /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
              {
                hasSpecialCharacters: true
              }
            ),
            Validators.minLength(8)
          ])
        ],
        confirmPassword: [null, Validators.compose([Validators.required])]
      },
      {
        validator: CustomValidators.passwordMatchValidator
      }
    );
  }

  submit() {
    this.frmSignup.valueChanges.subscribe(console.log);
    var registrationData = this.frmSignup.value
    console.log(registrationData)
    this.http.post("http://127.0.0.1:5000/register", registrationData)
      .subscribe((result) => {
        console.warn("result", result)
      })

  }
}

在烧瓶中注册功能:

@auth.route("/register", methods=["POST"])
def register_post():
    name = request.json["full_name"]
    org = request.json["org"]
    user_type = request.json["user_type"]
    email = request.json["email"]
    password = request.json["password"]

    user = User.query.filter_by(email=email).first()

    if user:
        status = "Email address already exists"
        return jsonify({'result': status})

    new_user = User(
        id=str(uuid.uuid4()),
        name=name,
        org=org,
        user_type=user_type,
        email=email,
        password=generate_password_hash(password, method="sha256"),
        admin="N",
        registered_on=datetime.datetime.now(),
        confirmed="N",
        confirmed_on=datetime.datetime.now(),
    )

    db.session.add(new_user)
    db.session.commit()

    token = generate_confirmation_token(new_user.email)
    confirm_url = url_for("auth.confirm_email", token=token, _external=True)
    html = render_template("activate.html", confirm_url=confirm_url)
    subject = "Please confirm your email"
    send_email(new_user.email, subject, html)

    login_user(new_user)

    status = "A confirmation email has been sent via email"
    return jsonify({'result': status})

0 个答案:

没有答案