handle_code.html

{{block "title" .}} {{.ProductName }} {{end}}

{{define "yield"}}
    <div class="mt-12 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="mx-auto mb-10">
            <img src="{{.Logo}}" alt="product logo" class="block h-[60px] mx-auto" >
        </div>

        <div class="bg-white py-12 px-4 mb-24 shadow-md sm:rounded-lg sm:px-10">
            <h2 class="font-bold text-2xl mb-1">
                Check your inbox
            </h2>
            <p class="text-gray-700 mb-4 text-[17px]">
                We've sent you email message containing a six-digit login code to the <strong class="font-medium">{{.Email}}</strong> email address.
                <br><br>
                Enter the login code to access your account.
            </p>

            <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
                {{$action := "/code"}}
                <form action="{{prefixedPath $action}}" method="POST" class="mb-4">
                    <input type="hidden" name="email" value="{{.Email}}">
                    <div class="mb-4 justify-center">
                        <input type="numeric" name="code" class="code text-[40px] py-4 text-center border rounded-lg tracking-[15px] w-full font-bold bg-gray-50" maxlength="6" autofocus>
                        {{if ne .Error "" }}
                            <span class="text-red-500 text-sm flex flex-row gap-2 mt-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                                </svg>

                                {{.Error}}
                            </span>
                        {{end}}
                    </div>

                    <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Login
                    </button>
                </form>

                <p class="text-sm text-gray-400">
                    {{$link := "/login"}}
                    Didn't get the message? Check your spam folder. Wrong email? <a href="{{prefixedPath $link}}" class="text-blue-600">Re-enter your address</a>
                </p>
            </div>
        </div>
    </div>
{{end}}