ZJ/nidobyte - Change KFVJ3KMWXEGILN4NWIWPPX7AU65M4H4UEAUIAQL2QSXOW3B5RFGQC

frontend: Introduce navigation bar Minor changes to the front-end mostly, to allow users to register, sign in, and sign out. The sign out route is changed to a GET endpoint, as links in HTML cannot DELETE.

Created by zj on September 3, 2021

KFVJ3KMWXEGILN4NWIWPPX7AU65M4H4UEAUIAQL2QSXOW3B5RFGQC

Dependencies

In channels

main

Change contents

File deletion: TODO
BF:BFD[1.0] → [2.9740:9768]
BF:BFD[2.9768] → [2.9769:9769]
B:BD[2.9769] → [2.9770:9828]
```
- Test the sign up/sign in/sign out flow
- Record changes
```

File deletion: base.html.tera

BF:BFD[2.21] → [2.1926:1964]

BF:BFD[2.1964] → [2.1965:1965]

B:BD[2.1965] → [2.1966:2302]

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nidobyte</title>
</head>
<body>
{% if flash %}
    <p>{{flash}}</p>
{% endif %}
    {% block body %}
    {% endblock body %}
</body>
</html>

Replacement in templates/sign_in.html.tera at line 3 [2.64]
B:BD[2.103] → [2.103:152]
```
<div style="width:30%;" class="container-fluid">
```
[2.103]
[2.152]
```
<div style="width:50%;" class="container-fluid">
```

Replacement in templates/sign_in.html.tera at line 17 [2.64]

B:BD[2.735] → [2.735:806]

        <button class="btn btn-primary" type="submit">Sign up</button>

[2.735]

[2.806]

        <button class="btn btn-primary" type="submit">Sign in</button>

File addition: nav.html.tera (----------)

[2.21]

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Nidobyte</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">User</a>
            <ul class="dropdown-menu" aria-labelledby="dropdown08">
              <li><a class="dropdown-item" href="/users/sign_in">Sign in</a></li>
              <li><a class="dropdown-item" href="/users/new">Sign up</a></li>
              <li><a class="dropdown-item" href="/users/sign_out">Sign out</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
</nav>

File addition: landing.html.tera (----------)

[2.21]

{% extends "base" %}
{% block body %}
<p>Hello world!</p>
{% endblock body %}

File addition: base.html.tera (----------)

[2.21]

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nidobyte</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</head>
<body>
    {% include "nav" %}
    {% block body %}
    <p> foo</p>
    {% endblock body %}
</body>
</html>

File deletion: index.html

BF:BFD[3.18] → [3.19:53]

BF:BFD[3.53] → [3.54:54]

B:BD[3.54] → [3.55:163]

<html>
  <head>
    <title>Nidobyte</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Replacement in src/users.rs at line 94 [2.2336]
B:BD[2.4944] → [2.4944:4967]
```
#[delete("/sign_out")]
```
[2.4944]
[2.4967]
```
#[get("/sign_out")]
```

File addition: root.rs (----------)

[3.179]

use rocket::form::Context;
use rocket_dyn_templates::Template;
#[get("/")]
pub fn landing() -> Template {
    Template::render("landing", &Context::default())
}

Insertion in src/main.rs at line 11 [3.212]
[2.8067]
[2.8067]
```
mod root;
```
Insertion in src/main.rs at line 29 [3.212]
[2.8399]
[4.823]
```
        .mount("/", routes![root::landing])
```

File deletion: mod.rs

BF:BFD[2.8420] → [2.8421:8451]

BF:BFD[2.8451] → [2.8452:8452]

B:BD[2.8452] → [2.8453:9352]

use std::env;
use rocket::{
    fairing::{self, AdHoc},
    Build, Rocket,
};
pub(crate) type Database = sqlx::PgPool;
async fn init_db(rocket: Rocket<Build>) -> fairing::Result {
    let database_url = match env::var("DATABASE_URL") {
        Ok(val) => val,
        Err(e) => {
            error!("Failed to read DATABASE_URL environment variable: {}", e);
            return Err(rocket);
        }
    };
    let pool = sqlx::PgPool::connect(&database_url)
        .await
        .expect("Failed to connect to the database");
    if let Err(e) = sqlx::migrate!("./migrations").run(&pool).await {
        error!("Failed to migrate PG database: {}", e);
        return Err(rocket);
    }
    Ok(rocket.manage(pool))
}
pub fn stage() -> AdHoc {
    AdHoc::on_ignite("SQL Stage - PostgreSQL", |rocket| async {
        rocket.attach(AdHoc::try_on_ignite("Postgres Database", init_db))
    })
}

File addition: mod.rs (----------)

[2.8420]

use std::env;
use rocket::{
    fairing::{self, AdHoc},
    Build, Rocket,
};
pub(crate) type Database = sqlx::PgPool;
async fn init_db(rocket: Rocket<Build>) -> fairing::Result {
    let database_url = match env::var("DATABASE_URL") {
        Ok(val) => val,
        Err(e) => {
            error!("Failed to read DATABASE_URL environment variable: {}", e);
            return Err(rocket);
        }
    };
    let pool = sqlx::PgPool::connect(&database_url)
        .await
        .expect("Failed to connect to the database");
    if let Err(e) = sqlx::migrate!("./migrations").run(&pool).await {
        error!("Failed to migrate PG database: {}", e);
        return Err(rocket);
    }
    Ok(rocket.manage(pool))
}
pub fn stage() -> AdHoc {
    AdHoc::on_ignite("SQL Stage - PostgreSQL", |rocket| async {
        rocket.attach(AdHoc::try_on_ignite("Postgres Database", init_db))
    })
}

frontend: Introduce navigation bar Minor changes to the front-end mostly, to allow users to register, sign in, and sign out. The sign out route is changed to a GET endpoint, as links in HTML cannot DELETE.

Dependencies

In channels

Change contents

File deletion: TODO

File deletion: base.html.tera

Replacement in templates/sign_in.html.tera at line 3 [2.64]

Replacement in templates/sign_in.html.tera at line 17 [2.64]

File addition: nav.html.tera (----------)

File addition: landing.html.tera (----------)

File addition: base.html.tera (----------)

File deletion: index.html

Replacement in src/users.rs at line 94 [2.2336]

File addition: root.rs (----------)

Insertion in src/main.rs at line 11 [3.212]

Insertion in src/main.rs at line 29 [3.212]

File deletion: mod.rs

File addition: mod.rs (----------)