I'm making a course on Laravel Sanctum: MasteringAuth.com

Button label based on the operating system

Constantin Druc ยท 29 Dec, 2021

[00:01] Now for the keyboard shortcut, I went with Command K, but some people have Windows or Linux computers where they need to use the CTRL key. So let's take the operating system and show the appropriate combination.

[00:16] Here, in setup, we'll create a function called isAppleOS. We'll need to grab the platform of the user, and for new browsers, we can access navigator?.userAgentData?.platform, but this is not supported on all browsers, so we'll use navigator?.platform as backup, and even set a default unknown value. Then we can return a regex that will check if the platform includes any of the apple OS device names.

[00:50] Now we can use this function to set the value of the keyboard shortcut. We'll do isAppleOS, then Command K, otherwise is Ctrl+K. Let's expose it, and then use it in our template. And let's also check the non Apple version by changing this and here it is. Undo and there we go.