Add switches for current year and symbols

polybius-web/src/components/form.rs

@@ -2,19 +2,25 @@ use polybius_lib::user_data::{NumType, Number};
 use web_sys::{console, HtmlInputElement};
 use yew::prelude::*;
 
-use crate::components::{input_numeric::InputNumeric, input_string::InputString};
+use crate::components::{
+    input_numeric::InputNumeric, input_string::InputString, list_tile_switch::ListTileSwitch,
+};
 
 pub enum Msg {
     AddNumericInput,
     AddStringInput,
     UpdateNumericValueInput(usize, u16),
     UpdateNumericTypeInput(usize, NumType),
     UpdateStringInput(usize, String),
+    FlipAddYear,
+    FlipAddSymbols,
 }
 
 pub struct FormComponent {
     pub numeric_values: Vec<Number>,
     pub string_values: Vec<String>,
+    pub add_year: bool,
+    pub add_symbols: bool,
 }
 
 impl Component for FormComponent {
@@ -25,6 +31,8 @@ impl Component for FormComponent {
         Self {
             numeric_values: vec![],
             string_values: vec![],
+            add_year: false,
+            add_symbols: true,
         }
     }
 
@@ -47,6 +55,12 @@ impl Component for FormComponent {
             Msg::UpdateStringInput(index, value) => {
                 self.string_values[index] = value;
             }
+            Msg::FlipAddYear => {
+                self.add_year = !self.add_year;
+            }
+            Msg::FlipAddSymbols => {
+                self.add_symbols = !self.add_symbols;
+            }
         }
         true
     }
@@ -108,6 +122,8 @@ impl Component for FormComponent {
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                     </svg>
                                 </button>
+
+                                <ListTileSwitch title={"Add current year"} subtitle={"This will add the current year to the password numeric information"} checked={self.add_year} onclick={ctx.link().callback(|_| Msg::FlipAddYear)} />
                             </div>
 
                             <div class="sm:col-span-6 lg:col-span-3">
@@ -123,6 +139,8 @@ impl Component for FormComponent {
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                     </svg>
                                 </button>
+
+                                <ListTileSwitch title={"Add symbols"} subtitle={"This will add symbols like !@#$%^&*(). For more control you can add them manually"} checked={self.add_symbols} onclick={ctx.link().callback(|_| Msg::FlipAddSymbols)} />
                             </div>
                         </div>
                     </div>

polybius-web/src/components/list_tile_switch.rs

@@ -0,0 +1,55 @@
+use yew::prelude::*;
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct ListTileSwitchProps {
+    pub title: AttrValue,
+    #[prop_or_default]
+    pub subtitle: Option<AttrValue>,
+    pub checked: bool,
+    pub onclick: Callback<MouseEvent>,
+}
+
+#[function_component]
+pub fn ListTileSwitch(props: &ListTileSwitchProps) -> Html {
+    // Button clases
+
+    let color_classes = if props.checked {
+        classes!("bg-primary-500")
+    } else {
+        classes!("bg-gray-300", "dark:bg-gray-700/50")
+    };
+
+    let mut button_classes = classes!(String::from("relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"));
+
+    button_classes.extend(color_classes);
+
+    // Toggle classes
+
+    let position_classes = if props.checked {
+        classes!("translate-x-5")
+    } else {
+        classes!("translate-x-0")
+    };
+
+    let mut toggle_classes = classes!(String::from("pointer-events-none inline-block h-5 w-5 rounded-full bg-primary-50 shadow ring-0 transition duration-200 ease-in-out"));
+
+    toggle_classes.extend(position_classes);
+
+    html! {
+        <div class="flex items-center justify-between mt-8 gap-2">
+            <span class="flex grow flex-col">
+                <span class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
+                    {props.title.clone()}
+                </span>
+                if let Some(subtitle) = &props.subtitle {
+                    <span class="text-sm text-gray-600 dark:text-gray-400">
+                        {subtitle.clone()}
+                    </span>
+                }
+            </span>
+            <button onclick={&props.onclick} aria-checked={props.checked.to_string()} class={button_classes} role="switch" type="button" tabindex="0">
+                <span aria-hidden="true" class={toggle_classes} />
+            </button>
+        </div>
+    }
+}

polybius-web/src/components/mod.rs

@@ -1,4 +1,5 @@
 pub mod form;
 pub mod input_numeric;
 pub mod input_string;
+pub mod list_tile_switch;
 pub mod navbar;