invidious-mod/src/invidious/views/login.ecr

<% content_for "header" do %>
<title><%= translate(locale, "Log in") %> - Invidious</title>
<% end %>

<div class="pure-g">
    <div class="pure-u-1 pure-u-lg-1-5"></div>
    <div class="pure-u-1 pure-u-lg-3-5">
        <div class="h-box">
            <div class="pure-g">
                <div class="pure-u-1-2">
                    <a class="pure-button <% if account_type == "invidious" %>pure-button-disabled<% end %>" href="/login?type=invidious">
                        <%= translate(locale, "Log in/register") %>
                    </a>
                </div>
                <div class="pure-u-1-2">
                    <a class="pure-button <% if account_type == "google" %>pure-button-disabled<% end %>" href="/login?type=google">
                        <%= translate(locale, "Log in with Google") %>
                    </a>
                </div>
            </div>
            <hr>
            <% if account_type == "invidious" %>
            <form class="pure-form pure-form-stacked" action="/login?referer=<%= URI.escape(referer) %>&type=invidious" method="post">
                <fieldset>
                    <% if email %>
                    <input name="email" type="hidden" value="<%= email %>">
                    <% else %>
                    <label for="email"><%= translate(locale, "User ID") %> :</label>
                    <input required class="pure-input-1" name="email" type="text" placeholder="<%= translate(locale, "User ID") %>">
                    <% end %>

                    <% if password %>
                    <input name="password" type="hidden" value="<%= password %>">
                    <% else %>
                    <label for="password"><%= translate(locale, "Password") %> :</label>
                    <input required class="pure-input-1" name="password" type="password" placeholder="<%= translate(locale, "Password") %>">
                    <% end %>

                <% if captcha %>
                    <% case captcha_type when %>
                    <% when "image" %>
                        <% captcha = captcha.not_nil! %>
                        <img style="width:100%" src='<%= captcha[:question] %>'/>
                        <% captcha[:tokens].each_with_index do |token, i| %>
                            <input type="hidden" name="token[<%= i %>]" value="<%= URI.escape(token) %>">
                        <% end %>
                        <input type="hidden" name="captcha_type" value="image">
                        <label for="answer"><%= translate(locale, "Time (h:mm:ss):") %></label>
                        <input type="text" name="answer" type="text" placeholder="h:mm:ss">
                    <% when "text" %>
                        <% captcha = captcha.not_nil! %>
                        <% captcha[:tokens].each_with_index do |token, i| %>
                            <input type="hidden" name="token[<%= i %>]" value="<%= URI.escape(token) %>">
                        <% end %>
                        <input type="hidden" name="captcha_type" value="text">
                        <label for="answer"><%= captcha[:question] %></label>
                        <input type="text" name="answer" type="text" placeholder="<%= translate(locale, "Answer") %>">
                    <% end %>

                    <button type="submit" name="action" value="signin" class="pure-button pure-button-primary">
                        <%= translate(locale, "Register") %>
                    </button>

                    <% case captcha_type when %>
                    <% when "image" %>
                        <label>
                            <button type="submit" name="change_type" class="pure-button pure-button-primary" value="text">
                                <%= translate(locale, "Text CAPTCHA") %>
                            </button>
                        </label>
                    <% when "text" %>
                        <label>
                            <button type="submit" name="change_type" class="pure-button pure-button-primary" value="image">
                                <%= translate(locale, "Image CAPTCHA") %>
                            </button>
                        </label>
                    <% end %>
                <% else %>
                    <button type="submit" name="action" value="signin" class="pure-button pure-button-primary">
                        <%= translate(locale, "Sign In") %>/<%= translate(locale, "Register") %>
                    </button>
                <% end %>
                </fieldset>
            </form>
            <% elsif account_type == "google" %>
            <form class="pure-form pure-form-stacked" action="/login?referer=<%= URI.escape(referer) %>&type=google" method="post">
                <fieldset>
                    <% if email %>
                    <input name="email" type="hidden" value="<%= email %>">
                    <% else %>
                    <label for="email"><%= translate(locale, "E-mail") %> :</label>
                    <input required class="pure-input-1" name="email" type="email" placeholder="<%= translate(locale, "E-mail") %>">
                    <% end %>

                    <% if password %>
                    <input name="password" type="hidden" value="<%= password %>">
                    <% else %>
                    <label for="password"><%= translate(locale, "Password") %> :</label>
                    <input required class="pure-input-1" name="password" type="password" placeholder="<%= translate(locale, "Password") %>">
                    <% end %>

                    <% if tfa %>
                    <label for="tfa"><%= translate(locale, "Google verification code") %> :</label>
                    <input required class="pure-input-1" name="tfa" type="text" placeholder="<%= translate(locale, "Google verification code") %>">
                    <% end %>

                    <button type="submit" class="pure-button pure-button-primary"><%= translate(locale, "Sign In") %></button>
                </fieldset>
            </form>
            <% end %>
        </div>
    </div>
    <div class="pure-u-1 pure-u-lg-1-5"></div>
</div>