[feat] Login with Quick Connect

[TechGeekGamer]

This PR adds support for logging into AmpFin with the Quick Connect feature. There is still an option to use credentials (username/password), but Quick Connect is offered as an alternative.

This PR will remain a draft until the following are completed:

• Approval from the developer (ex. design-wise, using different elements, etc.)
• Test on different Jellyfin server versions (Note: AmpFin appears to be broken with version 10.6.x or lower, showing a error about the instance not being found, unrelated to this change)
• Test on real hardware
• Code cleanup

If there is something else I should be doing, let me know! I have also enabled Allow edits by maintainers on this PR, so the developer can edit the code directly on my fork if they want to.

Videos

Quick Connect Supported

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-09-28.at.03.56.11.mp4

[rasmuslos]

This looks pretty good, Thanks in advance! But I honestly wouldn't bother to support quick connect on servers that are not running >= 10.9.x

[rasmuslos]

Also providing a help text might be neat but unnecessary. The spinner makes it quite clear that AmpFin will automatically detect authorization. I would change the label to something like "Awaiting authorization" and just add a "Learn more" button in a new section below.

[rasmuslos]

I don't think this needs to be inside a list layout, here is a quick mockup I made which I prefer:

struct QuickConnectMock: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("123456")
                    .font(.largeTitle)
                    .fontDesign(.monospaced)
                    .padding(.bottom, 20)
                
                ProgressView()
                
                Text("Waiting for authorization")
                    .font(.caption)
                    .foregroundStyle(.secondary)
                    .padding(.top, 4)
            }
            .padding(.vertical, 40)
            .frame(maxWidth: .infinity)
        }
        .background(.background.secondary)
        .navigationTitle("Quick Connect")
        .navigationBarTitleDisplayMode(.inline)
        .safeAreaInset(edge: .bottom) {
            Button {
                
            } label: {
                Text("Learn more")
            }
        }
    }
}

What do you think?

[TechGeekGamer]

@rasmuslos what do you think of this UI/UX?

Unsupported	Supported	Quick Connect View

[rasmuslos]

Looks pretty good, but I would make the bottom text a Section footer and shorten it to something like "Requires Jellyfin 10.9+". Also the copy button seems a bit redundant, tapping the text should copy the code instead, which should be displayed in a monospaced font.

[rasmuslos]

You can leave out the let and just assign directly to (code, secret). But this code will run on the MainActor (UI Thread) and consequently block it. But concurrency in Swift is quite complex, so I would just make this part of a Login view model, combined with the current login logic, but I am currently busy with ShelfPlayer.

[TechGeekGamer]

@rasmuslos my apologies for my late response, college has been a bit more busy (and been a bit sick) the past few days, so I haven't had much time to put towards this PR. Here are some screenshots of the updated UIs, please let me know if you would like anything changed.

LoginView	LoginQuickConnectView

[rasmuslos]

Hey, take your time, I will be very busy next week, so my respond times will get even worse, sorry 😅

The only thing I can think of is applying .buttonStyle(.plain) to the code, so that it does not change its color. I have never done this, but because you enabled edit by maintainers I would like to make some adjustments to the spacing (By default SwiftUI applies some values but AmpFin is designed around a 4 unit grid system, otherwise the UI looks inconsistent) and actually create the LoginViewModel. But like a said, this may sadly take some time.

Otherwise this looks great, Thanks for your work!

[TechGeekGamer]

The only thing I can think of is applying .buttonStyle(.plain) to the code, so that it does not change its color.

This may be a dumb question, but wouldn't the text being colored be better UX? In my mind it helps call out that the text is interactive (and can be copied to clipboard) upon tapping it.

I would like to make some adjustments to the spacing [...] But like a said, this may sadly take some time.

👍🏽 take your time, there is no rush to finish this PR.

Otherwise this looks great, Thanks for your work!

Thanks! 😄 I kinda wish I was a bit better at Swift so I could (understand and) help you do all the changes you want, but sadly I'm not that good at it so some of the changes are up to you. 😅