Styles

[rctneil]

Hey,

In the readme you state "It might be even easier to just copy the styles to your project.", how do we achieve this?

I can't "require" them as i'm not using Sprockets, I am using plain old regular CSS.

[strouptl]

Hi @rctneil,

We should probably update those instructions for Propshaft. Try adding this to your CSS file instead:

@import 'devise-otp';

Laney

[rctneil]

Ah! I'll give that a spin next week. Thanks.

One suggestion for the readme. Maybe you could add some screenshots of the result of integrating this gem. So images of the QR code page, the "enter your 2FA code" page. Just as examples so people can fully see what it does.

I very nearly went elsewhere as I wasn't 100% sure if it was going to do what I wanted, thankfully I did try it and it does it very nicely!

[strouptl]

That is really helpful. Thank you, @rctneil.

Glad to have you on board!

[rctneil]

Hi @rctneil,

We should probably update those instructions for Propshaft. Try adding this to your CSS file instead:

@import 'devise-otp';

Laney

how do i reference direct from a plain css file?

I tried this but it can;t find it:

@import url('devise-otp');

[rctneil]

Any thoughts on this @strouptl ?

[strouptl]

Hi @rctneil,

Sorry for the delay. Could you try this instead?

@import url("devise-otp.css");

Thanks,
Laney

[strouptl]

@rctneil, did you get a chance to try the last option? It should work, as it is using the native CSS import syntax.

[rctneil]

@strouptl Hey there. Sorry, had to jump ship to another project for a time. Just tried this but no it fails. It's looking in the directory I have set for my styles but the stylesheet obviously isn't in there. It somehow needs to look in the gem for it but i'm unsure how to achieve that?

Or thinking the opposite way, do I somehow need to extract the stylesheet from the gem and place it in my css directory manually?

[strouptl]

Hi @rctneil,

Rails should find/import the devise_otp.css stylesheet from the devise_otp module automatically. Here is a sample app (brand new Rails 8 project with Propshaft) demonstrating a working implementation. There is no configuration required besides the native CSS import syntax (see below).

https://github.com/strouptl/devise_otp_test/blob/master/app/assets/stylesheets/application.css

I would love to know if you find any differences with your application. If it is too much work, though, you can always copy the styles manually to your application.css file, as well. There aren't many (as noted in the README).

.qrcode-container {
  max-width: 300px;
  margin: 0 auto;
}

Thanks,
Laney