Ruby on Rails 8 and Hotwire : Build a Password Manager

Create a new rails app with rails new, choose postgres or sqlite, set up esbuild and bootstrap, and start the server with bin dev to preview locally.

Configure routes, create a pages controller with home and about actions, and build corresponding views to set the home page as the root.

Build a reusable navbar using bootstrap in a Rails app by creating a shared/navbar partial, rendering it in application.html.erb, and wiring links with link_to to root and about paths.

Install and configure the devise gem to enable user authentication in Rails 8, generate a user model, set up routes, migrations, and login flow.

Learn to style devise authentication forms in Rails 8 by creating dedicated templates, applying bootstrap cards and floating labels, and refining the navbar for a polished login experience.

Create a logo helper in Ruby on Rails 8 to replace duplicated code in the navbar and sign-up form. Apply safe HTML rendering and adjust CSS to ensure consistent styling.

Implement a stimulus controller to display Rails flash messages as bootstrap toasts with Hotwire. Override form error rendering with an initializer and custom styles for clearer validation feedback.

Create a first user with signup, verify sign-in, and update navbar with a sign-out option using turbo. Implement a bootstrap dropdown showing the current user's email and an account link.

Style the account page with bootstrap form-floating inputs and form-control, add a visible navbar via current page checks, and differentiate the logo and border-bottom navbar for a polished authentication section.

Define an entry model to store site url, username, and password, link it to a user with has many and belongs to relationships, and generate migrations and a console workflow.

Explore routing in Rails using routes.rb and resources to generate seven RESTful routes for the entry model, including get and post mappings to index and create actions.

Define an entries controller with a new action that initializes a blank entry and renders the entries/new view, with a navbar link to create entries using Rails form helpers.

Build a new entry form in rails using a form helper with a model, add floating labels for name, url, username, and password, and implement a create action.

Create the entry action by authenticating the user, building entry associated with the current user, permitting name, url, username, and password, and handling redirects and flash notices.

Master active record validations in rails 8 by enforcing presence on entry fields and adding a custom url check. Display and style validation errors in the view for user feedback.

Explain how to use ActiveRecord encryption to protect usernames and passwords in Rails, leveraging the primary key, deterministic key, and key derivation salt with credentials.

Point the root route to the entries index and assigns @entries from current_user.entries using the has many entries relationship, then render a partial to display each entry.

Implement a show action in the entries controller to fetch a single entry by id from the current user, link entries on the index page, and render a show template.

Recap secure authentication, encrypted username and password, flash feedback, and Rails conventions; then build a single-page app with Hotwire that manages route-page entries using GitHub, Dribble, Stack Overflow.

Transform the app into a single page application by building a dashboard with a sidebar of entries and a main details pane, styled with entries.css and bem for scoped css.

Convert the sidebar list into a vertical nav with bootstrap nav components, style links with bold hover effects, and add dynamic favicons via a Google API.

Learn how to build a reusable rails 8 dashboard main view for a password manager by rendering an entry name component and formatting created and updated times with a helper.

Learn to use turbo frames to render a single entry's details into the main dashboard when clicking sidebar links, by wiring frames, targets, and partials in Rails.

Remove the new entry link from the navbar and render the new entry form in the main dashboard frame with turbo frames, highlighting hotwire updates and future turbo streams.

Learn how turbo streams update the UI after a create action by appending new entries to the sidebar list and updating the main dashboard.

Use turbo streams to update the dom after a create action and display flash messages without a page reload.

Delete an entry using turbo streams and bootstrap dropdowns in Rails; wire the destroy action, update the UI in real time, and show no entries when empty.

Seed the database to prefill entries and prevent delete errors. Use the seeds file with ActiveRecord to assign ids and enable CRUD with turbo frames and turbo streams.

Wrap entry fields in turbo frame tags to enable inline editing of name, username, password, and URL via edit icons, preparing the Rails 8 and Hotwire edit action and template.

Learn to build an inline edit UI in Ruby on Rails 8 with Turbo Frames, using a dynamic edit template and params to target frames while reusing the form layout.

Implement the update action for inline editing in Rails 8 with Turbo Streams. Update triggers Turbo Streams responses, refreshes the main dashboard and sidebar, and preserves entry order.

Builds a search feature for entries using a get form, turbo frame, and a model scope to support exact and partial name matches.

Use turbo streams to auto load a single search result into the main dashboard when a match returns one entry. Update the sidebar results accordingly with the corresponding partials.

Learn to reset search results using a Stimulus controller by adding a clear button that appears for the search input and toggles visibility to refresh the main dashboard.

Learn to add copy-to-clipboard functionality for username and password using a Stimulus.js clipboard controller, integrate with Hotwire, and provide visual feedback with Bootstrap icons.

Implement a stimulus-powered password visibility toggle beside the clipboard button, wiring a toggle password controller to switch input type and update the icon, completing section six and enabling JWT API.

Set up a dedicated api under api v1 with a restful entries resource and an index rendering current_user entries in json, preparing jwt authentication and thunder client testing.

Create an API v1 base controller that enforces JSON format, skips the verify authenticity token, and establishes a json-only base for controllers ahead of JWT authentication.

Build an api v1 auth controller that validates email and password, returns a json web token, and handles errors for invalid credentials while routing and testing Thunder Client or Postman.

Install the jwt gem and create a json web token service with encode and decode methods. Use a secret key and two-minute expiration to issue tokens after login.

Decode and validate JWTs from the authorization header to authenticate users and return only their entries, by decoding the token payload sub and setting current user.

Add exception handling for JWT by rescuing expired signature and decode error, rendering JSON errors with unauthorized status, and ensuring tokens expire gracefully after two minutes for the Chrome extension.

Explore building a Ruby on Rails 8 and Hotwire password manager, featuring a secure web app with user auth, encrypted entries, a JSON API, and a Chrome extension for autofill.

Explore a Chrome extension starter template built with Hotwire and Esbuild. Learn how assets, content scripts, manifest v3, and a popup UI come together.

Install dependencies with yarn install and npm start, then load the chrome extension in developer mode and test the updated popup styling with variables.css and core.css.

Create sign in and entries frames for a Chrome extension using turbo frames. Set up an app controller and implement token-based redirects with turbo visit.

Create a sign in form in a Rails Hotwire frame with email and password inputs and a sign in button, wiring a submit to the auth controller’s create endpoint.

Wire up a Stimulus auth controller to submit the sign-in form, handle errors, store the returned token, and redirect to the entries frame.

Implement a storage service with set session storage and get session storage to persist a sign-in token (JWT) in session storage for the app and extension.

Sign out clears the session storage token via a storage service and auth controller, then redirects to the sign-in frame, with a navbar sign-out link.

Create the entries stream layout with a Stimulus entries controller, defining sidebar and main targets and a spinner, and implement a token check that signs out via a custom event.

Build a fetch entries service to call the rails app's /api/v1/entries endpoint using a token from session storage for the authorization header, then display the entries in the controller.

Build the entries view with hotwire templates, wiring a sidebar and main panel to display authenticated user entries, with copy-to-clipboard, password toggle, and token-safe fetch.

Implement client-side search with Stimulus in a Rails 8 and Hotwire password manager, wiring the entries template, search input, and clear button to filter results in real time.

Wire up the copy to clipboard feature with a Stimulus clipboard controller, wiring copy actions and icons, updating imports and paths, and integrating the clipboard in the entries template.

Implement a Stimulus toggle password feature by creating and registering a toggle password controller, binding the input target, and triggering a password reveal with icon updates in the extension.