Sign in page, styles

.gitignore

@@ -1,2 +1,3 @@
 /target
+/migration/target
 node_modules

assets/styles.css

@@ -725,199 +725,40 @@ html{
   --bc: 74.6477% 0.0216 264.435964;
 }
 
-[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
+.alert{
-  -webkit-appearance: none;
+  display: grid;
-     -moz-appearance: none;
+  width: 100%;
-          appearance: none;
+  grid-auto-flow: row;
-  background-color: #fff;
+  align-content: flex-start;
-  border-color: #6b7280;
+  align-items: center;
+  justify-items: center;
+  gap: 1rem;
+  text-align: center;
+  border-radius: var(--rounded-box, 1rem);
   border-width: 1px;
-  border-radius: 0px;
+  --tw-border-opacity: 1;
-  padding-top: 0.5rem;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
-  padding-right: 0.75rem;
+  padding: 1rem;
-  padding-bottom: 0.5rem;
+  --tw-text-opacity: 1;
-  padding-left: 0.75rem;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  font-size: 1rem;
+  --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
-  line-height: 1.5rem;
+  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
-  --tw-shadow: 0 0 #0000;
+  background-color: var(--alert-bg);
 }
 
-[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
+@media (min-width: 640px){
-  outline: 2px solid transparent;
+  .alert{
-  outline-offset: 2px;
+    grid-auto-flow: column;
-  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+    grid-template-columns: auto minmax(auto,1fr);
-  --tw-ring-offset-width: 0px;
+    justify-items: start;
-  --tw-ring-offset-color: #fff;
+    text-align: start;
-  --tw-ring-color: #2563eb;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  border-color: #2563eb;
-}
-
-input::-moz-placeholder, textarea::-moz-placeholder{
-  color: #6b7280;
-  opacity: 1;
-}
-
-input::placeholder,textarea::placeholder{
-  color: #6b7280;
-  opacity: 1;
-}
-
-::-webkit-datetime-edit-fields-wrapper{
-  padding: 0;
-}
-
-::-webkit-date-and-time-value{
-  min-height: 1.5em;
-  text-align: inherit;
-}
-
-::-webkit-datetime-edit{
-  display: inline-flex;
-}
-
-::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-select{
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 0.5rem center;
-  background-repeat: no-repeat;
-  background-size: 1.5em 1.5em;
-  padding-right: 2.5rem;
-  -webkit-print-color-adjust: exact;
-          print-color-adjust: exact;
-}
-
-[multiple],[size]:where(select:not([size="1"])){
-  background-image: initial;
-  background-position: initial;
-  background-repeat: unset;
-  background-size: initial;
-  padding-right: 0.75rem;
-  -webkit-print-color-adjust: unset;
-          print-color-adjust: unset;
-}
-
-[type='checkbox'],[type='radio']{
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  padding: 0;
-  -webkit-print-color-adjust: exact;
-          print-color-adjust: exact;
-  display: inline-block;
-  vertical-align: middle;
-  background-origin: border-box;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  flex-shrink: 0;
-  height: 1rem;
-  width: 1rem;
-  color: #2563eb;
-  background-color: #fff;
-  border-color: #6b7280;
-  border-width: 1px;
-  --tw-shadow: 0 0 #0000;
-}
-
-[type='checkbox']{
-  border-radius: 0px;
-}
-
-[type='radio']{
-  border-radius: 100%;
-}
-
-[type='checkbox']:focus,[type='radio']:focus{
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-  --tw-ring-offset-width: 2px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: #2563eb;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
-
-[type='checkbox']:checked,[type='radio']:checked{
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-[type='checkbox']:checked{
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-}
-
-@media (forced-colors: active) {
-  [type='checkbox']:checked{
-    -webkit-appearance: auto;
-       -moz-appearance: auto;
-            appearance: auto;
   }
 }
 
-[type='radio']:checked{
+.avatar.placeholder > div{
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  display: flex;
-}
+  align-items: center;
-
+  justify-content: center;
-@media (forced-colors: active) {
-  [type='radio']:checked{
-    -webkit-appearance: auto;
-       -moz-appearance: auto;
-            appearance: auto;
-  }
-}
-
-[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
-  border-color: transparent;
-  background-color: currentColor;
-}
-
-[type='checkbox']:indeterminate{
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-@media (forced-colors: active) {
-  [type='checkbox']:indeterminate{
-    -webkit-appearance: auto;
-       -moz-appearance: auto;
-            appearance: auto;
-  }
-}
-
-[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
-  border-color: transparent;
-  background-color: currentColor;
-}
-
-[type='file']{
-  background: unset;
-  border-color: inherit;
-  border-width: 0;
-  border-radius: 0;
-  padding: 0;
-  font-size: unset;
-  line-height: inherit;
-}
-
-[type='file']:focus{
-  outline: 1px solid ButtonText;
-  outline: 1px auto -webkit-focus-ring-color;
 }
 
 .badge{
@@ -948,6 +789,11 @@ select{
 }
 
 @media (hover:hover){
+  .label a:hover{
+    --tw-text-opacity: 1;
+    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  }
+
   .menu li > *:not(ul, .menu-title, details, .btn):active,
 .menu li > *:not(ul, .menu-title, details, .btn).active,
 .menu li > details > summary:active{
@@ -1153,6 +999,44 @@ select{
   }
 }
 
+.label{
+  display: flex;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.input{
+  flex-shrink: 1;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 3rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 1rem;
+  line-height: 2;
+  line-height: 1.5rem;
+  border-radius: var(--rounded-btn, 0.5rem);
+  border-width: 1px;
+  border-color: transparent;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+}
+
+.input[type="number"]::-webkit-inner-spin-button,
+.input-md[type="number"]::-webkit-inner-spin-button{
+  margin-top: -1rem;
+  margin-bottom: -1rem;
+  margin-inline-end: -1rem;
+}
+
 .link{
   cursor: pointer;
   text-decoration-line: underline;
@@ -1231,6 +1115,19 @@ select{
   min-width: 4rem;
 }
 
+.alert-error{
+  border-color: var(--fallback-er,oklch(var(--er)/0.2));
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+  --alert-bg: var(--fallback-er,oklch(var(--er)/1));
+  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
+}
+
+.btm-nav > * .label{
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 @media (prefers-reduced-motion: no-preference){
   .btn{
     animation: button-pop var(--animation-btn, 0.25s) ease-out;
@@ -1362,6 +1259,68 @@ select{
   gap: 1rem;
 }
 
+.input input{
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  background-color: transparent;
+}
+
+.input input:focus{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.input[list]::-webkit-calendar-picker-indicator{
+  line-height: 1em;
+}
+
+.input-bordered{
+  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+}
+
+.input:focus,
+  .input:focus-within{
+  box-shadow: none;
+  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+}
+
+.input:has(> input[disabled]),
+  .input-disabled,
+  .input:disabled,
+  .input[disabled]{
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+  color: var(--fallback-bc,oklch(var(--bc)/0.4));
+}
+
+.input:has(> input[disabled])::-moz-placeholder, .input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder{
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+  --tw-placeholder-opacity: 0.2;
+}
+
+.input:has(> input[disabled])::placeholder,
+  .input-disabled::placeholder,
+  .input:disabled::placeholder,
+  .input[disabled]::placeholder{
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+  --tw-placeholder-opacity: 0.2;
+}
+
+.input:has(> input[disabled]) > input[disabled]{
+  cursor: not-allowed;
+}
+
+.input::-webkit-date-and-time-value{
+  text-align: inherit;
+}
+
 .join > :where(*:not(:first-child)):is(.btn){
   margin-inline-start: calc(var(--border-btn) * -1);
 }
@@ -1458,6 +1417,52 @@ select{
   margin-top: 0;
 }
 
+.mockup-browser .mockup-browser-toolbar .input{
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  height: 1.75rem;
+  width: 24rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+  padding-left: 2rem;
+  direction: ltr;
+}
+
+.mockup-browser .mockup-browser-toolbar .input:before{
+  content: "";
+  position: absolute;
+  left: 0.5rem;
+  top: 50%;
+  aspect-ratio: 1 / 1;
+  height: 0.75rem;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-radius: 9999px;
+  border-width: 2px;
+  border-color: currentColor;
+  opacity: 0.6;
+}
+
+.mockup-browser .mockup-browser-toolbar .input:after{
+  content: "";
+  position: absolute;
+  left: 1.25rem;
+  top: 50%;
+  height: 0.5rem;
+  --tw-translate-y: 25%;
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: currentColor;
+  opacity: 0.6;
+}
+
 @keyframes modal-pop{
   0%{
     opacity: 0;
@@ -1715,6 +1720,10 @@ select{
   margin: 1rem;
 }
 
+.m-auto{
+  margin: auto;
+}
+
 .ml-2{
   margin-left: 0.5rem;
 }
@@ -1759,6 +1768,10 @@ select{
   height: 8rem;
 }
 
+.h-4{
+  height: 1rem;
+}
+
 .h-5{
   height: 1.25rem;
 }
@@ -1767,6 +1780,10 @@ select{
   height: 1.5rem;
 }
 
+.w-4{
+  width: 1rem;
+}
+
 .w-40{
   width: 10rem;
 }
@@ -1787,6 +1804,10 @@ select{
   flex-shrink: 0;
 }
 
+.grow{
+  flex-grow: 1;
+}
+
 .grow-0{
   flex-grow: 0;
 }
@@ -1891,11 +1912,19 @@ select{
   background-color: rgb(226 226 213 / var(--tw-bg-opacity));
 }
 
+.stroke-current{
+  stroke: currentColor;
+}
+
 .object-cover{
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+.p-12{
+  padding: 3rem;
+}
+
 .p-4{
   padding: 1rem;
 }
@@ -1964,11 +1993,6 @@ select{
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-primary{
-  --tw-text-opacity: 1;
-  color: rgb(255 99 99 / var(--tw-text-opacity));
-}
-
 .text-secondary-200{
   --tw-text-opacity: 1;
   color: rgb(136 136 131 / var(--tw-text-opacity));
@@ -1984,6 +2008,10 @@ select{
   color: rgb(68 64 60 / var(--tw-text-opacity));
 }
 
+.opacity-70{
+  opacity: 0.7;
+}
+
 .transition{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -2189,9 +2217,36 @@ select{
 }
 
 @media (min-width: 1024px){
+  .lg\:w-800{
+    width: 50rem;
+  }
+
   .lg\:w-\[400px\]{
     width: 400px;
   }
+
+  .lg\:rounded-lg{
+    border-radius: 0.5rem;
+  }
+
+  .lg\:border{
+    border-width: 1px;
+  }
+
+  .lg\:border-0{
+    border-width: 0px;
+  }
+
+  .lg\:border-gray-300{
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  }
+
+  .lg\:shadow{
+    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
 }
 
 @media (prefers-color-scheme: dark){

migration/target/.rustc_info.json

@@ -1 +0,0 @@
-{"rustc_fingerprint":5966236372496131995,"outputs":{"4614504638168534921":{"success":true,"status":"","code":0,"stdout":"rustc 1.84.0-nightly (3ed6e3cc6 2024-10-17)\nbinary: rustc\ncommit-hash: 3ed6e3cc69857129c1d314daec00119ff47986ed\ncommit-date: 2024-10-17\nhost: x86_64-unknown-linux-gnu\nrelease: 1.84.0-nightly\nLLVM version: 19.1.1\n","stderr":""},"14371922958718593042":{"success":true,"status":"","code":0,"stdout":"___\nlib___.rlib\nlib___.so\nlib___.so\nlib___.a\nlib___.so\n/home/eraden/.rustup/toolchains/nightly-x86_64-unknown-linux-gnu\noff\npacked\nunpacked\n___\ndebug_assertions\nfmt_debug=\"full\"\noverflow_checks\npanic=\"unwind\"\nproc_macro\nrelocation_model=\"pic\"\ntarget_abi=\"\"\ntarget_arch=\"x86_64\"\ntarget_endian=\"little\"\ntarget_env=\"gnu\"\ntarget_family=\"unix\"\ntarget_feature=\"fxsr\"\ntarget_feature=\"sse\"\ntarget_feature=\"sse2\"\ntarget_has_atomic\ntarget_has_atomic=\"16\"\ntarget_has_atomic=\"32\"\ntarget_has_atomic=\"64\"\ntarget_has_atomic=\"8\"\ntarget_has_atomic=\"ptr\"\ntarget_has_atomic_equal_alignment=\"16\"\ntarget_has_atomic_equal_alignment=\"32\"\ntarget_has_atomic_equal_alignment=\"64\"\ntarget_has_atomic_equal_alignment=\"8\"\ntarget_has_atomic_equal_alignment=\"ptr\"\ntarget_has_atomic_load_store\ntarget_has_atomic_load_store=\"16\"\ntarget_has_atomic_load_store=\"32\"\ntarget_has_atomic_load_store=\"64\"\ntarget_has_atomic_load_store=\"8\"\ntarget_has_atomic_load_store=\"ptr\"\ntarget_os=\"linux\"\ntarget_pointer_width=\"64\"\ntarget_thread_local\ntarget_vendor=\"unknown\"\nub_checks\nunix\n","stderr":""},"15729799797837862367":{"success":true,"status":"","code":0,"stdout":"___\nlib___.rlib\nlib___.so\nlib___.so\nlib___.a\nlib___.so\n/home/eraden/.rustup/toolchains/nightly-x86_64-unknown-linux-gnu\noff\npacked\nunpacked\n___\ndebug_assertions\nfmt_debug=\"full\"\noverflow_checks\npanic=\"unwind\"\nproc_macro\nrelocation_model=\"pic\"\ntarget_abi=\"\"\ntarget_arch=\"x86_64\"\ntarget_endian=\"little\"\ntarget_env=\"gnu\"\ntarget_family=\"unix\"\ntarget_feature=\"fxsr\"\ntarget_feature=\"sse\"\ntarget_feature=\"sse2\"\ntarget_has_atomic\ntarget_has_atomic=\"16\"\ntarget_has_atomic=\"32\"\ntarget_has_atomic=\"64\"\ntarget_has_atomic=\"8\"\ntarget_has_atomic=\"ptr\"\ntarget_has_atomic_equal_alignment=\"16\"\ntarget_has_atomic_equal_alignment=\"32\"\ntarget_has_atomic_equal_alignment=\"64\"\ntarget_has_atomic_equal_alignment=\"8\"\ntarget_has_atomic_equal_alignment=\"ptr\"\ntarget_has_atomic_load_store\ntarget_has_atomic_load_store=\"16\"\ntarget_has_atomic_load_store=\"32\"\ntarget_has_atomic_load_store=\"64\"\ntarget_has_atomic_load_store=\"8\"\ntarget_has_atomic_load_store=\"ptr\"\ntarget_os=\"linux\"\ntarget_pointer_width=\"64\"\ntarget_thread_local\ntarget_vendor=\"unknown\"\nub_checks\nunix\n","stderr":""}},"successes":{}}

migration/target/CACHEDIR.TAG

@@ -1,3 +0,0 @@
-Signature: 8a477f597d28d172789f06886806bc55
-# This file is a cache directory tag created by cargo.
-# For information about cache directory tags see https://bford.info/cachedir/

src/main.rs

@@ -2,7 +2,7 @@ use actix_files::Files;
 use actix_web::{
     cookie::{time::Duration, CookieBuilder},
     get, post,
-    web::{Data, Json, Path},
+    web::{Data, Form, Json, Path},
     App, HttpResponse, HttpServer, Responder,
 };
 use askama::Template;
@@ -32,7 +32,7 @@ struct IndexTemplate {
 
 #[derive(Debug)]
 pub struct Admin {
-    pub login: String,
+    pub email: String,
     pub pass: String,
 }
 
@@ -43,7 +43,7 @@ impl FromStr for Admin {
         let mut it = s.split(':');
 
         Ok(Self {
-            login: it.next().expect("Admin login is required").into(),
+            email: it.next().expect("Admin login is required").into(),
             pass: it.next().expect("Admin password is required").into(),
         })
     }
@@ -70,7 +70,7 @@ struct CreateRecipe {
 
 #[derive(Debug, serde::Deserialize)]
 struct SignIn {
-    login: String,
+    email: String,
     password: String,
 }
 
@@ -78,7 +78,7 @@ struct SignIn {
 #[template(path = "sign_in/form.html")]
 struct SignInForm {
     not_found: bool,
-    login: String,
+    email: String,
 }
 
 #[get("/sign-in")]
@@ -89,7 +89,7 @@ async fn render_sign_in() -> SignInForm {
 #[post("/sign-in")]
 async fn sign_in(
     admins: Data<Admins>,
-    payload: Json<SignIn>,
+    payload: Form<SignIn>,
     redis: Data<redis::Client>,
 ) -> HttpResponse {
     let payload = payload.into_inner();
@@ -97,7 +97,7 @@ async fn sign_in(
         .as_ref()
         .0
         .iter()
-        .any(|admin| admin.login == payload.login && admin.pass == payload.password);
+        .any(|admin| admin.email == payload.email && admin.pass == payload.password);
     if is_admin {
         let mut con = redis
             .get_multiplexed_async_connection()
@@ -120,9 +120,11 @@ async fn sign_in(
             .append_header(("location", "/"))
             .finish()
     } else {
-        HttpResponse::BadRequest().body(
+        HttpResponse::BadRequest()
+            .append_header(("Content-Type", "text/html"))
+            .body(
                 SignInForm {
-                login: payload.login,
+                    email: payload.email,
                     not_found: true,
                 }
                 .render()

tailwind.config.js

@@ -12,7 +12,19 @@
                 },
                 fontFamily: {
                     body: ['Nunito']
-                }
+                },
+                size: {
+                    '600': '37.5rem',
+                    '800': '50rem',
+                    '1000': '62.5rem',
+                    '1200': '75rem',
+                },
+                width: {
+                    '600': '37.5rem',
+                    '800': '50rem',
+                    '1000': '62.5rem',
+                    '1200': '75rem',
+                },
             },
         },
         variants: {
@@ -24,7 +36,10 @@
             require('@tailwindcss/aspect-ratio'),
             require('@tailwindcss/nesting'),
             require('@tailwindcss/typography'),
-            require('@tailwindcss/forms'),
+            require('@tailwindcss/forms')({
+                strategy: 'base', // only generate global styles
+                strategy: 'class', // only generate classes
+            }),
         ],
         daisyui: {
             themes: ['light', 'dark'], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]

templates/index.html

@@ -3,7 +3,7 @@
 {% block content %}
 <main class="md:col-span-3 flex flex-col gap-4 m-4">
     <div class="flex justify-center md:justify-end">
-        <a href="/sign-in" class="btn text-primary border-primary md:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
+        <a href="/sign-in" class="btn md:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
     </div>
 
     <header class="flex flex-col gap-2">

templates/sign_in/form.html

@@ -1,6 +1,60 @@
-{% extends "../base.html" %}
+{% extends "base.html" %}
 
 {% block content %}
-<form>
+<main class="m-4 flex flex-col gap-4 w-full">
+    {% include "../top_bar.html" %}
+    <div class="w-full lg:w-800 lg:rounded-lg lg:border lg:border-0 lg:shadow lg:border-gray-300 m-auto p-12 flex flex-col gap-8">
+        <h1 class="text-desktop-heading-xl text-center grow w-full">Sign in</h1>
+
+        <form class="flex flex-col gap-8 items-center justify-center" action="/sign-in" method="post">
+            {% if not_found %}
+            <div role="alert" class="alert alert-error">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6 shrink-0 stroke-current"
+                    fill="none"
+                    viewBox="0 0 24 24">
+                    <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <span>Invalid credentials</span>
+            </div>
+            {% endif %}
+            <label for="email" class="input input-bordered flex items-center gap-2">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                    class="h-4 w-4 opacity-70">
+                    <path
+                    d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+                    <path
+                    d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+                </svg>
+                <input type="email" class="grow" placeholder="Email" id="email" name="email" />
+            </label>
+
+            <label for="password" class="input input-bordered flex items-center gap-2">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                    class="h-4 w-4 opacity-70">
+                    <path
+                    fill-rule="evenodd"
+                    d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+                    clip-rule="evenodd" />
+                </svg>
+                <input type="password" class="grow" value="password" name="password" id="password" />
+            </label>
+
+            <div class="w-full grow">
+                <input type="submit" value="Sign in" class="btn w-full grow" />
+            </div>
         </form>
+    </div>
+</main>
 {% endblock %}

templates/top_bar.html

@@ -1,3 +1,3 @@
 <div class="flex justify-center">
-    <a href="/sign-in" class="btn text-primary border-primary sm:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
+    <a href="/sign-in" class="btn sm:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
 </div>

watch

@@ -0,0 +1,2 @@
+yarn
+cargo watch -w ./templates -w ./src -w ./tailwind.config.js -c --shell "./render_css && ./run"