feat(auth): implement login authorization

feat(font): implement satoshi font family
2026-01-11 15:44:51 +06:00
parent bd6f1d2333
commit 1506c25796
35 changed files with 3870 additions and 7 deletions
--- a/src/assets/auth.css
+++ b/src/assets/auth.css
@ -0,0 +1,172 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v8.4.14,
+* Autoprefixer: v10.4.7
+* Browsers: last 4 version
+*/
+
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v8.4.14,
+* Autoprefixer: v10.4.7
+* Browsers: last 4 version
+*/
+
+/* Auth Pages Styling */
+.login-container {
+  min-height: 100vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background-color: var(--secondary-bg);
+  background-image: -o-linear-gradient(315deg, #f5f5f5 0%, #ffffff 100%);
+  background-image: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+  padding: 1rem;
+}
+
+.auth-container {
+  max-width: 420px;
+  width: 100%;
+  padding: 2.5rem;
+  border-radius: 12px;
+  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  background-color: var(--tertiary-bg);
+  border: 1px solid var(--secondary-border);
+  -webkit-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.auth-container:hover {
+  -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+  -webkit-transform: translateY(-5px);
+  -ms-transform: translateY(-5px);
+  transform: translateY(-5px);
+}
+
+.auth-title {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--intensive-text);
+  font-weight: 700;
+  font-size: 1.75rem;
+}
+
+.auth-footer {
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.9rem;
+  color: var(--neutral);
+}
+
+.auth-footer a {
+  color: var(--primary-text);
+  font-weight: 500;
+  -webkit-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.auth-footer a:hover {
+  text-decoration: underline;
+}
+
+/* Form Styling */
+.auth-container .field {
+  margin-bottom: 1.25rem;
+}
+
+.auth-container .label {
+  color: var(--intensive-text) !important;
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+.auth-container .input {
+  color: var(--intensive-text) !important;
+  border-radius: 8px;
+  border: 1px solid var(--secondary-border);
+  padding: 0.75rem 1rem;
+  height: auto;
+  font-size: 1rem;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.auth-container .input:focus {
+  border-color: var(--primary-bg);
+  -webkit-box-shadow: 0 0 0 2px rgba(110, 68, 255, 0.1);
+  box-shadow: 0 0 0 2px rgba(110, 68, 255, 0.1);
+}
+
+.auth-container .input.is-danger {
+  border-color: var(--error-bg);
+}
+
+.auth-container .button {
+  height: auto;
+  padding: 0.75rem 1.5rem;
+  font-weight: 600;
+  font-size: 1rem;
+  border-radius: 8px;
+  -webkit-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.auth-container .button.is-primary {
+  background-color: var(--primary-bg);
+  border: none;
+}
+
+.auth-container .button.is-primary:hover {
+  background-color: var(--primary-dark);
+  -webkit-box-shadow: 0 4px 12px rgba(110, 68, 255, 0.3);
+  box-shadow: 0 4px 12px rgba(110, 68, 255, 0.3);
+  -webkit-transform: translateY(-2px);
+  -ms-transform: translateY(-2px);
+  transform: translateY(-2px);
+}
+
+.auth-container .checkbox {
+  font-size: 0.9rem;
+  color: var(--neutral-dark);
+}
+
+.auth-container .help.is-danger {
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+}
+
+.auth-container .notification {
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.auth-container .notification .delete {
+  position: absolute;
+  right: 0.75rem;
+  top: 0.75rem;
+}
+
+/* Responsive Adjustments */
+@media screen and (max-width: 768px) {
+  .auth-container {
+    padding: 2rem;
+    max-width: 100%;
+    margin: 0 1rem;
+  }
+}