{% extends "base.html" %}
<!--              -->
{% block title %}Dev Dashboard{% endblock %}
<!--              -->
{% block content %}

<div class="jumbotron">
  <h1>Dev Dashboard</h1>
  <p>Welcome to your dashboard.</p>
</div>

<h2>Google Client ID</h2>
<div class="container">{{ social_google_client_id }}</div>

<h2>JWT Field</h2>
<h3>---------------------------</h3>
<div class="container">
  <h3 id="token"></h3>
  <h3 id="result"></h3>
</div>

<h2>Session Field</h2>
<h3>---------------------------</h3>

{% if request.user.is_authenticated %}
<div class="container">
  <h3 class="text-primary">
    You are login as `{{ request.user }}` with this session!
  </h3>
</div>
{% else %}
<div class="container">
  <h3 class="text-danger">No any session login.</h3>
</div>
{% endif %}

<script>
  var jwt_token = localStorage.getItem("access");
  var jwt_token_refresh = localStorage.getItem("refresh");

  data = {
    refresh: jwt_token_refresh,
  };

  if (jwt_token) {
    $.ajax({
      type: "POST",
      url: "/{{ jwt_refresh_url }}",
      data: data,
      success: function (data) {
        localStorage.setItem("access", data.access);
        const jwt_token = data.access;
        $.ajax({
          type: "POST",
          url: "/{{ jwt_verify_url }}",
          data: { token: jwt_token },
          headers: {
            Authorization: "Bearer" + " " + jwt_token,
          },
          success: function (data) {
            var json_string = JSON.stringify(data, null, 2);
            console.log(data);
            $("#token").text("Bearer " + jwt_token);
            $("#token").css("color", "green");
            if (json_string) {
              $("#result").text(" Token verified successfully!");
            }
            $("#result").css("color", "blue").css("white-space", "pre-line");
          },
          error: function (data) {
            var result = "please login " + data.responseText;
            $("#result").text(result).css("color", "red");
          },
        });
      },
      error: function (data) {
        var result = "please login " + data.responseText;
        $("#result").text(result).css("color", "red");
      },
    });
  } else {
    $("#token").text("Have not login with JWT token!");
  }
</script>

{% endblock %}
