Required HTML properties

  • Most HTML Elements:
    • Class: used to assign html elements to there own SASS
    • ID: used mostly in javascript to identify a single element in an entire page full of HTML
  • Input Fields:
    • Placeholder: puts text inside an input to help the user what to input
  • Buttons:
    • onclick: runs a javascript function when clicked
    • note: onclick can be replaced with event listeners, although onclick is simpler to code

Essential HTML Elements Required

  • Container: The primary Div that holds all the elements inside of it, first layer

  • Card: A Div that will hold username, password buttons

  • Input fields and buttons: Where the user will put there information/login

  • Common SASS that a Container will have:

    • display
    • justify-content/align items
    • color

Simplified Code

<div class="CONTAINER">
    <div class="CARD">
        <h3>Login</h3>
        <input id="signInEmailInput" class="input" placeholder="Email">
        <input id="signInPasswordInput" class="input" placeholder="Password">
        <button class="signInButton" onclick="login_user()">Login</button>
    </div>
</div>

Basic HTML Login

Login

userDbRequest Function (What is its Purpose?)

  • Adds data to our frontend html fragment, which will store our data.
  • Creating data in our frontend database view which users can see with authentication (login).

html fragment will be our table which we can input with data using our function.

Name ID Age

Errors:

  • 200 (OK): Returned on successful login or signup.
  • 401 (Unauthorized): Returned when a user enters incorrect login credentials.
  • 403 (Forbidden): Returned when a user tries to access a resource they don’t have permission for.

  • 409 (Conflict): Can be used if a new user is trying to register with an email/username that already exists.

  • Error Handling: Implement proper error handling in Flask to return meaningful error messages and appropriate HTTP status codes.

.authorizeHttpRequests(auth -> auth
	.requestMatchers("/authenticate").permitAll()
    .requestMatchers("/mvc/person/update/**", "/mvc/person/delete/**").authenticated()

    // .requestMatchers("/api/person/post/**", "/api/person/delete/**").authenticated()
    // Removed so anyone without a cookie can post

    .requestMatchers("/api/person/delete/**").authenticated()
    .requestMatchers("/**").permitAll()
)

Secruity:

  • this code sets up security policies for a web application, dictating which endpoints are accessible to all users and which are restricted to only those who are authenticated.
  • ‘auth’ represents the authorization configuration(rules/polices that say what users are allowed to do/access).
  • it’s important to have since it can keep important details like user data protected, while more public parts of the application remain accessible to everyone.
@PostMapping( "/post")
// @RequestParam is why user input needs to be a parameter
public ResponseEntity<Object> postPerson(@RequestParam("email") String email,
                                         @RequestParam("password") String password,
                                         @RequestParam("name") String name,
                                         @RequestParam("dob") String dobString) {
    Date dob;
    // dob handling
    try {
        dob = new SimpleDateFormat("MM-dd-yyyy").parse(dobString);
    } catch (Exception e) {
        return new ResponseEntity<>(dobString +" error; try MM-dd-yyyy", HttpStatus.BAD_REQUEST);
    }
    // A person object WITHOUT ID will create a new record with default roles as student
    Person person = new Person(email, password, name, dob);
    personDetailsService.save(person);
    return new ResponseEntity<>(email +" is created successfully", HttpStatus.CREATED);
}

Endpoint mapping

  • this code is an endpoint for creating new person records in the application.
  • processes data submitted by users (such as email, password, name, and date of birth)
  • the ‘new person’ represents the new account/user being made
  • this is important for the users to have their own personal data and profile, and the secruity we previously mentioned is important to protect this data from people who dont need access to it.