Flask return new angular page after registration form submission/processing

Question

I am creating a web app with an Angular front-end and a Flask back-end. I have registration and login pages. When a user submits the registration form, I want the data to be processed by Flask and then a redirect to the login page.

I prototyped the Flask app with static html at first. To render a new page after registration I would use:

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

How can I achieve the same with Angular? Is there an equivalent render_template function?

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)
      })

  }
}

Register function in flask:

@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})

Research SPAs. The server redirect is not what you want here. — Aluan Haddad
– Aluan Haddad, Commented Sep 8, 2020 at 14:42
realpython.com/user-authentication-with-angular-4-and-flask please see whether this helps you — smraj
– smraj, Commented Sep 8, 2020 at 14:51

Alvaro · Accepted Answer · 2023-04-27 07:12:22Z

0

You can use Router in angular in order to navigate to your different views. After make the post request, check the result and do the corresponding navigation. You would need declarate the router and then use the function navigate https://angular.io/api/router/Router

export class Test {
  constructor(private router: Router) {
    this.router.navigate("/url-u-want")
  }
}

answered Apr 27, 2023 at 7:12

Alvaro

513 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flask return new angular page after registration form submission/processing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related