{% extends 'Layouts/Doc/default.html.twig' %}

{% block title %}Documentation{% endblock %}

{% block headerPageTitle %}
	{{ 'app.documentation.page.title.authorization'|trans |upper}}
{% endblock %}

{% block body %}
    <div class="card mb-12">
        <div class="card-body flex-column p-5">
            <div class="d-flex align-items-center p-lg-15">
                <div class="row">
                    <div class="col-md-12 scroll-y">
                        <h1 class="fw-bold fs-4 fs-lg-1 text-gray-800 mb-3">Authorization</h1>
                        <div class="position-relative w-100 text-gray-800">
                            <p>In <strong>Popina Order's API</strong> all routes are protected by <strong>JWT authentication</strong>. If you would like to test these endpoints <strong><a href="{{ path('foxorders_api_doc') }}" target="_blank">in our Swagger UI docs</a></strong>, you need to retrieve a <strong>JWT token (duration = {{tokenDuration}} min)</strong> first. You could do that by using an endpoint with </strong>your credentials</strong> for API as webshop, manager or show owner:</p>
                            <img alt="Login" class="mt-5" src="/{{ foxorders_doc_authorization ~ 'login-endpoint.png' }}" style="width: 914.25px"/>

                            <p class="mt-5">In the response, you will get a token that has to be passed in each request header. In the Swagger UI, you can set the authentication token for each request.</p>
                            <img alt="Login response" class="mt-5" src="/{{ foxorders_doc_authorization ~ 'login-response.png' }}" style="width: 914.25px"/>
                        
                            <p class="mt-5">Notice the <strong>Authorize</strong> button and unlocked padlock near the available URLs:</p>
                            <img alt="Authorize" class="mt-5" src="/{{ foxorders_doc_authorization ~ 'authorize.png' }}" style="width: 914.25px"/>

                            <p class="mt-5">Click the <strong>Authorize</strong> button and put the authentication token (remember about the <strong>Bearer</strong> prefix):</p>
                            <img alt="Bearer authorization" class="mt-5" src="/{{ foxorders_doc_authorization ~ 'bearer-authorization.png' }}" style="width: 914.25px"/>

                            <p class="mt-5">After clicking <strong>Authorize</strong>, you should see locked padlock near URLs and the proper header should be added to each API call:</p>
                            <img alt="After authorization" class="mt-5" src="/{{ foxorders_doc_authorization ~ 'after-authorization.png' }}" style="width: 914.25px"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center p-lg-15">
				<div class="row">
					<div class="col-md-12 scroll-y">
						<h1 class="fw-bold fs-4 fs-lg-1 text-gray-800 mb-3">Refresh Token</h1>
						<div class="position-relative w-100 text-gray-800">
							<p>A vital component in our authentication system, enabling secure and seamless user access management.</p>
							<ul>
								<li>
									<strong>Endpoint: {{api_route_prefix}}/token/refresh</strong>
								</li>
							</ul>
							<p>Parameters</p>
							<ul>
								<li>
									<strong>refresh_token</strong>: The refresh token is obtained alongside the authentication token.
								</li>
								<li>
									<strong>franchiseId</strong>: The franchise ID you intend to log in to.
								</li>
							</ul>
                            <p>Response</p>
							<ul>
								<li>
									<strong>Token</strong>: Authentication token (duration = {{tokenDuration}} min).
								</li>
								<li>
									<strong>refresh_token</strong>: Refresh token (duration = {{refreshTokenDuration}} min).
								</li>
							</ul>
						</ul>
					</div>
				</div>
                <div class="row">
                    <div class="col-md-12 pt-5 scroll-y">
                        <h1 class="fw-bold fs-4 fs-lg-1 text-gray-800 mb-3">Headers</h1>
                        <div class="position-relative w-100 text-gray-800">
                            <p>Each endpoint you call must contain <strong>the mandatory headers</strong>.</p>
                            <p>The mandatory headers are the folowing:</p>
                            <ul>
                                <li>
                                    <strong>version</strong>: The API's version you like to use. The version changes from time to time when adding new feature or after fixing bugs. Available versions are (<strong>2.0.0</strong>).
                                </li>
                                <li>
                                    <strong>source</strong>: The source of your request to help us identify which one requesting this endpoint. Available versions are (<strong>popina</strong>, <strong>kezia-cloud</strong>, <strong>jalia</strong> and <strong>foxorders-front</strong>).
                                </li>
                                <li>
                                    <strong>franchise-token</strong>: To identify the franchise from which the request was made, this is a <strong>mandatory and blocking</strong> parameter for some endpoints. The token is used to ensure the <strong>legitimacy</strong> of the request.
                                </li>
                                <li>
                                    <strong>shop-token</strong>: To be able to retrieve the default device token if the deviceToken parameter not communicated in the header. This is a <strong>mandatory and blocking</strong> parameter for some endpoints.
                                </li>
                                <li>
                                    <strong>device-token</strong>: Each device (cash desk/terminal) has its own token. This is a <strong>mandatory and blocking</strong> parameter for some endpoints. For others if this parameter is not communicated, it takes the default value from <strong>shopToken</strong> parameter (<strong>C&C</strong>).
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
				<div class="row">
                    <div class="col-md-12 pt-5 scroll-y">
                        <h1 class="fw-bold fs-4 fs-lg-1 text-gray-800 mb-3">Google authentication</h1>
                        <div class="position-relative w-100 text-gray-800">
                            <p>
								<strong>Popina Order</strong>
								provides seamless and secure authentication through Google accounts. With our Google authentication integration, users can easily sign up and sign in to your application using their Google credentials. This enhances the user experience by eliminating the need to create and remember additional login details.
							</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 pt-5 scroll-y">
                        <h1 class="fw-bold fs-4 fs-lg-1 text-gray-800 mb-3">Rate limiter</h1>
                        <div class="position-relative w-100 text-gray-800">
                            <p><strong>Rate limiter</strong> is a method of controlling traffic flow to a service or server by restricting the number of requests that can be made within a certain time frame. It is an essential technique for preventing resource abuse, ensuring fair use of services and protecting against <strong>DDoS</strong> attacks.</p>
                            <p>The current Rate limit for <strong>Popina Order</strong> is: <strong>{{rateLimiterLimit}} / {{rateLimiterInterval}}</strong></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}