From 598f3b2a1806793324a205ea11be43ea42f9ae1f Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Fri, 9 Feb 2024 17:15:00 -0500 Subject: [PATCH 01/12] Finished Initial Design of Login Page modified: src/app.rs modified: src/lib.rs new file: src/pages.rs new file: src/pages/login.rs new file: src/pages/signup.rs new file: style/login.scss modified: style/main.scss new file: style/signup.scss modified: style/theme.scss --- src/app.rs | 4 ++ src/lib.rs | 1 + src/pages.rs | 2 + src/pages/login.rs | 48 ++++++++++++++++ src/pages/signup.rs | 14 +++++ style/login.scss | 136 ++++++++++++++++++++++++++++++++++++++++++++ style/main.scss | 2 + style/signup.scss | 1 + style/theme.scss | 1 + 9 files changed, 209 insertions(+) create mode 100644 src/pages.rs create mode 100644 src/pages/login.rs create mode 100644 src/pages/signup.rs create mode 100644 style/login.scss create mode 100644 style/signup.scss diff --git a/src/app.rs b/src/app.rs index ae1aa39..5955bb5 100644 --- a/src/app.rs +++ b/src/app.rs @@ -1,6 +1,8 @@ use leptos::*; use leptos_meta::*; use leptos_router::*; +use crate::pages::login::*; +use crate::pages::signup::*; #[component] pub fn App() -> impl IntoView { @@ -21,6 +23,8 @@ pub fn App() -> impl IntoView { + + diff --git a/src/lib.rs b/src/lib.rs index 28db59f..552bdcf 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -4,6 +4,7 @@ pub mod playstatus; pub mod playbar; pub mod database; pub mod models; +pub mod pages; use cfg_if::cfg_if; cfg_if! { diff --git a/src/pages.rs b/src/pages.rs new file mode 100644 index 0000000..40f63fd --- /dev/null +++ b/src/pages.rs @@ -0,0 +1,2 @@ +pub mod login; +pub mod signup; \ No newline at end of file diff --git a/src/pages/login.rs b/src/pages/login.rs new file mode 100644 index 0000000..1f5662e --- /dev/null +++ b/src/pages/login.rs @@ -0,0 +1,48 @@ +use leptos::ev; +use leptos::leptos_dom::*; +use leptos::*; +use leptos_router::*; + +#[component] +pub fn Login() -> impl IntoView { + let (username, set_username) = create_signal("".to_string()); + let (password, set_password) = create_signal("".to_string()); + + view! { +
+ +
+ } +} diff --git a/src/pages/signup.rs b/src/pages/signup.rs new file mode 100644 index 0000000..3f04544 --- /dev/null +++ b/src/pages/signup.rs @@ -0,0 +1,14 @@ +use leptos::leptos_dom::*; +use leptos::*; + +#[component] +pub fn Signup() -> impl IntoView { + view!{ +
+ +
+ } +} \ No newline at end of file diff --git a/style/login.scss b/style/login.scss new file mode 100644 index 0000000..e01be7c --- /dev/null +++ b/style/login.scss @@ -0,0 +1,136 @@ +@import 'theme.scss'; + +.login-container { + display: flex; + flex-direction: column; + align-items: center; + position: fixed; + top: 50%; + left: 50%; + width: 27rem; + height: 30rem; + transform: translate(-50%, -50%); + background: purple; + z-index: 1; + border-radius: 8px; + overflow: hidden; + } + +.login-container .header h1 { + margin-top: 3rem; + font-size: 2.5rem; + color: #2c1308; +} +.login-container .login-form { + width: 75%; +} +.login-form .input-box:first-child { + margin-top: .5rem; +} +.login-form .input-box { + position: relative; + margin-top: 3rem; +} +.login-form .input-box input { + position: relative; + width: 100%; + max-width: 34vw; + padding: 17px 0px 10px; + background: transparent; + outline: none; + border: none; + box-shadow: none; + color: #23242a; + font-size: 1.1em; + font-family: "Roboto", sans-serif; + font-weight: 400; + letter-spacing: 0px; + text-indent: 10px; + vertical-align: middle; + z-index: 10; + color: #fff; +} +.login-form .input-box span { + position: absolute; + left: 0; + padding: 15px 0px 10px; + pointer-events: none; + color: #907163; + font-size: 1.2em; + letter-spacing: 0.5px; + transition: 0.5s; +} +.login-form .input-box input:valid ~ span, +.login-form .input-box input:focus ~ span { + color: #2c1308; + font-size: 1rem; + transform: translateY(-30px); + font-weight: 400; +} +.login-form .input-box i { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background: #907163; + border-radius: 4px; + overflow: hidden; + transition: 0.5s; + pointer-events: none; +} + +.login-form .input-box input:valid ~ i, +.login-form .input-box input:focus ~ i { + height: 2.6rem; +} +.login-form .forgot-pw { + display: inline-flex; + margin-top: 3px; + cursor: pointer; + color: #8f8f8f; + text-decoration: underline; +} +.login-form .forgot-pw:hover { + color: #fff; + transition: all 0.2s; +} +.login-form input[type="submit"] { + margin-top: 2.8rem; + width: 100%; + height: 3rem; + border: none; + border-radius: 8px; + color: rgb(210, 207, 207); + cursor: pointer; + font-size: 1.1rem; + font-weight: 600; + background-color: #582b17; +} +.login-form .go-to-signup { + margin-top: 11px; + color: #8f8f8f; +} +.login-form .go-to-signup span { + cursor: pointer; + color: #8f8f8f; + text-decoration: underline; +} +.login-form .go-to-signup span:hover { + color: #fff; + transition: all 0.2s; +} +.login-container .return { + position: absolute; + left: 15px; + top: 15px; + font-size: 1.8rem; + color: white; + cursor: pointer; + width: 50px; + transition: all 0.3s; + border-radius: 8px; +} +.login-container .return:hover { + background-color: rgba(0, 0, 0, 0.4); +} diff --git a/style/main.scss b/style/main.scss index e49fe50..60b68fd 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,5 +1,7 @@ @import 'playbar.scss'; @import 'theme.scss'; +@import 'login.scss'; +@import 'signup.scss'; body { font-family: sans-serif; diff --git a/style/signup.scss b/style/signup.scss new file mode 100644 index 0000000..6221d7b --- /dev/null +++ b/style/signup.scss @@ -0,0 +1 @@ +@import 'theme.scss'; \ No newline at end of file diff --git a/style/theme.scss b/style/theme.scss index 9ac5872..f795d06 100644 --- a/style/theme.scss +++ b/style/theme.scss @@ -6,3 +6,4 @@ $controls-click-color: #909090; $play-bar-background-color: #212121; $play-grad-start: #0a0533; $play-grad-end: $accent-color; + From 5cc7d6ce94fc5bb37a245a2787c80d503981a83f Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Sat, 10 Feb 2024 00:54:18 -0500 Subject: [PATCH 02/12] Completely Finished Design of Login Page modified: src/pages/login.rs modified: src/pages/signup.rs modified: style/login.scss --- src/pages/login.rs | 19 ++++++++++--------- src/pages/signup.rs | 5 ++++- style/login.scss | 20 ++++++++++++-------- 3 files changed, 26 insertions(+), 18 deletions(-) diff --git a/src/pages/login.rs b/src/pages/login.rs index 1f5662e..bbb4823 100644 --- a/src/pages/login.rs +++ b/src/pages/login.rs @@ -1,7 +1,7 @@ -use leptos::ev; use leptos::leptos_dom::*; use leptos::*; -use leptos_router::*; +use leptos_icons::IoIcon::*; +use leptos_icons::*; #[component] pub fn Login() -> impl IntoView { @@ -11,9 +11,10 @@ pub fn Login() -> impl IntoView { view! {
diff --git a/src/pages/signup.rs b/src/pages/signup.rs index 3f04544..0ac67ae 100644 --- a/src/pages/signup.rs +++ b/src/pages/signup.rs @@ -3,10 +3,13 @@ use leptos::*; #[component] pub fn Signup() -> impl IntoView { + let (username, set_username) = create_signal("".to_string()); + let (email, set_email) = create_signal("".to_string()); + let (password, set_password) = create_signal("".to_string()); + view!{
diff --git a/style/login.scss b/style/login.scss index e01be7c..475a1ad 100644 --- a/style/login.scss +++ b/style/login.scss @@ -56,7 +56,7 @@ padding: 15px 0px 10px; pointer-events: none; color: #907163; - font-size: 1.2em; + font-size: 1.19em; letter-spacing: 0.5px; transition: 0.5s; } @@ -87,6 +87,7 @@ .login-form .forgot-pw { display: inline-flex; margin-top: 3px; + font-size: .9rem; cursor: pointer; color: #8f8f8f; text-decoration: underline; @@ -96,7 +97,7 @@ transition: all 0.2s; } .login-form input[type="submit"] { - margin-top: 2.8rem; + margin-top: 3rem; width: 100%; height: 3rem; border: none; @@ -108,28 +109,31 @@ background-color: #582b17; } .login-form .go-to-signup { - margin-top: 11px; color: #8f8f8f; + font-size: .9rem; } -.login-form .go-to-signup span { +.login-form .go-to-signup a { cursor: pointer; color: #8f8f8f; text-decoration: underline; } -.login-form .go-to-signup span:hover { +.login-form .go-to-signup a:hover { color: #fff; transition: all 0.2s; } .login-container .return { position: absolute; - left: 15px; - top: 15px; + left: 10px; + top: 10px; font-size: 1.8rem; color: white; cursor: pointer; - width: 50px; transition: all 0.3s; border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + padding: .3rem; } .login-container .return:hover { background-color: rgba(0, 0, 0, 0.4); From 5a630daebc0591faa26f1b0d3a1f3ce5dcee1cab Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Sat, 10 Feb 2024 00:55:05 -0500 Subject: [PATCH 03/12] Why is it not commiting --- Cargo.lock | 10 ++++++++++ Cargo.toml | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/Cargo.lock b/Cargo.lock index 5f2a07e..6a343a2 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1141,6 +1141,7 @@ checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098" dependencies = [ "icondata_bs", "icondata_core", + "icondata_io", ] [[package]] @@ -1158,6 +1159,15 @@ version = "0.0.2" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "1640a4c1d5ddd08ab1d9854ffa7a2fa3dc52339492676b6d3031e77ca579f434" +[[package]] +name = "icondata_io" +version = "0.0.8" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "134d9fb91cdd0e7ac971199e2c8c8eb917a975faeeee54b227a0068c4f70c886" +dependencies = [ + "icondata_core", +] + [[package]] name = "ident_case" version = "1.0.1" diff --git a/Cargo.toml b/Cargo.toml index 5952557..57e7e33 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -22,7 +22,8 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [ "BsPlayFill", "BsPauseFill", "BsSkipStartFill", - "BsSkipEndFill" + "BsSkipEndFill", + "IoReturnUpBackSharp" ] } dotenv = { version = "0.15.0", optional = true } diesel = { version = "2.1.4", features = ["postgres", "r2d2"], optional = true } From 2a183eec2cb96cd908bdec1100664a0548e542c1 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Sat, 10 Feb 2024 01:12:19 -0500 Subject: [PATCH 04/12] Finished Initial Signup Page Design/Outline --- src/pages/signup.rs | 45 ++++++++++++++- style/signup.scss | 130 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 173 insertions(+), 2 deletions(-) diff --git a/src/pages/signup.rs b/src/pages/signup.rs index 0ac67ae..6bc06da 100644 --- a/src/pages/signup.rs +++ b/src/pages/signup.rs @@ -1,5 +1,7 @@ use leptos::leptos_dom::*; use leptos::*; +use leptos_icons::IoIcon::*; +use leptos_icons::*; #[component] pub fn Signup() -> impl IntoView { @@ -7,10 +9,51 @@ pub fn Signup() -> impl IntoView { let (email, set_email) = create_signal("".to_string()); let (password, set_password) = create_signal("".to_string()); + view!{
} diff --git a/style/signup.scss b/style/signup.scss index 6221d7b..cd45ab6 100644 --- a/style/signup.scss +++ b/style/signup.scss @@ -1 +1,129 @@ -@import 'theme.scss'; \ No newline at end of file +@import 'theme.scss'; + +.signup-container { + display: flex; + flex-direction: column; + align-items: center; + position: fixed; + top: 50%; + left: 50%; + width: 27rem; + height: 35rem; + transform: translate(-50%, -50%); + background: purple; + z-index: 1; + border-radius: 8px; + overflow: hidden; + } + .signup-container .header h1 { + margin-top: 3rem; + font-size: 2.5rem; + color: #2c1308; + } + .signup-container .signup-form { + width: 80%; + } + .signup-form .input-box { + position: relative; + margin-top: 3rem; + } + .signup-form .input-box:first-child { + margin-top: 1rem; + } + .signup-form .input-box input { + position: relative; + width: 100%; + max-width: 34vw; + padding: 17px 0px 10px; + background: transparent; + outline: none; + border: none; + box-shadow: none; + color: #23242a; + font-size: 1.1em; + font-family: "Roboto", sans-serif; + font-weight: 400; + letter-spacing: 0px; + text-indent: 10px; + vertical-align: middle; + z-index: 10; + color: #fff; + } + .signup-form .input-box span { + position: absolute; + left: 0; + padding: 15px 0px 10px; + pointer-events: none; + color: #907163; + font-size: 1.19em; + letter-spacing: 0.5px; + transition: 0.5s; + } + .signup-form .input-box input:valid ~ span, + .signup-form .input-box input:focus ~ span { + color: #2c1308; + font-size: 1rem; + transform: translateY(-30px); + font-weight: 400; + } + .signup-form .input-box i { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background: #907163; + border-radius: 4px; + overflow: hidden; + transition: 0.5s; + pointer-events: none; + } + + .signup-form .input-box input:valid ~ i, + .signup-form .input-box input:focus ~ i { + height: 2.6rem; + } + + .signup-form input[type="submit"] { + margin-top: 3.5rem; + width: 100%; + height: 45px; + border: none; + border-radius: 8px; + color: rgb(210, 207, 207); + cursor: pointer; + font-size: 1.1rem; + font-weight: 600; + background-color: #582b17; + } + .signup-form .go-to-login { + color: #8f8f8f; + font-size: 0.9rem; + } + .signup-form .go-to-login span { + cursor: pointer; + color: #8f8f8f; + text-decoration: underline; + } + .signup-form .go-to-login span:hover { + color: #fff; + transition: all 0.2s; + } + .signup-container .return { + position: absolute; + left: 10px; + top: 10px; + font-size: 1.8rem; + color: white; + cursor: pointer; + transition: all 0.3s; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + padding: .3rem; + } + .signup-container .return:hover { + background-color: rgba(0, 0, 0, 0.4); + } + \ No newline at end of file From c30ba689b1e4cda0340fead3c3d8d454824b9457 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Sun, 18 Feb 2024 01:53:57 -0500 Subject: [PATCH 05/12] Added functionalty to the signup page. modified: src/pages/signup.rs --- src/pages/signup.rs | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/pages/signup.rs b/src/pages/signup.rs index 6bc06da..7ea107e 100644 --- a/src/pages/signup.rs +++ b/src/pages/signup.rs @@ -2,6 +2,9 @@ use leptos::leptos_dom::*; use leptos::*; use leptos_icons::IoIcon::*; use leptos_icons::*; +use crate::auth::signup; +use crate::models::User; + #[component] pub fn Signup() -> impl IntoView { @@ -9,6 +12,26 @@ pub fn Signup() -> impl IntoView { let (email, set_email) = create_signal("".to_string()); let (password, set_password) = create_signal("".to_string()); + let on_submit = move |ev: leptos::ev::SubmitEvent| { + ev.prevent_default(); + let new_user = User { + id: None, + username: username.get(), + email: email.get(), + password: Some(password.get()), + created_at: None, + }; + + spawn_local(async move { + if let Err(err) = signup(new_user).await { + // Handle the error here, e.g., log it or display to the user + log!("Error signing up: {:?}", err); + } else { + // Redirect to the login page + log!("Signed up successfully!"); + } + }); + }; view!{
@@ -17,7 +40,7 @@ pub fn Signup() -> impl IntoView {

LibreTunes

-
-