Skip to content

Commit 010dc76

Browse files
castawaycastaway
committed
feat(dkim): Display all users domains
Combines with backend update to check cnames instantly
1 parent ce7bea2 commit 010dc76

File tree

4 files changed

+242
-196
lines changed

4 files changed

+242
-196
lines changed

‎src/app/dkim/dkim.component.html‎

Lines changed: 99 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,121 @@
11
<mat-sidenav-container class="dkim">
2-
<mat-sidenav mode="side" open="true"></mat-sidenav>
3-
<mat-sidenav-content>
4-
<section class="mat-typography">
5-
<mat-card class='dkim'>
6-
<mat-card-header style="display: flex; width: 100%">
7-
<mat-card-title style="flex-grow: 1">
8-
<h1 class='headline'>DKIM Signing of Domain Names</h1>
9-
<h2 class='subheading-2'>{{domain}}</h2>
10-
</mat-card-title>
11-
</mat-card-header>
12-
<p>
13-
DKIM (DomainKeys Identified Mail) is an email authentication method that places a digital signature (a piece of code) in the headers of your outgoing mail. This helps receiving email servers identify if the message was genuinely sent by you, the domain owner, and confirms that certain aspects of the message have been unchanged since the digital signature was added. <a target="_blank" href="https://help.runbox.com/dkim-signing/">More information about DKIM</a>
14-
</p>
15-
<p>
16-
If you have your domain name hosted by Runbox, your DNS (Domain Name System) records are also managed by us. This makes it very easy to set up DKIM signing as you just need to activate it below. If your domain is not hosted/registered via Runbox then we probably don't host your DNS records and you will need to make some changes at your domain host/DNS host as shown below.
17-
</p>
18-
<p>
19-
The exact format required by your Domain/DNS provider's interface may vary as may what they call the "hostname" entry. If you need help please contact Runbox support or your Domain/DNS provider's support team for advice.
20-
</p>
21-
<p>
22-
<strong>Note:</strong> selector2 will become active on our DNS servers three months after you activate DKIM signing.
23-
</p>
24-
<mat-divider></mat-divider>
25-
<div *ngIf="domain && keys && keys.length" style='margin-top: 35px'>
2+
<mat-sidenav mode="side" open="true"></mat-sidenav>
3+
<mat-sidenav-content>
4+
<section class="mat-typography">
5+
<div class='dkim'>
6+
<h1 class='headline'>DKIM Signing of Domain Names</h1>
7+
<p>
8+
DKIM (DomainKeys Identified Mail) is an email authentication method that places a digital signature (a piece of code) in the headers of your outgoing mail. This helps receiving email servers identify if the message was genuinely sent by you, the domain owner, and confirms that certain aspects of the message have been unchanged since the digital signature was added. <a target="_blank" href="https://help.runbox.com/dkim-signing/">More information about DKIM</a>
9+
</p>
10+
<p>
11+
If you have your domain name hosted by Runbox, your DNS (Domain Name System) records are also managed by us. This makes it very easy to set up DKIM signing as you just need to activate it below. If your domain is not hosted/registered via Runbox then we probably don't host your DNS records and you will need to make some changes at your domain host/DNS host as shown below.
12+
</p>
13+
<p>
14+
The exact format required by your Domain/DNS provider's interface may vary as may what they call the "hostname" entry. If you need help please contact Runbox support or your Domain/DNS provider's support team for advice.
15+
</p>
16+
<p>
17+
<strong>Note:</strong> selector2 will become active on our DNS servers three months after you activate DKIM signing.
18+
</p>
19+
<mat-divider></mat-divider>
20+
21+
<ng-container *ngIf="domainService.userDomains | async as domains; else domainsLoading">
22+
<mat-accordion>
23+
<mat-expansion-panel
24+
*ngFor="let domain of domains"
25+
[expanded]="chosenDomain && domain.name === chosenDomain"
26+
(opened)="updateFragment(domain.name)"
27+
>
28+
<mat-expansion-panel-header>
29+
{{ domain.name }}
30+
</mat-expansion-panel-header>
31+
32+
<ng-container *ngIf="domain.dkim">
33+
<div *ngIf="!is_deleting_keys &&!domain.is_to_delete" style='margin-top: 35px;'>
34+
<button mat-raised-button color="warn" (click)="disable(domain.name)" style="margin-left: 20px">Disable DKIM for {{domain.name}}</button>
35+
<mat-progress-bar mode="indeterminate" *ngIf="is_creating_keys"></mat-progress-bar>
36+
</div>
37+
<div *ngIf="domain.is_to_delete">
38+
The DKIM keys are being deleted.
39+
</div>
40+
<ng-container *ngIf="!domain.is_to_delete">
2641
<mat-grid-list cols="8" rowHeight="30px" style='' *ngIf="dkim_domain">
27-
<mat-grid-tile [colspan]="2"><div class="grid_align_left" style=''><strong>{{dkim_domain.type}}:</strong></div></mat-grid-tile>
28-
<mat-grid-tile [colspan]="6">
29-
<div class="grid_align_left">
30-
<mat-form-field>
31-
<mat-label>Domain: {{domain}}</mat-label>
32-
<mat-select [(ngModel)]="domain" (change)="ev_get_domain()" (selectionChange)="ev_get_domain()" >
33-
<mat-option *ngFor="let d of dkim_domains" [value]="d.domain">
34-
{{d.domain}}
35-
</mat-option>
36-
</mat-select>
37-
</mat-form-field>
38-
</div>
39-
<div style='margin-left: 40px; display: inline-block;'>
40-
<button *ngIf="domain" mat-raised-button color="warn" (click)="disable()" style='margin-let: 20px;'>Disable DKIM for {{domain}}
41-
<mat-progress-bar mode="indeterminate" *ngIf="is_deleting_keys"></mat-progress-bar>
42-
</button>
43-
</div>
44-
</mat-grid-tile>
42+
<mat-grid-tile [colspan]="2"><div class="grid_align_left" style=''><strong>{{domain.type}}:</strong></div></mat-grid-tile>
43+
<mat-grid-tile [colspan]="6">
44+
<div style='margin-left: 40px; display: inline-block;'>
45+
<button *ngIf="domain.type" mat-raised-button color="warn" (click)="disable()" style='margin-let: 20px;'>Disable DKIM for {{domain.name}}
46+
<mat-progress-bar mode="indeterminate" *ngIf="is_deleting_keys"></mat-progress-bar>
47+
</button>
48+
</div>
49+
</mat-grid-tile>
4550
</mat-grid-list>
4651
<mat-grid-list cols="1" rowHeight="30px" style=''>
47-
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
52+
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
4853
</mat-grid-list>
4954
<mat-grid-list cols="1" rowHeight="30px" style=''>
50-
<mat-grid-tile style='border-bottom: 1px dotted #dedede'><div class="grid_align_left"><strong>DNS CNAMEs required</strong></div></mat-grid-tile>
55+
<mat-grid-tile style='border-bottom: 1px dotted #dedede'><div class="grid_align_left"><strong>DNS CNAMEs required</strong></div></mat-grid-tile>
5156
</mat-grid-list>
5257
<mat-grid-list cols="1" rowHeight="30px" style=''>
53-
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
58+
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
5459
</mat-grid-list>
5560
<mat-grid-list cols="8" rowHeight="30px" style=''>
56-
<mat-grid-tile [colspan]="3" style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"><strong>Hostname</strong></div></mat-grid-tile>
57-
<mat-grid-tile [colspan]="1" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>TTL</strong></div></mat-grid-tile>
58-
<mat-grid-tile [colspan]="1" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>Record Type</strong></div></mat-grid-tile>
59-
<mat-grid-tile [colspan]="3" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>Address</strong></div></mat-grid-tile>
61+
<mat-grid-tile [colspan]="3" style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"><strong>Hostname</strong></div></mat-grid-tile>
62+
<mat-grid-tile [colspan]="1" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>TTL</strong></div></mat-grid-tile>
63+
<mat-grid-tile [colspan]="1" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>Record Type</strong></div></mat-grid-tile>
64+
<mat-grid-tile [colspan]="3" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>Address</strong></div></mat-grid-tile>
6065
</mat-grid-list>
61-
<mat-grid-list cols="8" rowHeight="30px" style='' *ngFor="let k of keys">
62-
<mat-grid-tile [colspan]="3" style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left">{{k.selector_recordset_name}}</div></mat-grid-tile>
63-
<mat-grid-tile [colspan]="1" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">3600</div></mat-grid-tile>
64-
<mat-grid-tile [colspan]="1" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">CNAME</div></mat-grid-tile>
65-
<mat-grid-tile [colspan]="3" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">{{k.public_recordset_name}}.</div></mat-grid-tile>
66+
<mat-grid-list cols="8" rowHeight="30px" style='' *ngFor="let k of domain.keys">
67+
<mat-grid-tile [colspan]="3" style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left">{{k.selector_recordset_name}}</div></mat-grid-tile>
68+
<mat-grid-tile [colspan]="1" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">3600</div></mat-grid-tile>
69+
<mat-grid-tile [colspan]="1" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">CNAME</div></mat-grid-tile>
70+
<mat-grid-tile [colspan]="3" style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">{{k.public_recordset_name}}.</div></mat-grid-tile>
6671
</mat-grid-list>
6772
<mat-grid-list cols="1" rowHeight="30px" style=''>
68-
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
69-
<mat-grid-tile style='border-bottom: 1px dotted #dedede'><div class="grid_align_left"><strong>If you are editing your DNS zone file directly you can add the two lines below:</strong></div></mat-grid-tile>
70-
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
71-
<mat-grid-tile *ngFor="let k of keys" style='border-bottom: 1px dotted #dedede'><div class="grid_align_left">{{k.selector_recordset_name}} 3600 IN CNAME {{k.public_recordset_name}}.</div></mat-grid-tile>
73+
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
74+
<mat-grid-tile style='border-bottom: 1px dotted #dedede'><div class="grid_align_left"><strong>If you are editing your DNS zone file directly you can add the two lines below:</strong></div></mat-grid-tile>
75+
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
76+
<mat-grid-tile *ngFor="let k of keys" style='border-bottom: 1px dotted #dedede'><div class="grid_align_left">{{k.selector_recordset_name}} 3600 IN CNAME {{k.public_recordset_name}}.</div></mat-grid-tile>
7277
</mat-grid-list>
7378

7479
<mat-grid-list cols="4" rowHeight="30px" style=''>
75-
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
76-
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"></div></mat-grid-tile>
77-
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"></div></mat-grid-tile>
78-
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"></div></mat-grid-tile>
80+
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"></div></mat-grid-tile>
81+
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"></div></mat-grid-tile>
82+
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"></div></mat-grid-tile>
83+
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"></div></mat-grid-tile>
7984

80-
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"><strong>Selector status</strong></div></mat-grid-tile>
81-
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>CNAME found in DNS</strong></div></mat-grid-tile>
82-
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>Active for signing</strong></div></mat-grid-tile>
83-
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>Active from</strong></div></mat-grid-tile>
85+
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left"><strong>Selector status</strong></div></mat-grid-tile>
86+
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>CNAME found in DNS</strong></div></mat-grid-tile>
87+
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>Active for signing</strong></div></mat-grid-tile>
88+
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left"><strong>Active from</strong></div></mat-grid-tile>
8489
</mat-grid-list>
8590

86-
<mat-grid-list cols="4" rowHeight="30px" style='' *ngFor="let k of keys">
87-
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left">{{k.selector}}</div></mat-grid-tile>
88-
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'>
89-
<div class="grid_align_left">
90-
{{k.is_cname_correct ? 'Yes' : 'No'}}<a *ngIf="!k.is_cname_correct" href="javascript:void(0)" (click)="check_cname(k)">Check</a>
91-
</div>
92-
</mat-grid-tile>
93-
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">{{k.is_active ? 'Yes' : 'No'}}</div></mat-grid-tile>
94-
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">{{
95-
k.date_expected_to_activate || k.date_active || k.date_rotation_finalized || '--'
96-
}}
97-
</div></mat-grid-tile>
91+
<mat-grid-list cols="4" rowHeight="30px" style='' *ngFor="let k of domain.keys">
92+
<mat-grid-tile style='border-bottom: 1px dotted #dedede;'><div class="grid_align_left">{{k.selector}}</div></mat-grid-tile>
93+
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'>
94+
<div class="grid_align_left">
95+
{{k.is_cname_correct ? 'Yes ' : 'No '}}<button mat-flat-button color="primary" *ngIf="!k.is_cname_correct" (click)="check_cname(domain, k)">Check</button>
96+
</div>
97+
</mat-grid-tile>
98+
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">{{k.is_active ? 'Yes' : 'No'}}</div></mat-grid-tile>
99+
<mat-grid-tile style='border-bottom: 1px dotted #dedede; border-left: 1px dotted #dedede'><div class="grid_align_left">{{
100+
k.date_expected_to_activate || k.date_active || k.date_rotation_finalized || '--'
101+
}}
102+
</div></mat-grid-tile>
98103
</mat-grid-list>
104+
</ng-container>
105+
</ng-container>
106+
<div *ngIf="!domain.dkim && !is_creating_keys" style='margin-top: 35px;'>
107+
No keys found for {{domain.name}}
108+
<button mat-raised-button color="primary" (click)="create_keys()" style="margin-left: 20px">Create keys for {{domain.name}}</button>
109+
<mat-progress-bar mode="indeterminate" *ngIf="is_creating_keys"></mat-progress-bar>
99110
</div>
100-
<div *ngIf="domain && !keys.length && !is_creating_keys" style='margin-top: 35px;'>
101-
No keys found for {{domain}}
102-
<button mat-raised-button color="primary" (click)="create_keys()" style="margin-left: 20px">Create keys for {{domain}}</button>
103-
<mat-progress-bar mode="indeterminate" *ngIf="is_creating_keys"></mat-progress-bar>
104-
</div>
105-
</mat-card>
106-
</section>
107-
</mat-sidenav-content>
111+
</mat-expansion-panel>
112+
</mat-accordion>
113+
</ng-container>
114+
<ng-template #domainsLoading>
115+
<app-runbox-loading text="Loading your domains...">
116+
</app-runbox-loading>
117+
</ng-template>
118+
</div>
119+
</section>
120+
</mat-sidenav-content>
108121
</mat-sidenav-container>

0 commit comments

Comments
 (0)