mirror of
https://github.com/moparisthebest/mail
synced 2024-12-23 15:58:49 -05:00
[WO-524] Cleanup login ui
* Make design more mobile friendly * Make label for terms agreement clickable (easier for touch) * Button width is 100% for mobile * Let user import key file as alternative to sync * Make key import option more clear login-initial * Make whiteout logo smaller in mobile mode
This commit is contained in:
Tankred Hase
parent
2b139578f0
commit
9b618cc20f
@ -9,20 +9,15 @@
|
||||
|
||||
.logo {
|
||||
max-width: 700px;
|
||||
margin: 75px auto;
|
||||
margin: 45px auto;
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-width: 50%;
|
||||
width: 320px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@include respond-to(desktop) {
|
||||
margin-top: 135px;
|
||||
img {
|
||||
margin-left: 0;
|
||||
}
|
||||
margin: 135px auto 75px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,6 +34,16 @@
|
||||
color: $color-blue;
|
||||
}
|
||||
|
||||
button, a.btn {
|
||||
color: $btn-color;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
@include respond-to(mobile) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
p, label {
|
||||
line-height: 150%;
|
||||
}
|
||||
@ -90,13 +95,6 @@
|
||||
color: green;
|
||||
}
|
||||
|
||||
.opt-in-terms {
|
||||
.checkbox-wrapper {
|
||||
margin-top: 0;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-info {
|
||||
display: none; // hide on mobile
|
||||
}
|
||||
@ -119,9 +117,6 @@
|
||||
|
||||
.view-login-initial {
|
||||
.content {
|
||||
button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
<div class="content" ng-switch on="state.ui">
|
||||
|
||||
<div ng-switch-when="1">
|
||||
<p><b>Generate PGP key.</b> You can set a passphrase to protect your key on disk. This must be entered everytime you start the app. For no passphrase just press continue.</p><p>Alternatively you can also <a href="#" wo-touch="$event.preventDefault(); importKey()">import an existing PGP key</a>.</p>
|
||||
<p><b>PGP key.</b> You can either import an existing PGP key or generate a new one.</p>
|
||||
<p>If you want to generate a new key, you can set a passphrase to protect your key on disk.</p>
|
||||
<form>
|
||||
<div>
|
||||
<label class="input-error-message" ng-class="{'passphrase-label-ok': passphraseRating >= 2}">{{passphraseMsg}}</label><br>
|
||||
@ -15,13 +16,14 @@
|
||||
<span class="popover-info" data-icon-append="" popover="#passphrase-info"></span>
|
||||
</div>
|
||||
|
||||
<div class="opt-in-terms">
|
||||
<div class="checkbox-wrapper"><input type="checkbox" ng-model="state.agree"></div>
|
||||
<div>I agree to the Whiteout Networks <a href="https://whiteout.io/terms.html" target="_blank">Terms of Service</a> and have read the <a href="https://whiteout.io/privacy-service.html" target="_blank">Privacy Policy</a>.</div>
|
||||
<div>
|
||||
<input type="checkbox" ng-model="state.agree" name="checkbox" id="checkbox_id">
|
||||
<label for="checkbox_id">I agree to the Whiteout Networks <a href="https://whiteout.io/terms.html" target="_blank">Terms of Service</a> and have read the <a href="https://whiteout.io/privacy-service.html" target="_blank">Privacy Policy</a>.</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" wo-touch="confirmPassphrase()" class="btn" ng-disabled="(state.confirmation || state.passphrase) && state.confirmation !== state.passphrase" tabindex="3">Continue</button>
|
||||
<button wo-touch="importKey()" class="btn btn-alt">Import existing key</button>
|
||||
<button type="submit" wo-touch="confirmPassphrase()" class="btn" ng-disabled="(state.confirmation || state.passphrase) && state.confirmation !== state.passphrase" tabindex="3">Generate new key</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -6,13 +6,20 @@
|
||||
<div class="content">
|
||||
|
||||
<div class="step" ng-show="step === 1">
|
||||
<p><b>Key sync.</b> We have sent you an email containing a recovery token. Please copy and paste the identifier below.</p>
|
||||
<p><b>Key sync.</b> We have sent you an email containing a recovery token. Please copy and paste the token below to download your key.</p>
|
||||
<p>You can also just import the key file manually e.g. if you're on a device with USB access.</p>
|
||||
|
||||
<input type="text" class="input-text" size="42" ng-model="recoveryToken" placeholder="Recovery token" focus-me="step === 1">
|
||||
|
||||
<div>
|
||||
<a class="btn btn-alt" href="#login-new-device">Import key file</a>
|
||||
<button class="btn" wo-touch="goForward()">Confirm token</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" ng-show="step === 2">
|
||||
<p><b>Key sync.</b> Please enter the keychain code you wrote down during sync setup.</p>
|
||||
|
||||
<input type="text" class="input-text code" size="4" maxlength="4" ng-model="code0" focus-me="step === 2" focus-next ng-paste="handlePaste($event)"> -
|
||||
<input type="text" class="input-text code" size="4" maxlength="4" ng-model="code1" focus-next> -
|
||||
<input type="text" class="input-text code" size="4" maxlength="4" ng-model="code2" focus-next> -
|
||||
@ -20,10 +27,10 @@
|
||||
<input type="text" class="input-text code" size="4" maxlength="4" ng-model="code4" focus-next> -
|
||||
<input type="text" class="input-text code" size="4" maxlength="4" ng-model="code5">
|
||||
<!--<a href="https://whiteout.io/revocation.html" title="Click here to reset your account." target="_blank">Lost your keychain code?</a>-->
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn" wo-touch="goForward()">Continue</button>
|
||||
<div>
|
||||
<button class="btn" wo-touch="goForward()">Complete sync</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!--/content-->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user