spf.tpl.html

<div class="pm_modal {{ctrl.class}} domains" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <button type="button" ng-click="ctrl.close()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <ng-include src="'templates/modals/domain/menu.tpl.html'"></ng-include>
                <span ng-show="ctrl.domain.SpfState === 0" class="pull-right pm_badge error" translate translate-comment="SPF status badge">Not set</span>
                <span ng-show="ctrl.domain.SpfState === 1 || ctrl.domain.SpfState === 2" class="pull-right pm_badge error" translate translate-comment="SPF status badge">Not set properly</span>
                <span ng-show="ctrl.domain.SpfState === 3" class="pull-right pm_badge success" translate translate-comment="SPF status badge">Good</span>
                <h4 class="modal-title">5. <span translate translate-context="Title">SPF</span> <em translate>Recommended</em></h4>
            </div>
            <div class="modal-body pm_form">
                <p translate translate-context="Info">SPF is used to specify who is allowed to send email for the domain so we strongly recommend including ProtonMail in your SPF record. Please add the following TXT record into your DNS. This can typically be done in the control panel of your domain name registrar.</p>
                <p translate translate-context="Info">Please add the following TXT record. Note, DNS records can take several hours to update.</p>
                <p><a target='_blank' href='https://protonmail.com/support/knowledge-base/anti-spoofing/' translate translate-context="Action">Learn more</a></p>
                <div class="pm_table">
                    <table class="record">
                        <tr>
                            <th style="width:3rem" translate translate-context="Title">Type</th>
                            <th style="width:6.5rem" translate translate-context="Title">Host name</th>
                            <th style="width: 14rem" translate translate-context="Title">Value / Data / Points to</th>
                        </tr>
                        <tr>
                            <td><code>TXT</code></td>
                            <td><code>@</code></td>
                            <td><code>v=spf1 include:_spf.protonmail.ch mx ~all</code></td>
                        </tr>
                    </table>
                </div>

                <p class="alert alert-info" translate translate-context="Info">If you want to keep an existing SPF record, you can just add <code>include:_spf.protonmail.ch</code> to it after the <code>v=spf1</code>. Do not create multiple SPF records.</p>
            </div>
        </div>
        <div class="modal-footer clearfix">
            <button class="pm_button primary pull-right" ng-click="ctrl.next()" translate translate-context="Action">Next</button>
            <button class="pm_button" ng-click="ctrl.close()" translate translate-context="Action">Close</button>
        </div>
    </div>
    <div class="modal-overlay"></div>
</div>