From b0369f8b5e50eaec22c9178748f57dde6912d383 Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Tue, 25 Mar 2025 18:07:45 -0400 Subject: Created signup component and implemented some functionality. Did not finish implementing color bar and error messages. --- ufund-ui/src/app/components/signup/signup.component.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 ufund-ui/src/app/components/signup/signup.component.css (limited to 'ufund-ui/src/app/components/signup/signup.component.css') diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css new file mode 100644 index 0000000..2a10016 --- /dev/null +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -0,0 +1,16 @@ +:host, .border { + display: flex; + flex-direction: column; + max-width: 300px; + gap: 5px +} + +.border { + border-style: solid; + border-width: 1px; + padding: 10px; + margin: 10px; + position: absolute; + background-color: white; + box-shadow: 0 0 10px 10px black; +} -- cgit v1.2.3 From 959b5bbaaa370542b75d804cedbbbecea881df0f Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Wed, 26 Mar 2025 19:12:46 -0400 Subject: Added a progress bar to signup --- ufund-ui/src/app/components/signup/signup.component.css | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'ufund-ui/src/app/components/signup/signup.component.css') diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index 2a10016..d4ea97b 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -14,3 +14,11 @@ background-color: white; box-shadow: 0 0 10px 10px black; } + +#bar { + width: 100%; + height: 10px; + padding: 0; + margin: 0; +} + -- cgit v1.2.3 From 7ccbfb414de47941c8acb2e6f9c2cc7a01cd819c Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Thu, 27 Mar 2025 18:47:07 -0400 Subject: Added requirements list, updated bar, and disabling of creation with weak passwords. --- ufund-ui/src/app/components/signup/signup.component.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/signup/signup.component.css') diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index d4ea97b..799cbd2 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -17,8 +17,15 @@ #bar { width: 100%; - height: 10px; - padding: 0; - margin: 0; + height: 20px; + -webkit-appearance: none; + appearance: none; + border: none; + border-radius: 10px; + overflow: hidden; + background-color: red; } +#requirement2 { + color: red; +} -- cgit v1.2.3 From 785d0df231d0cfdbf63f5ed60b56fb882f694725 Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Sat, 29 Mar 2025 15:28:59 -0400 Subject: Finished implementing signup page and checked for the majority of edge cases. --- .../src/app/components/signup/signup.component.css | 23 ++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) (limited to 'ufund-ui/src/app/components/signup/signup.component.css') diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index 799cbd2..2fa5051 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -16,16 +16,27 @@ } #bar { + height: 5px; width: 100%; - height: 20px; - -webkit-appearance: none; appearance: none; - border: none; - border-radius: 10px; overflow: hidden; - background-color: red; + margin-top: -5px; } -#requirement2 { +#bar::-webkit-progress-bar { + background-color: lightgray; + transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; +} + +.color0::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color1::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color2::-webkit-progress-value { background: rgba(255, 165, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color3::-webkit-progress-value { background: rgba(255, 255, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color4::-webkit-progress-value { background: rgba(173, 255, 47, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color5::-webkit-progress-value { background: rgba(50, 205, 50, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color6::-webkit-progress-value { background: rgba(0, 128, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } + +#requirement2, #statusText, #passwordStatusText, #usernameStatusText { color: red; } + -- cgit v1.2.3 From 3c9a9004780c0b91772fd7f868c642bdadb60348 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 30 Mar 2025 14:10:09 -0400 Subject: Clean up signup component --- ufund-ui/src/app/components/signup/signup.component.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/signup/signup.component.css') diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index 2fa5051..f286cf9 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -1,8 +1,13 @@ -:host, .border { +:host { display: flex; flex-direction: column; max-width: 300px; - gap: 5px + gap: 10px; + + & > div { + display: flex; + flex-direction: column; + } } .border { @@ -20,7 +25,7 @@ width: 100%; appearance: none; overflow: hidden; - margin-top: -5px; + /*margin-top: -5px;*/ } #bar::-webkit-progress-bar { -- cgit v1.2.3 From 6bfbf7fa3b5b14b04f99f2dd6c33d336f6f081f6 Mon Sep 17 00:00:00 2001 From: sowgro Date: Sun, 30 Mar 2025 20:31:32 -0400 Subject: Experimental sign up page design --- .../src/app/components/signup/signup.component.css | 28 +++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/signup/signup.component.css') diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index f286cf9..429bc42 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -1,7 +1,16 @@ :host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + margin-top: -66px + +} + +#box { display: flex; flex-direction: column; - max-width: 300px; + /*max-width: 300px;*/ gap: 10px; & > div { @@ -45,3 +54,20 @@ color: red; } +#passReq { + display: flex; + flex-direction: column; +} + +#box > div { + display: flex; + flex-direction: row; + align-items: start; + gap: 20px; + + div { + display: flex; + flex-direction: column; + } +} + -- cgit v1.2.3