Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(dkim): Improved text and layout. Added troubleshooting tips #280

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

fix(dkim): Improved text and layout. Added troubleshooting tips #280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5445da4
fix(dkim): Improve layout, formatting, and text strings.
gtandersen Aug 30, 2019
b7326e2
fix(dkim): Improved text and layout. Added troubleshooting tips.
gtandersen Sep 1, 2019
d48cf61
fix(dkim): Delinting.
gtandersen Sep 1, 2019
4ac1b85
Merge branch 'master' into geir/dkim-fixes
gtandersen Sep 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 38 additions & 21 deletions src/app/dkim/dkim.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,28 @@
<mat-card class='dkim'>
<mat-card-header style="display: flex; width: 100%">
<mat-card-title style="flex-grow: 1">
<h1>DKIM Signing of Domain Names</h1>
<h1>DKIM Signing of Email</h1>
</mat-card-title>
</mat-card-header>
<p>
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 href="https://help.runbox.com/dkim-signing/">More information about DKIM</a>
</p>
<h2>DKIM and DNS</h2>
<p>
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.
</p>
<p>
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.
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 by creating DKIM keys for your domain name. If your domain is not hosted with Runbox you will need to make some changes at your domain host/DNS host as shown below.
</p>
<h2>DKIM signatures and key rotation</h2>
<p>
Once the DKIM keys are created, the Runbox system will start signing outgoing messages from your domain name. Recipients will then be able to compare the signature in your outgoing messages with the DNS record for your domain name.
</p>
<p>
For security reasons, the DKIM keys are automatically rotated (changed) every 3 months. This is reflected in DKIM details below.
</p>
<mat-divider></mat-divider>
<br />
<h2>Your DKIM keys</h2>
<mat-accordion *ngIf="keys.length" [multi]="true" style="margin-top: 20px">
<mat-expansion-panel *ngFor="let item of keys; let i = index" expanded="true">
<mat-expansion-panel *ngFor="let item of keys; let i = index" expanded="false">
<mat-expansion-panel-header>
<mat-panel-title>
<strong>DKIM Key #{{i}}: </strong>&nbsp;
Expand Down Expand Up @@ -69,19 +77,6 @@ <h2 style="margin-top: 30px">Tips to manually configure the DKIM keys:</h2>
<pre>
{{item.selector_recordset_name}} 3600 IN CNAME {{item.public_recordset_name}}
</pre>
<p>
To check the CNAME records, you can use the "dig" command such as in this example:
</p>
<pre>
dig -t CNAME selector1._domainkey.usefulphysics.uk.
</pre>
<p>
...and the expected response would be:
</p>
<pre>
;; ANSWER SECTION:
{{item.selector_recordset_name}} 3600 IN CNAME {{item.public_recordset_name}}
</pre>

<div *ngIf="item.is_cname_hosted_by_runbox && !item.is_cname_correct">
<button mat-raised-button color="primary" (click)="reconfigure(item)">Reconfigure *</button>
Expand All @@ -95,16 +90,38 @@ <h2 style="margin-top: 30px">Tips to manually configure the DKIM keys:</h2>
</mat-expansion-panel>

</mat-accordion>
<mat-divider></mat-divider>
<br />
<div *ngIf="!domain">
Please select a domain to continue.
</div>
<div *ngIf="domain && !keys.length && !is_creating_keys">
No keys found for {{domain}}
<button mat-raised-button color="primary" (click)="create_keys()" style="margin-left: 20px">Create keys for {{domain}}</button>
</div>
<br />
<mat-progress-bar mode="indeterminate" *ngIf="is_creating_keys"></mat-progress-bar>
<mat-divider></mat-divider>
<br />
<h2>Troubleshooting</h2>
<p>
<mat-icon color="primary" class="lightBulb">wb_incandescent</mat-icon>&nbsp;
<strong>My DKIM signed email is being rejected by the recipient(s). How do I correct this problem?</strong>
<br />
Make sure that your DNS CNAME record is correct, and that your DMARC record (if any) corresponds with your intended results.
</p>
<p>
<mat-icon color="primary" class="lightBulb">wb_incandescent</mat-icon>&nbsp;
<strong>How do I check that my CNAME records are correct?</strong>
<br />
To check your CNAME records, you can use the "dig" command from a command prompt, as in this example:
</p>
<pre>
dig -t CNAME selector1._domainkey.usefulphysics.uk.</pre>
<p>
...and the expected response would be:
</p>
<pre>
;; ANSWER SECTION:
{{item.selector_recordset_name}} 3600 IN CNAME {{item.public_recordset_name}}</pre>
</mat-card>
</section>
</mat-sidenav-content>
Expand Down
3 changes: 2 additions & 1 deletion src/app/dkim/dkim.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { MatTableModule, MatSnackBarModule, MatPaginatorModule,
MatCheckboxModule, MatDialogModule, MatProgressBarModule,
MatProgressSpinnerModule, MatTabsModule, MatSelectModule, MatListModule,
MatGridListModule,
MatInputModule, MatCardModule, MatChipsModule, MatButtonModule } from '@angular/material';
MatInputModule, MatCardModule, MatChipsModule, MatButtonModule, MatIconModule } from '@angular/material';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatSidenavModule } from '@angular/material/sidenav';
import { FormsModule } from '@angular/forms';
Expand Down Expand Up @@ -56,6 +56,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
MatSelectModule,
MatButtonModule,
MatGridListModule,
MatIconModule,
],
exports: [ DkimComponent ],
declarations: [ DkimComponent ],
Expand Down
21 changes: 16 additions & 5 deletions src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,6 @@ $custom-typography: mat-typography-config(
@include angular-material-typography($custom-typography);
@include mat-core($custom-typography);

mat-form-field {
/* This is for iOS not to zoom in when focusing on text fields */
font-size: 16px !important;
}

/* Generic styles */

html {
Expand Down Expand Up @@ -86,6 +81,11 @@ h5 {

/* Generic MD styles */

.mat-body p, .mat-body-1 p, .mat-typography p {
font-size: 16px;
line-height: 1.25em;
}

.mat-list[dense] .mat-list-item .mat-list-text, .mat-nav-list[dense] .mat-list-item .mat-list-text>* {
padding: 0px 10px !important;
font-weight: 400;
Expand Down Expand Up @@ -136,6 +136,12 @@ mat-grid-tile.tableTitle {
padding: 3em;
}

mat-form-field {
/* This is for iOS not to zoom in when focusing on text fields */
font-size: 16px !important;
}


/* Palette colors */

.themePalettePrimary {
Expand Down Expand Up @@ -499,6 +505,11 @@ a.mainMenu, mat-menu a, .mat-nav-list a {
text-decoration: underline;
}

.lightBulb {
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}

/* Folders */

.mailFolder {
Expand Down