docs: Improve in-app docs for AMAPI QR and link, and show remaining lifetime.

[simonkagwi]

This PR updates the device enrollment modal in the Devices list page to show some instructions on how to use the QR code and enrollment link when the using Android Enterprise MDM. Then QR code instructions link to https://docs.publishmdm.com/en/latest/src/getting-started/enroll_personally_owned_device.html and https://docs.publishmdm.com/en/latest/src/getting-started/enroll_company_owned_device.html

Modal dialog with "Company-owned" selected

Modal dialog with "Personally-owned" selected

[tobiasmcnulty]

Looks good! A couple initial thoughts. Happy to team up on it if helpful.

[tobiasmcnulty]

This is cool, I've never scanned that QR for a personally-owned device before now!

Perhaps we add dedicated pages or sections for personally- and company-owned devices in our docs, and link to those pages on docs.publishmdm.com instead of Google's?

For company-owned devices, Google's instructions don't make it clear to me when you're supposed to tap, and I think a common mistake is to go through the setup process on a factory reset device instead of tapping on the "welcome" / "Hi there" screen.

Secondarily, for personally-owned devices, Google's documentation for where to find the QR scanner in settings did not work on my device (I don't see "Google" or "Set up and restore" anywhere). If I search for "work profile" there is an option "Set up your work profile" under "Google Play services," but it's pretty far down the search results and not easy to find.

Instead, for personally owned devices, in our docs perhaps we could include a link to download the Android Device Policy app? This is the next option in Google's docs.

For me, the app opens the scanner right away, and I hope the experience would be consistent across Android versions and manufacturers (but maybe you could try it too). As a bonus the user might see if the app needs an update.

I'm happy to work on the docs if helpful.

[simonkagwi]

Sound good! Yes, if you could work on the docs that would be helpful, thanks!

[tobiasmcnulty]

Great! I started a WIP PR here: #181

[tobiasmcnulty]

With the new content, on a small screen, I don't see this link at the bottom. Perhaps we could reorganize the page to look like TinyMDM's (with a "Select a device type:" radio button), and/or put the link to the right or left of the QR code instead of below it? We have some horizontal space we could use.

[tobiasmcnulty]

@simonkagwi Thanks, I tested the new links and they work for me.

For some reason the "personally-owned" radio button wraps on my screen, though I can see it doesn't on yours.

I also wonder if we could make the QR code and modal dialog the stay the same size between "personally-owned" and "company-owned"? I find it visually jarring when switching between the two. Below are screenshots of the full page to show how it changes (on my small 13" MBP screen with "default" resolution and the browser window almost maximized).

One other idea: Maybe the copy button with text Flowbite style would be a good model for the enrollment link? With the smaller QR code, it might not be necessary to put the enrollment link to the right. I.e., if the company-owned QR is downsized to match the personally-owned QR size, it looks like the "copy button with text" input might fit below. Happy to get on a meet and test together in both our browsers if helpful.