<apex:page standardController="Contact" extensions="ContactCTRL_XT">
    <script src="https://use.fontawesome.com/305c6a828e.js"></script>
    <style tyle="text/css">
        .hide {display:none;}
        .show {display:none;border:1px solid #ccc;background-color:green;color:white;font-weight:bold;border-radius: 6px;margin-top:0px;margin-bottom:0px;padding:6px;}
        .verify {display:inline-block;border:1px solid #ccc;border-radius: 6px;margin-top:0px;margin-bottom:0px;padding:10px;margin-left:-120px;}
         .verify:hover .show {display:inline-block;}
         span.needToVerify {display:inline-block;font-weight:bold;font-size:1.5em;color:red;margin-top:5px}
         span.verifiedText {display:inline-block;font-weight:bold;font-size:1.5em;color:green;margin-top:5px}
         .isVerified {border:1px solid #ccc;border-radius: 6px;margin-top:0px;margin-bottom:0px;padding:10px;display:inline-block;margin-left:0px;}
    </style>

    <apex:form >
        <div style="width:100%;text-align:center">
        <apex:outputPanel id="refreshMe">
            <apex:outputPanel rendered="{!!isVerified}" id="needToVerify">
                <div class="verify">
                    <apex:commandLink action="{!verifyContact}" rerender="refreshMe">
                        <div class="show">
                            Verify
                        </div>
                    </apex:commandLink>

                    <span class="fa-stack fa-lg" style="color:red;vertical-align:middle;margin-top:-7px">
                        <i class="fa fa-circle-thin fa-stack-2x"></i>
                        <i class="fa fa-exclamation fa-stack-1x"></i>
                    </span>
                    <span class="needToVerify">Contact Needs Verification</span>
                </div>
            </apex:outputPanel>

            <apex:outputPanel rendered="{!IsVerified}" id="Verified">
                <div class="isVerified">
                    <span class="fa-stack fa-lg" style="color:green;vertical-align:middle;margin-top:-7px">
                        <i class="fa fa-circle-thin fa-stack-2x"></i>
                        <i class="fa fa-check fa-stack-1x"></i>
                    </span>
                    <span class="verifiedText">Contact Verified</span>
                </div>
            </apex:outputPanel>

            <apex:outputPanel rendered="{!(contact.account.Password__c != NULL) && (contact.account.Zuora__Active__c == 'Yes')}">
                <c:PasswordRequiredBanner Password="{!contact.account.Password__c}" />
            </apex:outputPanel>
        </apex:outputPanel>
        </div>
    </apex:form>
</apex:page>

public with sharing class ContactCTRL_XT {
    Contact cont {get;set;}

    public ContactCTRL_XT(ApexPages.StandardController stdController) {
        stdController.addFields(new String[]{
        'FirstName',
        'LastName',
        'Contact_Verified__c',
        'Last_Verification_Date__c'
        });

        this.cont = (Contact)stdController.getRecord();
    }

    public Boolean getIsVerified(){
        Date contactDate = cont.Last_Verification_Date__c;
        Date todaysDate = Date.today();
        if(contactDate == null){
            return false;
        }
        else{
            Date contactDatePlus14 = cont.Last_Verification_Date__c + 14;

            if(contactDatePlus14 >= todaysDate){
                return true;
            }
            else{
                return false;
            }

        }
    }

    public PageReference verifyContact(){
        Contact tempContact = new Contact(Id = cont.Id,
                                          Last_Verification_Date__c = Date.today(),
                                          Contact_Verified__c = true
                                         );

        update tempContact;

        return null;
    }
}