Add login page

src/main.rs

@@ -68,6 +68,8 @@ async fn main() {
         )
         .route("/", get(index))
         .route("/login", get(login))
+        .route("/login_authorized", get(login_authorized))
+        .route("/dashboard", get(dashboard))
         .layer(Extension(store))
         .layer(Extension(oauth_client));
 
@@ -242,7 +244,7 @@ where
 }
 
 // Valid user session required. If there is none, redirect to the auth page
-async fn protected(user: User) -> impl IntoResponse {
+async fn dashboard(user: User) -> impl IntoResponse {
     format!(
         "Welcome to the protected area :)\nHere's your info:\n{:?}",
         user
@@ -311,7 +313,7 @@ async fn login_authorized(
     let mut headers = HeaderMap::new();
     headers.insert(SET_COOKIE, cookie.parse().unwrap());
 
-    (headers, Redirect::to("/".parse().unwrap()))
+    (headers, Redirect::to("/dashboard".parse().unwrap()))
 }
 
 struct AuthRedirect;

templates/login.html

@@ -1,4 +1,46 @@
 {% extends "base.html" %}
 {% block content %}
-Hello {{ name }}
+<section class="vh-100" style="background-color: #508bfc;">
+    <div class="container py-5 h-100">
+      <div class="row d-flex justify-content-center align-items-center h-100">
+        <div class="col-12 col-md-8 col-lg-6 col-xl-5">
+          <div class="card shadow-2-strong" style="border-radius: 1rem;">
+            <div class="card-body p-5 text-center">
+  
+              <h3 class="mb-5">Sign in</h3>
+  
+              <div class="form-outline mb-4">
+                <input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
+                <label class="form-label" for="typeEmailX-2">Email</label>
+              </div>
+  
+              <div class="form-outline mb-4">
+                <input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
+                <label class="form-label" for="typePasswordX-2">Password</label>
+              </div>
+  
+              <!-- Checkbox -->
+              <div class="form-check d-flex justify-content-start mb-4">
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  value=""
+                  id="form1Example3"
+                />
+                <label class="form-check-label" for="form1Example3"> Remember password </label>
+              </div>
+  
+              <button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>
+  
+              <hr class="my-4">
+  
+              <a class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;" type="submit"><i class="fab fa-google me-2"></i> Sign in with google</a>
+              <button class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;" type="submit"><i class="fab fa-facebook-f me-2"></i>Sign in with facebook</button>
+  
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 {% endblock content %}