pointercrate-user-pages: implement frontend for oauth registration

It works by first having you go through google's authorization flow, and
then having the website prompt you for a username.

Signed-off-by: stadust <43299462+stadust@users.noreply.github.com>

Author: stadust

pointercrate-user-pages/src/login.rs

@@ -71,4 +71,4 @@ fn login_page_body() -> Markup {
             }
         }
     }
-}
+}

pointercrate-user-pages/src/register.rs

@@ -1,6 +1,7 @@
 use maud::{html, Markup};
 use pointercrate_core_pages::head::HeadLike;
 use pointercrate_core_pages::PageFragment;
+use pointercrate_user::config;
 
 pub fn registration_page() -> PageFragment {
     let mut frag = PageFragment::new("Pointercrate - Registration", "Register for a new pointercrate account!")
@@ -25,11 +26,23 @@ fn register_page_body() -> Markup {
                     h1.underlined.pad {
                         "Sign Up"
                     }
-                    @if cfg!(feature = "legacy_accounts") {
-                        p {
-                            "Create a new account. Please note that the username cannot be changed after account creation, so choose wisely!"
-                        }
+                    p {
+                        "Create a new account. Please note that the username cannot be changed after account creation, so choose wisely!"
+                    }
+                    @if cfg!(feature = "oauth2") {
+                        div #g_id_onload
+                            data-ux_mode="popup"
+                            data-auto_select="true"
+                            data-itp_support="true"
+                            data-client_id=(config::google_client_id())
+                            data-callback="googleOauthRegisterCallback" {}
 
+                        div .g_id_signin data-text="signup_with" style="margin: 10px 0px" {}
+                        @if cfg!(feature = "legacy_accounts") {
+                            p.or style="text-size: small; margin: 0px" {"or"}
+                        }
+                    }
+                    @if cfg!(feature = "legacy_accounts") {
                         form.flex.col #register-form novalidate = "" {
                             p.info-red.output {}
                             span.form-input #register-username {
@@ -56,5 +69,31 @@ fn register_page_body() -> Markup {
                 }
             }
         }
+        @if cfg!(feature = "oauth2") {
+            (oauth_registration_dialog())
+        }
     }
 }
+
+
+fn oauth_registration_dialog() -> Markup {
+    html! {
+        div.overlay.closable {
+            div.dialog #oauth-registration-pick-username style="width: 400px" {
+                span.plus.cross.hover {}
+                h2.underlined.pad {
+                    "Pick your username:"
+                }
+                form.flex.col novalidate = "" {
+                    p.info-red.output {}
+                    span.form-input #oauth-username {
+                        label for = "username" {"Username:"}
+                        input type = "text" name = "username";
+                        p.error {}
+                    }
+                    input.button.blue.hover type = "submit" style = "margin: 15px auto 0px;" value="Sign Up!";
+                }
+            }
+        }
+    }
+}

pointercrate-user-pages/static/js/register.js

@@ -1,4 +1,4 @@
-import {Form, post, tooShort, valueMissing} from "/static/core/js/modules/form";
+import {displayError, Form, FormDialog, post, tooShort, valueMissing} from "/static/core/js/modules/form.js";
 
 
 function intializeRegisterForm() {
@@ -46,7 +46,21 @@ function intializeRegisterForm() {
     });
 }
 
-$(document).ready(function () {
+function googleOauthRegisterCallback(response) {
+    let dialog = new FormDialog("oauth-registration-pick-username");
+    dialog.form.addErrorOverride(40902, "oauth-username");
+    dialog.form.onSubmit(() => {
+        let formData = dialog.form.serialize();
+        formData['credential'] = response['credential'];
+        post("/api/v1/auth/oauth/google/register", {}, formData)
+            .then(() => window.location = "/account/")
+            .catch(displayError(dialog.form))
+    })
+    dialog.open();
+}
 
+window.googleOauthRegisterCallback = googleOauthRegisterCallback;
+
+$(document).ready(function () {
     intializeRegisterForm();
 })