1- use yew:: prelude:: * ;
1+ /*
2+ This module defines the Yew component for the RustedLessPass application.
3+
4+ It includes:
5+ - The definition of the `Msg` enum representing different messages.
6+ - The `App` struct representing the application state.
7+ - Implementation of the `Component` trait for the `App` struct, providing methods for
8+ creating, updating, and viewing the component.
9+
10+ The `App` component serves as the core controller of the password manager application.
11+ It manages the application state, handles user interactions, and renders the user interface.
12+ */
213
314use crate :: fingerprintgen:: fingerprint_calculate;
415use crate :: password_utils:: { update_disabled_characters, update_show_state} ;
516use crate :: settings:: Settings ;
617use crate :: slider:: Slider ;
718use crate :: switch:: Switch ;
819use crate :: text_input:: TextInput ;
20+ use yew:: prelude:: * ;
921
10- // Define message enum to handle events
1122pub enum Msg {
12- ChangeSettings ( Settings ) , // Message to change settings
13- SetWebsite ( String ) , // Message to set website value
14- SetUsername ( String ) , // Message to set username value
15- SetPassword ( String ) , // Message to set password value
16- GeneratePassword , // Message to generate password
17- ShowInputPassword , // Message to show/hide password input
23+ ChangeSettings ( Settings ) ,
24+ SetWebsite ( String ) ,
25+ SetUsername ( String ) ,
26+ SetPassword ( String ) ,
27+ GeneratePassword ,
28+ ShowInputPassword ,
1829}
1930
20- // Define the main application component
2131pub struct App {
22- settings : Settings , // Application settings
23- website : String , // Website input value
24- username : String , // Username input value
25- password : String , // Password input value
26- new_password : String , // Newly generated password
27- fingerprint : Vec < String > , // Password fingerprint
28- show : u8 , // State to manage UI
29- show_input_password : bool , // Flag to show/hide password input
32+ settings : Settings ,
33+ website : String ,
34+ username : String ,
35+ password : String ,
36+ new_password : String ,
37+ fingerprint : Vec < String > ,
38+ show : u8 ,
39+ show_input_password : bool ,
3040}
3141
32- // Implement default trait for the main application component
3342impl Default for App {
3443 fn default ( ) -> Self {
3544 Self {
36- settings : Settings :: load ( ) , // Load settings
37- website : String :: new ( ) , // Initialize website value
38- username : String :: new ( ) , // Initialize username value
39- password : String :: new ( ) , // Initialize password value
40- new_password : "Generate and copy" . to_string ( ) , // Initialize new password value
41- fingerprint : fingerprint_calculate ( "" ) , // Calculate fingerprint
42- show : 0 , // Initialize show state
43- show_input_password : false , // Initialize show_input_password flag
45+ settings : Settings :: load ( ) ,
46+ website : String :: new ( ) ,
47+ username : String :: new ( ) ,
48+ password : String :: new ( ) ,
49+ new_password : "Generate and copy" . to_string ( ) ,
50+ fingerprint : fingerprint_calculate ( "" ) ,
51+ show : 0 ,
52+ show_input_password : false ,
4453 }
4554 }
4655}
4756
48- // Implement component trait for the main application component
4957impl Component for App {
50- type Message = Msg ; // Define message type
51- type Properties = ( ) ; // Define properties type
58+ type Message = Msg ;
59+ type Properties = ( ) ;
5260
53- // Create function to initialize the component
5461 fn create ( _ctx : & Context < Self > ) -> Self {
55- Self :: default ( ) // Initialize default values
62+ Self :: default ( )
5663 }
5764
58- // Update function to handle messages and update the component
5965 fn update ( & mut self , _ctx : & Context < Self > , msg : Self :: Message ) -> bool {
6066 match msg {
6167 Msg :: ChangeSettings ( settings) => {
62- self . settings = settings. clone ( ) ; // Update settings
68+ self . settings = settings. clone ( ) ;
6369 self . settings . disabled = update_disabled_characters ( & settings) ;
64- self . settings . store ( ) ; // Store updated settings
65- self . show = 0 ; // Reset password button state
70+ self . settings . store ( ) ;
71+ self . show = 0 ;
6672 }
6773 Msg :: SetWebsite ( next_website) => {
68- // Handle set website message
69- self . website = next_website; // Update website value
70- self . show = 0 ; // Reset password button state
74+ self . website = next_website;
75+ self . show = 0 ;
7176 }
7277 Msg :: SetUsername ( next_username) => {
73- // Handle set username message
74- self . username = next_username; // Update username value
75- self . show = 0 ; // Reset password button state
78+ self . username = next_username;
79+ self . show = 0 ;
7680 }
7781 Msg :: SetPassword ( next_password) => {
78- // Handle set password message
79- self . password = next_password; // Update password value
80- self . fingerprint = fingerprint_calculate ( self . password . clone ( ) . as_str ( ) ) ; // Calculate fingerprint
81- self . show = 0 ; // Reset password button state
82+ self . password = next_password;
83+ self . fingerprint = fingerprint_calculate ( self . password . clone ( ) . as_str ( ) ) ;
84+ self . show = 0 ;
8285 }
8386 Msg :: GeneratePassword => {
84- // Handle generate password message
8587 ( self . show , self . new_password ) = update_show_state (
8688 self . show ,
8789 & self . website ,
@@ -93,30 +95,27 @@ impl Component for App {
9395 }
9496
9597 Msg :: ShowInputPassword => {
96- // Handle show input password message
97- self . show_input_password = !self . show_input_password ; // Toggle show input password flag
98+ self . show_input_password = !self . show_input_password ;
9899 }
99100 } ;
100- true // Return true to indicate successful update
101+ true
101102 }
102103
103- // View function to render the component
104104 fn view ( & self , ctx : & Context < Self > ) -> Html {
105- let on_website_change = ctx. link ( ) . callback ( Msg :: SetWebsite ) ; // Callback for website change
106- let on_username_change = ctx. link ( ) . callback ( Msg :: SetUsername ) ; // Callback for username change
107- let on_password_change = ctx. link ( ) . callback ( Msg :: SetPassword ) ; // Callback for password change
105+ let on_website_change = ctx. link ( ) . callback ( Msg :: SetWebsite ) ;
106+ let on_username_change = ctx. link ( ) . callback ( Msg :: SetUsername ) ;
107+ let on_password_change = ctx. link ( ) . callback ( Msg :: SetPassword ) ;
108108 let on_password_click = ctx. link ( ) . callback ( |e : MouseEvent | {
109109 e. prevent_default ( ) ;
110110 Msg :: ShowInputPassword
111- } ) ; // Callback for password click
111+ } ) ;
112112 let on_submit = ctx. link ( ) . callback ( |e : SubmitEvent | {
113113 e. prevent_default ( ) ;
114114 Msg :: GeneratePassword
115- } ) ; // Callback for form submission
115+ } ) ;
116116
117- let Self { ref settings, .. } = * self ; // Reference to self
117+ let Self { ref settings, .. } = * self ;
118118
119- // Macro to generate callback for settings change
120119 macro_rules! settings_callback {
121120 ( $link: expr, $settings: ident; $key: ident as $ty: ty) => { {
122121 let settings = $settings. clone( ) ;
@@ -131,20 +130,19 @@ impl Component for App {
131130 }
132131 }
133132
134- // Render HTML using Yew's html! macro
135133 html ! {
136134 <body>
137135 <nav class="container-fluid" >
138136 <ul>
139137 <li>
140138 <a href="./" ><img src="assets/icons/maskable_icon_x48.png" alt="Description of the image" width="37.7048437335240"
141- height="37.7048437335240" /><strong>{ "RustedLessPass" } </strong></a> // Application name
139+ height="37.7048437335240" /><strong>{ "RustedLessPass" } </strong></a>
142140 </li>
143141 </ul>
144142 <ul>
145143 <li>
146144 <details class="dropdown" >
147- <summary role="button" class="secondary" >{ "Theme" } </summary> // Theme dropdown
145+ <summary role="button" class="secondary" >{ "Theme" } </summary>
148146 <ul dir="rtl" >
149147 <li><a href="#" data-theme-switcher="auto" >{ "Auto" } </a></li>
150148 <li><a href="#" data-theme-switcher="light" >{ "Light" } </a></li>
@@ -159,19 +157,19 @@ impl Component for App {
159157 <article>
160158 <div>
161159 <hgroup class="title" >
162- <h1>{ "Stateless Password Manager" } </h1> // Application title
160+ <h1>{ "Stateless Password Manager" } </h1>
163161 <p>{ "Remember only one master password to access your passwords at any time, on any device, without the need
164162 for
165- syncing." } </p> // Application description
163+ syncing." } </p>
166164 </hgroup>
167165 <form onsubmit={ on_submit} >
168166 <TextInput value={ self . website. clone( ) } input_type={ "text" } name={ "Website" } autocomplete={ "off" }
169- on_change={ on_website_change} /> // Website input field
167+ on_change={ on_website_change} />
170168 <TextInput value={ self . username. clone( ) } input_type={ "text" } name={ "Username" } autocomplete={ "email,username" }
171- on_change={ on_username_change} /> // Username input field
169+ on_change={ on_username_change} />
172170 <fieldset role="group" >
173171 <TextInput value={ self . password. clone( ) } input_type={ if self . show_input_password { "text" } else { "password" } }
174- name={ "Password" } autocomplete={ "current-password" } on_change={ on_password_change} /> // Password input field
172+ name={ "Password" } autocomplete={ "current-password" } on_change={ on_password_change} />
175173 <button
176174 style="white-space: nowrap;margin-left: 0rem; padding-left: 0.5rem; padding-right: 0.5rem; align-self: center;"
177175 onclick={ on_password_click} >
@@ -184,31 +182,28 @@ impl Component for App {
184182 <i class={ match self . fingerprint. last( ) { Some ( s) => format!( "fa fa-fw {}" , s) ,
185183 None => String :: new( ) ,
186184 } } style="margin-left: 0.2rem;" ></i>
187- </button> // Password fingerprint icons
185+ </button>
188186 </fieldset>
189187 <fieldset>
190188 <nav>
191-
192189 <Switch label="a-z" onchange={ settings_callback!( ctx. link( ) , settings; lowercase) }
193- value={ settings. lowercase} value_disabled={ self . settings. disabled. clone( ) == "a-z" } /> // Switch for lowercase
190+ value={ settings. lowercase} value_disabled={ self . settings. disabled. clone( ) == "a-z" } />
194191 <Switch label="A-Z" onchange={ settings_callback!( ctx. link( ) , settings; uppercase) }
195- value={ settings. uppercase} value_disabled={ self . settings. disabled. clone( ) == "A-Z" } /> // Switch for uppercase
192+ value={ settings. uppercase} value_disabled={ self . settings. disabled. clone( ) == "A-Z" } />
196193 <Switch label="0-9" onchange={ settings_callback!( ctx. link( ) , settings; numbers) }
197- value={ settings. numbers} value_disabled={ self . settings. disabled. clone( ) == "0-9" } /> // Switch for numbers
194+ value={ settings. numbers} value_disabled={ self . settings. disabled. clone( ) == "0-9" } />
198195 <Switch label="%!@" onchange={ settings_callback!( ctx. link( ) , settings; symbols) }
199- value={ settings. symbols} value_disabled={ self . settings. disabled. clone( ) == "%!@" } /> // Switch for symbols
200-
196+ value={ settings. symbols} value_disabled={ self . settings. disabled. clone( ) == "%!@" } />
201197 </nav>
202198 <div class="grid" style="padding: 0rem;" >
203199 <Slider label="Size" max=35 min=1 onchange={ settings_callback!( ctx. link( ) , settings; size) }
204- value={ settings. size} /> // Slider for password size
200+ value={ settings. size} />
205201 <Slider label="Counter" max=100 min=1 onchange={ settings_callback!( ctx. link( ) , settings; counter) }
206- value={ settings. counter} /> // Slider for password counter
202+ value={ settings. counter} />
207203 </div>
208-
209204 </fieldset>
210205 <button type ="submit" class="contrast" >{ if self . show == 0 { "Generate and copy" } else if self . show == 1
211- { "**************" } else { self . new_password. as_str( ) } } </button> // Submit button
206+ { "**************" } else { self . new_password. as_str( ) } } </button>
212207 </form>
213208 </div>
214209 </article>
@@ -218,10 +213,9 @@ impl Component for App {
218213 <small>{ "Built with " } <a href="https://rust-lang.org" class="secondary" >{ "Rust" } </a>{ ", " } <a
219214 href="https://github.com/71/lesspass.rs" class="secondary" >{ "lesspass.rs" } </a>{ ", " } <a href="https://yew.rs"
220215 class="secondary" >{ "Yew" } </a>{ " and " } <a href="https://picocss.com" class="secondary" >{ "Pico" } </a>{ " • " }
221- <a href="https://github.com/RustedLessPass/RustedLessPass" class="secondary" >{ "Source code" } </a></small> // Footer information
216+ <a href="https://github.com/RustedLessPass/RustedLessPass" class="secondary" >{ "Source code" } </a></small>
222217 </footer>
223-
224- <script src="assets/minimal-theme-switcher.js" ></script> // JavaScript for theme switcher
218+ <script src="assets/minimal-theme-switcher.js" ></script>
225219 </body>
226220 }
227221 }
0 commit comments