Page History

...

Panel

SP Tabs group

disposition	horizontal

SP Tab pane

anchor	2028214376
name	Domain Certificates

Domain certificates

HTML
<div id="ssltable">

Filter

HTML

<!-- Filter -->
<div class="filter row">
 <div class="col checkbox-inline">
    <h3 class="filter-options">Validation Type</h3>
	<div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.validationType"
          value="DV"
          checked
        />
        DV
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.validationType"
          value="OV"
          checked
        />
        OV
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.validationType"
          value="EV"
          checked
        />
        EV
      </label>
    </div>
 </div>
<div class="col checkbox-inline">
    <h3 class="filter-options">Certificate Authority</h3> 
	<div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="DigiCert" checked /> DigiCert</label>
	</div><!--
 	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="GlobalSign" checked /> GlobalSign</label>
	</div><!--
  	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="Sectigo" checked /> Sectigo</label>
	</div><!--   
 	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="GeoTrust" checked /> GeoTrust (DigiCert)</label>
	</div><!--     
	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="InstantSSL" checked /> InstantSSL</label>
	</div><!--     
	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="PositiveSSL" checked /> PositiveSSL</label>
	</div><!--     
	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="Thawte" checked /> Thawte (DigiCert)</label>
	</div><!--     
	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="RapidSSL" checked /> RapidSSL (DigiCert)</label>
	</div>
  </div> 
<div class="col checkbox-inline">
    <h3 class="filter-options">DCV Methods</h3>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.authMethods"
          value="DNS"
          checked
        />
        DNS
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.authMethods"
          value="FILE"
          checked
        />
        FILE
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.authMethods"
          value="EMAIL"
          checked
        />
        EMAIL
      </label>
    </div>
  </div>
<div class="col checkbox-inline">
    <h3 class="filter-options">Lifetime</h3><!--          
	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.lifetime" value="12" checked/>12</label>
    </div><!--     
	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.lifetime" value="24" checked/>24</label>
    </div><!--  
	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.lifetime" value="36" checked/>36</label>
    </div><!--
 	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.lifetime" value="48" checked/>48</label>
    </div><!-- 
 	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.lifetime" value="60" checked/>60</label>
    </div>
</div>
  <div class="col checkbox-inline">
    <h3 class="filter-options">Other</h3>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.sanSupported"
          value="true"
          checked
        />
        SAN
      </label>
    </div>
 	<div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.siteSealSupported"
          value="true"
          checked
        />
        Site Seal
      </label>
    </div>
 	<div class="checkbox">
	  <label>
		<input
		  type="checkbox"
		  v-model="pagination.sanIncluded"
          value="true"
          checked
		/>
		www included
	  </label>
	</div>
	<div class="checkbox">
	  <label>
		<input
		  type="checkbox"
		  v-model="pagination.wildcard"
          value="true"
          checked
		/>
		Wildcard
	  </label>
	</div> 
  </div>
</div>

HTML

<!-- Search and pagination -->
<br>					
<div class="filter row">
   <div class="col-md-6">
      <div class="pull-left">
         <input class="text" placeholder="Product Search" type="text" v-model=pagination.search>
         <div class="aui-button" @click="clearSearch()"><span class="aui-icon aui-icon-small aui-iconfont-remove-label"></span></div>
      </div>
   </div>
   <div class="col-md-6">
      <div class="pull-right">
         <label for="selectRow">Show</label>
         <select class="select" style="max-width: 80px;" v-model=pagination.rowsPerPage id="selectRow">
            <option v-for="option in rows_per_page" v-bind:value="option">
               {{ option }}
            </option>
         </select>
         <span>von {{pagination.totalItems}}</span>
         <div class="aui-button" @click="pageDown()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-left"></span></div>
         <span>Seite {{pagination.page}} / {{maxPage}}</span> 
         <div class="aui-button" @click="pageUp()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-right"></span></div>
      </div>
   </div>
</div>
<br>

HTML

<!-- Table -->
<table class="relative-table wrapped confluenceTable" width="100%">
    <tr>
        <th v-for="header in headers" class="confluenceTh">{{header}}</th>
    </tr>
    <template v-for="(item,index) in items">
        <tr>
            <td class="confluenceTd">{{item.name}}</td>
    
            <td class="confluenceTd">{{item.certificateType}}</td>
      
            <td class="confluenceTd">{{item.validationType}}</td>

            <td class="confluenceTd">
                <span v-for="(element, index) in item.periods">
    				<span v-if="index != 0">, </span><span>{{ element }}</span>
  				</span>
            </td>
     
            <td class="confluenceTd">
		        <span v-if="item.san.max > 0" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
		        <span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
            </td>
   
            <td class="confluenceTd">
                <span v-for="(element, index) in item.authMethods">
    				<span v-if="index != 0">, </span><span>{{ element }}</span>
  				</span>
            </td>
 			<td class="confluenceTd"><div class="aui-button" @click="item.contentVisible = !item.contentVisible"><span class="aui-icon aui-icon-small aui-iconfont-more"></span></div></td>
        </tr>
        <tr v-show="item.contentVisible">
 			<td :colspan="headers.length" style="padding:10px; background: #e9f3f9;">
 				<div class="filter row">
					<div class="col-md-3">
						<h4>Further Information</h4>
					 	<table>
							<tr>
        						<td>Wildcard </td>
								<td>
        							<span v-if="item.wildcard" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
           							<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span>
								</td>
    						</tr>
<tr><td>Productname (API):</td><td>{{item.label}}</td></tr>
        						<template v-if="item.siteSealLocation != null">
		  						<tr>
        						<td>Site Seal Location: </td>
								<td>
        							{{item.siteSealLocation}}
								</td>
    							</tr> 
						 	</template>    </table>
						<template v-if="item.csr != null">
							<h4>CSR Informationen</h4>
							<table>
                                <template v-if="item.csr.algorithms != null">
									<template v-for="(element) in item.csr.algorithms">
										<tr>
											<td>{{element.keyAlgorithm}}:</td>
											<td>  											 	
												<template v-if="element.curves == null"><span v-for="(e, index) in element.keySizes"><span v-if="index != 0">, </span><span>{{ e }}</span></span></template>
												<template v-else><span v-for="(e, index) in element.curves"><span v-if="index != 0">, </span><span>{{ e }}</span></span></template>
											</td>
										</tr>
									</template>
								</template>
							</table>
						</template>
						<template v-if="item.san.max > 0">
							<h4>SAN Information</h4>
							<table>
								<tr>
        							<td>Maximum SAN:</td>
									<td>{{item.san.max}}</td>
    							</tr>
                                <template v-if="item.san.supportedSanTypes != null">
									<tr>
										<td>SAN Types:</td>
										<td>
                							<span v-for="(element, index) in item.san.supportedSanTypes">
    											<span v-if="index != 0">, </span><span>{{ element }}</span>
  											</span>
            							</td>
									</tr>
								</template>
								<template v-if="item.san.freeSubSan != null">
									<td>Free Subdomain SANs:</td>
									<td>
                						<span v-for="(element, index) in item.san.freeSubSan">
    											<span v-if="index != 0">, </span><span>{{ element }}</span>
  										</span>
            						</td>
								</template>
								<template>
									<tr>
										<td>Included:</td>
										<td>{{item.san.inclusive}}</td>
									</tr>
								</template>
							</table>
						</template>
					 <template v-if="item.fileAuth != null && item.dnsAuth != null">
              			<h4> Display DCV Token </h4>
            			<table>
                			<tr>
                    			<td>Display on File Validation</td>
                  				<td v-if="item.fileAuth === 'pre_send'">before placing an order</td>
                    			<td v-else-if="item.fileAuth === 'post_send'">after placing an order </td>
                    			<td v-else-if="item.fileAuth === 'invalid'">invalid</td>
                			</tr>
                			<tr>
                      			<td>Display on DNS Validation </td> 
                      			<td v-if="item.dnsAuth === 'pre_send'">before placing an order</td>
                      			<td v-else-if="item.dnsAuth === 'post_send'">after placing an order</td>
                      			<td v-else-if="item.dnsAuth === 'invalid'">invalid</td>
                			</tr>
              			</table>
          			</template>
					</div>
            		<div class="col-md-6">
                		<h4>Hint</h4>
                		<template v-if="item.priceListInformation.length > 0">
                    		<ul>
                        		<template v-for="restriction in item.priceListInformation">
                            		<li v-if="restriction.labelTranslation.en != null">
										<p v-html="restriction.labelTranslation.en"></p>
                            		</li>
                        		</template>
                    		</ul>
                		</template>
						<template v-if="item.priceListInformation.length == 0">
                    		<p>There are no separate instructions for this product.</p>
                		</template>
  					</div>
					<div class="col-md-3">
   						<template v-for="controller in item.dataControllers">
       	 					<h4>Data processor</h4>
        					<p><template v-if="!isEmpty(controller.name)">{{controller.name}}<br></template><template v-for="line in controller.address">{{line}}<br></template></p>
    					</template>
					</div>
				</div>
			</td>
        </tr>
    </template>
</table>

HTML

<!-- Javascript -->
<script type="text/javascript">
AJS.$("#searchForm").submit(function(e){
    return false;
});
Vue.config.devtools = true;
    var app = new Vue({
        el: '#ssltable',
        data: {
            message: '',
            headers: ['Product', 'Certificate Type', 'Validation Type', 'Livetime in Months', 'SAN', 'DCV','More'],
            search: '',
            totalItems: 0,
            rows_per_page: [10, 20, 50],
			maxPage: 0,
			pageChanged: false,
			items: [],
            pagination: {
                rowsPerPage: 10,
descending: false,
page:               descending: false,
                page: 1,
                sortBy: null,
                1,
sortBy: null,
totalItems: 1,
                search: "",
				validationType: ['DV','OV','EV'],
				certificateAuthority: ['DigiCert','GlobalSign','Sectigo', 'GeoTrust', 'Thawte', 'RapidSSL', 'InstantSSL', 'PositiveSSL'],
				authMethods: ['DNS','FILE','EMAIL'],
				lifetime: ['12','24','36','48','60'],
                sanSupported: false,
				siteSealSupported: false,
 				],
sanSupported: false,
siteSealSupported:false,
sanIncluded:false,
				wildcard: false,
			},
        },
        mounted() {
			var privacy = location.search.split('privacy=')[1]
			if(privacy == "true"){
				this.pagination.privacy = true;
			}
 			 this.getProducts();
        },
  		watch: {
            pagination: {
				handler() {
					if(!this.pageChanged){
						this.pagination.page = 1;
					}else{
						this.this.pageChanged = false;
  					 }
					this.getProducts();
				},
				deep:true
			 }
        },      
        methods: {
            getProducts() {
console.log("Load products");
                axios.get(`https://api.autodns.com/productstore/v1/ssl/_paginate?page=${this.pagination.page-1}&size=${this.pagination.rowsPerPage}&certificateType[]=FQDN`, {
                        params: {
                            keyword: this.pagination.search,
							validationTypevalidationType: this.pagination.validationType,
                            certificateAuthority: this.pagination.certificateAuthority,
                            sanSupported: this.pagination.sanSupported,
							lifetime: this.pagination.lifetime,
                        	authMethods: this.pagination.authMethods,
						 	siteSealSupported: this.pagination.siteSealSupported,
 							sanIncluded: this.pagination.sanIncluded,
							wildcard: this.pagination.wildcard ? this.pagination.wildcard : undefined,
					   }
                    })
                    
}
})
.then((response) => {
console.log(response);
                        var data = response.data.content;
						data.forEach(function(element) {
  							element.contentVisible = false;
						});
						this.items = data;
 						this.pagination.totalItems = response.data.totalElements;
						this.maxPage = response.data.totalPages;
                                           
})
                    .catch((e) => {
                        console.log('handle server error from here');
                    console.log(e);
});


            },
            printTimePeriod(val) {
                if (val == null) {
                    (val) {
if (val == null) {
return "";
                }
                return val['period'] + val['unit'];
            },
            pageUp() {
				if(this.pagination.page + 1 <= this.maxPage){
                	this.pagination.page = this.pagination.page + 1;
				}
				this.pageChanged = true;
 			 },
            pageDown() {
                pageDown() {
this.pagination.page = this.pagination.page - 1;
                if (this.pagination.page < 1) {
                    this.pagination.page = 1;
                }
				this.pageChanged = true;
			},
            showRow(item) {
 				 console.log("show data for " + item.label);
				console.log(item.contentVisible);
				item.contentVisible = !item.contentVisible;
				console.log(item.contentVisible);
            },
			isEmpty(str) {
				return (!str || 0 === str.length);
			},
			clearSearch() {
				this.pagination.search = "";
			},
 		 }
    })
</script>

HTML
</div>

SP Tab pane

anchor	875668364
name	S/MIME Certificates

S/MIME Certificates

HTML
<div id="smimetable">

Filter

HTML

<!-- Filter SMIME -->
<div class="filter row">
 <div class="col checkbox-inline">
    <h3 class="filter-options">Validation Type</h3>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.validationType"
          value="DV"
          checked
        />
        DV
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.validationType"
          value="OV"
          checked
        />
        OV
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.validationType"
          value="EV"
          checked
        />
        EV
      </label>
    </div>
  </div>
<div class="col checkbox-inline">
    <h3 class="filter-options">Certificate Authority</h3><!--     
	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="DigiCert" checked /> DigiCert</label>
	</div><!--
	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="GlobalSign" checked /> GlobalSign</label>
	</div><!--
  	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="Sectigo" checked /> Sectigo</label>
	</div>
</div>
<div class="col checkbox-inline">
    <h3 class="filter-options">Lifetime</h3>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.lifetime"
          value="12"
          checked
        />
        12
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.lifetime"
          value="24"
          checked
        />
        24
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.lifetime"
          value="36"
          checked
        />
        36
      </label>
    </div>
  </div>
</div>

HTML

<!-- Search and pagination -->
<br>					
<div class="filter row">
   <div class="col-md-6">
      <div class="pull-left">
         <input class="text" placeholder="Product Search" type="text" v-model=pagination.search>
         <div class="aui-button" @click="clearSearch()"><span class="aui-icon aui-icon-small aui-iconfont-remove-label"></span></div>
      </div>
   </div>
   <div class="col-md-6">
      <div class="pull-right">
         <label for="selectRow">Zeige</label>
         <select class="select" style="max-width: 80px;" v-model=pagination.rowsPerPage id="selectRow">
            <option v-for="option in rows_per_page" v-bind:value="option">
               {{ option }}
            </option>
         </select>
         <span>von {{pagination.totalItems}}</span>
         <div class="aui-button" @click="pageDown()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-left"></span></div>
         <span>Seite {{pagination.page}} / {{maxPage}}</span> 
         <div class="aui-button" @click="pageUp()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-right"></span></div>
      </div>
   </div>
</div>
<br>

HTML

<!-- Table -->
<table class="relative-table wrapped confluenceTable" width="100%">
    <tr>
        <th v-for="header in headers" class="confluenceTh">{{header}}</th>
    </tr>
    <template v-for="(item,index) in items">
        <tr>
            <td class="confluenceTd">{{item.name}}</td>
    
            <td class="confluenceTd">{{item.certificateType}}</td>
      
            <td class="confluenceTd">{{item.validationType}}</td>

            <td class="confluenceTd">
                <span v-for="(element, index) in item.periods">
    				<span v-if="index != 0">, </span><span>{{ element }}</span>
  				</span>
            </td>
			<td class="confluenceTd"><div class="aui-button" @click="item.contentVisible = !item.contentVisible"><span class="aui-icon aui-icon-small aui-iconfont-more"></span></div></td>
        </tr>
		<tr v-show="item.contentVisible">
 			<td :colspan="headers.length" style="padding:10px; background: #e9f3f9;">
 				<div class="filter row">
					<div class="col-md-3">
<span><h4>Further Information</h4><table><tr><td>Productname (API):</td><td>{{item.label}}</td></tr></table></span>
<template v-if="item.clientInformation != null">
							<h4>S/MIME Information</h4>
							<table>
								<tr>
        							Usage: {{getTranslation(item.clientInformation.digitalIdUsage)}}
    							</tr>
                                <template v-if="item.clientInformation.features != null">
									<tr>
											Functions:
											
                							<span v-for="(element, index) in item.clientInformation.features">
												<span v-if="index != 0">, </span><span>{{ getTranslation(element) }}</span>
  											</span>
            							
									</tr>
								</template>
							</table>
						</template>
						<template v-if="item.csr != null">
							<h4>CSR Informationen</h4>
							<table>
                                <template v-if="item.csr.algorithms != null">
									<template v-for="(element) in item.csr.algorithms">
										<tr>
											<td>{{element.keyAlgorithm}}:</td>            
											<td>
											 	<template v-if="element.curves == null"><span v-for="(e, index) in element.keySizes"><span v-if="index != 0">, </span><span>{{ e }}</span></span></template>
												<template v-else><span v-for="(e, index) in element.curves"><span v-if="index != 0">, </span><span>{{ e }}</span></span></template>
            								</td>           
										</tr>
									</template>
								</template>
							</table>
						</template>
					</div>
            		<div class="col-md-6">
                		<h4>Hint</h4>
                		<template v-if="item.priceListInformation.length > 0">
                    		<ul>
                        		<template v-for="restriction in item.priceListInformation">
                            		<li v-if="restriction.labelTranslation.en != null">
                                		{{ restriction.labelTranslation.en }}
                            		</li>
                        		</template>
                    		</ul>
                		</template>
						<template v-if="item.priceListInformation.length == 0">
                    		<p>There are no separate instructions for this product.</p>
                		</template>
  					</div>
					<div class="col-md-3">
   						<template v-for="controller in item.dataControllers">
       	 					<h4>Data processor</h4>
        					<p><template v-if="!isEmpty(controller.name)">{{controller.name}}<br></template><template v-for="line in controller.address">{{line}}<br></template></p>
    					</template>
					</div>
				</div>
			</td>
        </tr>
    </template>
</table>

HTML

<!-- Javascript -->
<script type="text/javascript">
AJS.$("#searchForm").submit(function(e){
return false;
});
Vue.config.devtools = true;
var app = new Vue({
el: '#smimetable',
data: {
message: '',
headers: ['Product', 'Certificate Type', 'Validation Type', 'Lifetime in Months','More'],
search: '',
totalItems: 0,
rows_per_page: [10, 20, 50],
maxPage: 0,
pageChanged: false,
items: [],
pagination: {
rowsPerPage: 10,
descending: false,
page: 1,
sortBy: null,
totalItems: 1,
search: "",
validationType: ['DV','OV','EV'],
certificateAuthority: ['DigiCert','GlobalSign', 'Sectigo'],
lifetime: ['12','24','36'],
},
},
mounted() {
var privacy = location.search.split('privacy=')[1]
if(privacy == "true"){
this.pagination.privacy = true;
}
  this.getProducts();
},
watch: {
pagination: {
handler() {
if(!this.pageChanged){
this.pagination.page = 1;
}else{
this.pageChanged = false;
   }
this.getProducts();
},
deep:true
}
}, 
methods: {
getProducts() {
console.log("Load products");
axios.get(`https://api.autodns.com/productstore/v1/ssl/_paginate?page=${this.pagination.page-1}&size=${this.pagination.rowsPerPage}&certificateType[]=MAIL`, {
params: {
keyword: this.pagination.search,
validationType: this.pagination.validationType,
certificateAuthority: this.pagination.certificateAuthority,
lifetime: this.pagination.lifetime,
}
})
.then((response) => {
var data = response.data.content;
data.forEach(function(element) {
element.contentVisible = false;
});
this.items = this.items = data.filter((x) => x.public === true);
this.pagination.totalItems = response.data.totalElements;
this.maxPage = response.data.totalPages; 
})
.catch(() => {
console.log('handle server error from here');
});


},
getTranslation(val){
if(val == "COMPANY"){
return "For a person who represents a company";
}
if(val == "GENERAL"){
return "For general use";
}
if(val == "DEPARTMENT"){
return "For one department";
}
if(val == "PERSONAL"){
return "To represent yourself";
}
if(val == "CLIENT_AUTHENTICATION"){
return "Authentication";
}
if(val == "DOCUMENT_SIGNING"){
return "Sign Document";
}
if(val == "EMAIL_ENCRYPTION"){
return "Encrypt Email";
}
if(val == "EMAIL_SIGNING"){
return "Sign Email";
}
return val;
},
printTimePeriod(val) {
if (val == null) {
return "";
}
return val['period'] + val['unit'];
},
pageUp() {
if(this.pagination.page + 1 <= this.maxPage){
this.pagination.page = this.pagination.page + 1;
}
this.pageChanged = true;
  },
pageDown() {
this.pagination.page = this.pagination.page - 1;
if (this.pagination.page < 1) {
this.pagination.page = 1;
}
this.pageChanged = true;
},
showRow(item) {
  console.log("show data for " + item.label);
console.log(item.contentVisible);
item.contentVisible = !item.contentVisible;
console.log(item.contentVisible);
},
isEmpty(str) {
return (!str || 0 === str.length);
},
clearSearch() {
this.pagination.search = "";
},
  }
})
</script>

HTML
</div>

SP Tab pane

anchor	750170868
name	Other Certificates

Other Certificates

HTML
<div id="codetable">

Filter

HTML

<!-- Filter -->
<div class="filter row">
 <div class="col checkbox-inline">
    <h3 class="filter-options">Validation Type</h3>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.validationType"
          value="OV"
          checked
        />
        OV
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input
          type="checkbox"
          v-model="pagination.validationType"
          value="EV"
          checked
        />
        EV
      </label>
    </div>
  </div>
 <div class="col checkbox-inline">
    <h3 class="filter-options">Certificate Authority</h3> 
	<div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="DigiCert" checked /> DigiCert</label>
	</div><!--   
  	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="Sectigo" checked /> Sectigo</label>
	</div><!--   
  	--><div class="checkbox">
      <label><input type="checkbox" v-model="pagination.certificateAuthority" value="Globalsign" checked /> Globalsign</label>
	</div>   
</div>  
 </div>

HTML

<!-- Search and pagination -->
<br>					
<div class="filter row">
   <div class="col-md-6">
      <div class="pull-left">
         <input class="text" placeholder="Product Search" type="text" v-model=pagination.search>
         <div class="aui-button" @click="clearSearch()"><span class="aui-icon aui-icon-small aui-iconfont-remove-label"></span></div>
      </div>
   </div>
   <div class="col-md-6">
      <div class="pull-right">
         <label for="selectRow">Zeige</label>
         <select class="select" style="max-width: 80px;" v-model=pagination.rowsPerPage id="selectRow">
            <option v-for="option in rows_per_page" v-bind:value="option">
               {{ option }}
            </option>
         </select>
         <span>von {{pagination.totalItems}}</span>
         <div class="aui-button" @click="pageDown()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-left"></span></div>
         <span>Seite {{pagination.page}} / {{maxPage}}</span> 
         <div class="aui-button" @click="pageUp()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-right"></span></div>
      </div>
   </div>
</div>
<br>

HTML

<!-- Table -->
<table class="relative-table wrapped confluenceTable" width="100%">
    <tr>
        <th v-for="header in headers" class="confluenceTh">{{header}}</th>
    </tr>
    <template v-for="(item,index) in items">
        <tr>
            <td class="confluenceTd">{{item.name}}</td>
    
            <td class="confluenceTd">{{item.certificateType}}</td>
      
            <td class="confluenceTd">{{item.validationType}}</td>

            <td class="confluenceTd">
                <span v-for="(element, index) in item.periods">
    				<span v-if="index != 0">, </span><span>{{ element }}</span>
  				</span>
            </td>
     
            <td class="confluenceTd"><div class="aui-button" @click="item.contentVisible = !item.contentVisible"><span class="aui-icon aui-icon-small aui-iconfont-more"></span></div></td>
        </tr>
		<tr v-show="item.contentVisible">
 			<td :colspan="headers.length" style="padding:10px; background: #e9f3f9;">
 				<div class="filter row">
					<div class="col-md-3"><span><h4>Further Information</h4><table><tr><td>Productname (API):</td><td>{{item.label}}</td></tr></table></span>       <template v-if="item.codeSigningInformation != null">
							<h4>Code Signing Informationen</h4>
							<table>
                                <template v-if="item.codeSigningInformation.codeSigningSoftwarePlatform != null">
									<tr>
										Platformen:
										
                							<span v-for="(element, index) in item.codeSigningInformation.codeSigningSoftwarePlatform">
    											<span v-if="index != 0">, </span><span>{{ getTranslation(element) }}</span>
  											</span>
            							
									</tr>
								</template>
							</table>
						</template>
						<template v-if="item.csr != null">
							<h4>CSR Informationen</h4>
							<table>
                                <template v-if="item.csr.algorithms != null">
									<template v-for="(element) in item.csr.algorithms">
										<tr>
											<td>{{element.keyAlgorithm}}:</td>            
											<td>
											 	<template v-if="element.curves == null"><span v-for="(e, index) in element.keySizes"><span v-if="index != 0">, </span><span>{{ e }}</span></span></template>
												<template v-else><span v-for="(e, index) in element.curves"><span v-if="index != 0">, </span><span>{{ e }}</span></span></template>
            								</td>           
										</tr>
									</template>
								</template>
							</table>
						</template>
					</div>
            		<div class="col-md-6">
                		<h4>Hint</h4>
                		<template v-if="item.priceListInformation.length > 0">
                    		<ul>
                        		<template v-for="restriction in item.priceListInformation">
                            		<li v-if="restriction.labelTranslation.en != null">
                                		{{ restriction.labelTranslation.en }}
                            		</li>
                        		</template>
                    		</ul>
                		</template>
						<template v-if="item.priceListInformation.length == 0">
                    		<p>There are no separate instructions for this product.</p>
                		</template>
  					</div>
					<div class="col-md-3">
   						<template v-for="controller in item.dataControllers">
       	 					<h4>Data processor</h4>
        					<p><template v-if="!isEmpty(controller.name)">{{controller.name}}<br></template><template v-for="line in controller.address">{{line}}<br></template></p>
    					</template>
					</div>
				</div>
			</td>
        </tr>
    </template>
</table>

HTML

<!-- Javascript -->
<script type="text/javascript">
AJS.$("#searchForm").submit(function(e){
return false;
});
Vue.config.devtools = true;
var app = new Vue({
el: '#codetable',
data: {
message: '',
headers: ['Product', 'Certificate Type', 'Validation Type', 'Livetime in Months', 'More'],
search: '',
totalItems: 0,
rows_per_page: [10, 20, 50],
maxPage: 0,
pageChanged: false,
items: [],
pagination: {
rowsPerPage: 10,
descending: false,
page: 1,
certificateAuthority: ['DigiCert','Sectigo','GlobalSign'],
sortBy: null,
totalItems: 1,
search: "",
validationType: ['OV','EV'],
tldType: ['CCTLD','GTLD','NEW_GTLD'],
tldContinent: [],
tldGeoPol: [],
tldLanguageOfOffice: [],
tldCategory: [],
   authinfo: false,
dnssec:false,
privacy:false,
trustee:false,
premium: false,
thirdlevel: false,
 contactExtensions: false,
},
},
mounted() {
var privacy = location.search.split('privacy=')[1]
if(privacy == "true"){
this.pagination.privacy = true;
}
  this.getProducts();
},
watch: {
pagination: {
handler() {
if(!this.pageChanged) {
this.pagination.page = 1;
} else {
this.pageChanged = false;
   }
this.getProducts();
},
deep:true
}
}, 
methods: {
getProducts() {
console.log("Load products");
axios.get(`https://api.autodns.com/productstore/v1/ssl/_paginate?page=${this.pagination.page-1}&size=${this.pagination.rowsPerPage}&certificateType[]=CODE&certificateType[]=VMC&certificateType[]=DOCUMENT`, {
params: {
keyword: this.pagination.search,
validationType: this.pagination.validationType,
certificateAuthority: this.pagination.certificateAuthority,        
}
})
.then((response) => {
var data = response.data.content;
data.forEach(function(element) {
element.contentVisible = false;
});
this.items = data;
this.pagination.totalItems = response.data.totalElements;
this.maxPage = response.data.totalPages;
})
.catch(() => {
console.log('handle server error from here');
});
},
getTranslation(val) {
if (val == "JAVASOFT"){
return "Java";
}
if (val == "MS_AUTHENTICODE"){
return "Microsoft Applikations and Kernel Software";
}
if (val == "VBA"){
return "Visual Basic Applications & Macros";
}
if (val == "ADOBE_AIR"){
return "Adobe Air";
}
if (val == "APPLE"){
return "Apple";
}
return val;
},
printTimePeriod(val) {
if (val == null) {
return "";
}
return val['period'] + val['unit'];
},
pageUp() {
if(this.pagination.page + 1 <= this.maxPage){
this.pagination.page = this.pagination.page + 1;
}
this.pageChanged = true;
  },
pageDown() {
this.pagination.page = this.pagination.page - 1;
if (this.pagination.page < 1) {
this.pagination.page = 1;
}
this.pageChanged = true;
},
showRow(item) {
  console.log("show data for " + item.label);
console.log(item.contentVisible);
item.contentVisible = !item.contentVisible;
console.log(item.contentVisible);
},
isEmpty(str) {
return (!str || 0 === str.length);
},
clearSearch() {
this.pagination.search = "";
},
  }
})
</script>

HTML
</div>

...

Versions Compared

Old Version 56

New Version Current

Key

Domain certificates

S/MIME Certificates

Other Certificates