made a simple password visibility toggler
modified: Cargo.lock modified: Cargo.toml modified: src/pages/signup.rs modified: style/signup.scss
This commit is contained in:
parent
5650882ba8
commit
f4bea8aa33
10
Cargo.lock
generated
10
Cargo.lock
generated
@ -1296,11 +1296,21 @@ version = "0.0.8"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f41f2deec9249d16ef6b1a8442fbe16013f67053797052aa0b7d2f5ebd0f0098"
|
||||
dependencies = [
|
||||
"icondata_ai",
|
||||
"icondata_bs",
|
||||
"icondata_core",
|
||||
"icondata_io",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "icondata_ai"
|
||||
version = "0.0.8"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "5c8fe5fa2eed7715d5388e046d97f09d3baddd155b487454eb9cda3168c79d4b"
|
||||
dependencies = [
|
||||
"icondata_core",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "icondata_bs"
|
||||
version = "0.0.8"
|
||||
|
||||
@ -23,7 +23,9 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [
|
||||
"BsPauseFill",
|
||||
"BsSkipStartFill",
|
||||
"BsSkipEndFill",
|
||||
"IoReturnUpBackSharp"
|
||||
"IoReturnUpBackSharp",
|
||||
"AiEyeFilled",
|
||||
"AiEyeInvisibleFilled"
|
||||
] }
|
||||
dotenv = { version = "0.15.0", optional = true }
|
||||
diesel = { version = "2.1.4", features = ["postgres", "r2d2"], optional = true }
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
use leptos::leptos_dom::*;
|
||||
use leptos::*;
|
||||
use leptos_icons::IoIcon::*;
|
||||
use leptos_icons::*;
|
||||
use crate::auth::signup;
|
||||
use crate::models::User;
|
||||
|
||||
use leptos::ev::input;
|
||||
use leptos::leptos_dom::*;
|
||||
use leptos::*;
|
||||
use leptos_icons::AiIcon::*;
|
||||
use leptos_icons::IoIcon::*;
|
||||
use leptos_icons::*;
|
||||
|
||||
#[component]
|
||||
pub fn Signup() -> impl IntoView {
|
||||
@ -12,6 +13,13 @@ pub fn Signup() -> impl IntoView {
|
||||
let (email, set_email) = create_signal("".to_string());
|
||||
let (password, set_password) = create_signal("".to_string());
|
||||
|
||||
let (show_password, set_show_password) = create_signal(false);
|
||||
|
||||
let toggle_password = move |_| {
|
||||
set_show_password.update(|show_password| *show_password = !*show_password);
|
||||
log!("showing password");
|
||||
};
|
||||
|
||||
let on_submit = move |ev: leptos::ev::SubmitEvent| {
|
||||
ev.prevent_default();
|
||||
let new_user = User {
|
||||
@ -33,7 +41,7 @@ pub fn Signup() -> impl IntoView {
|
||||
});
|
||||
};
|
||||
|
||||
view!{
|
||||
view! {
|
||||
<div class="page-container">
|
||||
<div class="signup-container">
|
||||
<a class="return" href="/"><Icon icon=Icon::from(IoReturnUpBackSharp) /></a>
|
||||
@ -63,7 +71,7 @@ pub fn Signup() -> impl IntoView {
|
||||
<i></i>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input class="signup-password" type="text" required
|
||||
<input class="signup-password" type={move || if show_password() { "text" } else { "password"} } required style="width: 90%;"
|
||||
on:input = move |ev| {
|
||||
set_password(event_target_value(&ev));
|
||||
log!("password changed to: {}", password.get());
|
||||
@ -71,6 +79,18 @@ pub fn Signup() -> impl IntoView {
|
||||
/>
|
||||
<span>Password</span>
|
||||
<i></i>
|
||||
<Show
|
||||
when=move || {show_password() == false}
|
||||
fallback=move || view!{ <button on:click=toggle_password class="password-visibility">
|
||||
<Icon icon=Icon::from(AiEyeInvisibleFilled) />
|
||||
</button> /> }
|
||||
>
|
||||
<button on:click=toggle_password class="password-visibility">
|
||||
<Icon icon=Icon::from(AiEyeFilled) />
|
||||
</button>
|
||||
|
||||
</Show>
|
||||
|
||||
</div>
|
||||
<input type="submit" value="Sign Up" />
|
||||
<span class="go-to-login">
|
||||
@ -80,4 +100,4 @@ pub fn Signup() -> impl IntoView {
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,129 +1,140 @@
|
||||
@import 'theme.scss';
|
||||
@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;
|
||||
}
|
||||
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[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);
|
||||
}
|
||||
|
||||
.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: 0.3rem;
|
||||
}
|
||||
.signup-container .return:hover {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.password-visibility {
|
||||
position: absolute;
|
||||
font-size: 1.7rem;
|
||||
top: 28%;
|
||||
right: 5px;
|
||||
z-index: 5;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user