Landing: Implement registration success/failure flows
Change-Id: I0b48cfb0c0b35bfe7c71b13f8953951821fb3958
diff --git a/apps/landing/static/styles/style.css b/apps/landing/static/styles/style.css
index 6537d58..8cd8e34 100644
--- a/apps/landing/static/styles/style.css
+++ b/apps/landing/static/styles/style.css
@@ -18,7 +18,9 @@
font-size: var(--fontSize);
}
-input, textarea, select {
+input,
+textarea,
+select {
font-family: Hack, monospace;
font-size: var(--fontSize);
}
@@ -291,6 +293,8 @@
padding: 20px;
display: flex;
justify-content: center;
+ flex-direction: column;
+ align-items: center;
}
.form-container-footer {
@@ -309,14 +313,12 @@
.form-group-footer {
display: flex;
justify-content: space-between;
- align-items: center;
+ align-items: flex-start;
flex-direction: column;
}
.form-group-footer label {
display: block;
- margin-bottom: 5px;
- padding-bottom: 10px;
color: var(--formText);
margin-right: auto;
width: 100%;
@@ -325,8 +327,7 @@
.form-group-footer input,
.form-group-footer textarea {
width: 100%;
- padding: 10px;
- margin-top: 5px;
+ padding: 10px 10px 10px 1rem;
border: 1px solid var(--formText);
box-sizing: border-box;
color: var(--formText);
@@ -334,8 +335,32 @@
resize: vertical;
}
+.form-group-footer textarea {
+ margin-top: 10px;
+}
+
+.form-group-footer select {
+ padding: 10px 2.5rem 10px 1rem;
+ padding-inline-start: 1rem;
+ padding-inline-end: 2.5rem;
+ border: 1px solid var(--formText);
+ border-radius: 0;
+ outline: 0;
+ box-shadow: none;
+ background-color: var(--formBg);
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ box-sizing: border-box;
+ background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='rgb(136%2C%20145%2C%20164)'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'%20/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: center right 0.75rem;
+ background-size: 1rem auto;
+}
+
.form-group-footer input:focus,
-.form-group-footer textarea:focus {
+.form-group-footer textarea:focus,
+.form-group-footer select:focus {
outline: none !important;
border: 1px solid var(--button);
}
@@ -355,6 +380,44 @@
background-color: #d4888d;
}
+input::placeholder,
+textarea::placeholder {
+ color: rgba(214, 214, 214, 0.6);
+ opacity: 1;
+}
+
+select option[disabled] {
+ color: rgba(214, 214, 214, 0.6);
+}
+
+select {
+ color: rgb(214, 214, 214);
+}
+
+select:invalid {
+ color: rgba(214, 214, 214, 0.6);
+}
+
+select:not(:invalid) {
+ color: rgb(214, 214, 214);
+}
+
+select option:not(:disabled) {
+ color: rgb(214, 214, 214);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+ color: rgba(214, 214, 214, 0.6);
+ cursor: not-allowed;
+}
+
+button:disabled {
+ cursor: not-allowed;
+ opacity: 0.6;
+}
+
/* FOOTER FORM END */
/* APPS START */
@@ -457,3 +520,117 @@
}
/* ABOUT END */
+
+/* SECCESFULL REGISTRATION START */
+
+.registration-outcome {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+}
+
+.registration-outcome button {
+ font-size: 16px;
+ cursor: pointer;
+ background-color: var(--bg);
+ border-radius: 0;
+ border: 0;
+ height: 30px;
+ font-family: Hack, monospace;
+ color: #3a3a3a;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}
+
+.registration-outcome h3 {
+ margin: 0;
+ margin-bottom: 15px;
+}
+
+.registration-outcome .pass {
+ display: flex;
+}
+
+.registration-outcome svg {
+ color: var(--button);
+ margin-left: 5px;
+}
+
+.tooltip {
+ position: absolute;
+ background-color: #333;
+ color: #fff;
+ padding: 5px 10px;
+ border-radius: 4px;
+ white-space: nowrap;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.3s;
+ font-size: 14px;
+}
+
+/* SECCESFULL REGISTRATION END */
+
+.reg-inputs {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 10px;
+ margin-bottom: 10px;
+ width: 100%;
+}
+
+@media (max-width: 768px) {
+ .reg-inputs {
+ grid-template-columns: 1fr;
+ width: 100%;
+ }
+}
+
+#create-app-button {
+ display: flex;
+ align-items: center;
+ margin-top: 5px;
+}
+
+#error-message {
+ margin: 0 0 10px 0;
+ color: var(--logo);
+ display: none;
+}
+
+.animated-spinner g {
+ animation: rotate 2s linear infinite;
+ transform-origin: center center;
+}
+
+.animated-spinner circle {
+ stroke-dasharray: 75, 100;
+ stroke-dashoffset: -5;
+ animation: dash 1.5s ease-in-out infinite;
+ stroke-linecap: round;
+}
+
+@keyframes rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes dash {
+ 0% {
+ stroke-dasharray: 1, 100;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 44.5, 100;
+ stroke-dashoffset: -17.5;
+ }
+ 100% {
+ stroke-dasharray: 44.5, 100;
+ stroke-dashoffset: -62;
+ }
+}