66 lines
2.9 KiB
HTML
66 lines
2.9 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Logged in!{% endblock %}
|
|
{% block head %}
|
|
{{ super() }}
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div>
|
|
<h1 class="text-2xl font-bold mb-4 text-center">Logged in!</h1>
|
|
|
|
<div class="mb-4 rounded-lg border border-gray-300 bg-gray-50 p-6 text-left">
|
|
<h2 class="mb-2 text-lg font-semibold text-gray-800">Continue on this device</h2>
|
|
<p class="mb-4 text-sm text-gray-600">Tap Continue to login to Home Assistant on this device.</p>
|
|
<form method="post">
|
|
<button
|
|
id="continue-on-this-device"
|
|
type="submit"
|
|
class="w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg
|
|
shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400
|
|
focus:ring-opacity-75 hover:cursor-pointer"
|
|
>
|
|
Continue on this device
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-300 bg-white p-6 text-left">
|
|
<div class="mb-4 flex items-center justify-between text-gray-700">
|
|
<span class="text-lg font-semibold">Use a code from another device</span>
|
|
</div>
|
|
<div class="border-t border-gray-200 pt-4">
|
|
<p class="mb-2 text-sm text-gray-600">On your other device, open the Home Assistant app. You will see a
|
|
6-digit code.</p>
|
|
<p class="mb-4 text-sm text-gray-600">Input that code here and click Approve to login on the other device.
|
|
</p>
|
|
<form method="post">
|
|
<div>
|
|
<input
|
|
type="tel"
|
|
id="device-code-input"
|
|
name="device_code"
|
|
required
|
|
minlength="6"
|
|
maxlength="6"
|
|
pattern="[0-9]{6}"
|
|
inputmode="numeric"
|
|
placeholder="123456"
|
|
class="mb-2 w-full rounded-md border border-gray-300 px-5 py-3 text-center text-base
|
|
tracking-[0.15em] text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400
|
|
focus:ring-opacity-75"
|
|
>
|
|
</div>
|
|
<button
|
|
id="approve-login-button"
|
|
type="submit"
|
|
class="w-full py-2 px-4 bg-white text-blue-600
|
|
font-semibold rounded-lg border border-blue-500 shadow-md hover:bg-gray-100
|
|
hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400
|
|
focus:ring-opacity-75 hover:cursor-pointer"
|
|
>
|
|
Approve login on the other device
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |