1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-20 13:49:42 +02:00

New look and feel for auth screens

This commit is contained in:
McMatts 2018-12-13 13:34:26 +00:00
parent 8d525ce733
commit ff1d737c68
13 changed files with 49 additions and 37 deletions

View file

@ -95,11 +95,14 @@ export default Component.extend({
} }
if ($("#stage-2-password-confirm").val() !== $("#stage-2-password").val()) { if ($("#stage-2-password-confirm").val() !== $("#stage-2-password").val()) {
$(".mismatch").show(); $("#stage-2-password").addClass("is-invalid");
$("#stage-2-password-confirm").addClass("is-invalid");
// $(".mismatch").show();
// $(".password-status").attr("src", "/assets/img/onboard/lock-red.png"); // $(".password-status").attr("src", "/assets/img/onboard/lock-red.png");
return; return;
} }
$("#stage-2-password").removeClass("is-invalid");
$("#stage-2-password-confirm").removeClass("is-invalid"); $("#stage-2-password-confirm").removeClass("is-invalid");
self.set('processing', false); self.set('processing', false);

View file

@ -16,7 +16,7 @@ export default Component.extend({
tagName: 'button', tagName: 'button',
classNames: [], classNames: [],
classNameBindings: ['calcClass'], classNameBindings: ['calcClass'],
attributeBindings: ['calcAttrs:data-dismiss'], attributeBindings: ['calcAttrs:data-dismiss', 'submitAttrs:type'],
label: '', label: '',
icon: '', icon: '',
@ -57,6 +57,10 @@ export default Component.extend({
return null; return null;
}), }),
submitAttrs: computed(function() {
return this.submit ? "submit": null;
}),
click(e) { click(e) {
e.preventDefault(); e.preventDefault();
if (is.not.undefined(this.onClick)) { if (is.not.undefined(this.onClick)) {

View file

@ -197,10 +197,10 @@ let constants = EmberObject.extend({
Icon: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects Icon: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
All: 'dicon-menu-8', All: 'dicon-menu-8',
Announce: 'dicon-notification', Announce: 'dicon-notification',
ArrowUp: 'dicon-arrow-up', ArrowUp: 'dicon-arrow-up-2',
ArrowDown: 'dicon-arrow-down', ArrowDown: 'dicon-arrow-down-2',
ArrowLeft: 'dicon-arrow-left', ArrowLeft: 'dicon-arrow-left-2',
ArrowRight: 'dicon-arrow-right', ArrowRight: 'dicon-arrow-right-2',
Attachment: 'dicon-attachment', Attachment: 'dicon-attachment',
BarChart: 'dicon-chart-bar-2', BarChart: 'dicon-chart-bar-2',
Bookmark: 'dicon-bookmark', Bookmark: 'dicon-bookmark',
@ -248,8 +248,11 @@ let constants = EmberObject.extend({
Delete: 'Delete', Delete: 'Delete',
Export: 'Export', Export: 'Export',
Insert: 'Insert', Insert: 'Insert',
Next: 'Next',
Reset: 'Reset',
Restore: 'Restore', Restore: 'Restore',
Save: 'Save', Save: 'Save',
SignIn: 'Sign In',
Update: 'Update', Update: 'Update',
} }
}); });

View file

@ -26,7 +26,9 @@
{{input type="password" value=password id="authPassword" class="form-control" autocomplete="current-password"}} {{input type="password" value=password id="authPassword" class="form-control" autocomplete="current-password"}}
{{/if}} {{/if}}
</div> </div>
<button type="submit" class="btn btn-success bold-700 text-uppercase mt-4">Sign in</button>
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.SignIn onClick=(action "login")}}
<div class="{{unless invalidCredentials "invisible"}} color-red-600 mt-3">Invalid credentials</div> <div class="{{unless invalidCredentials "invisible"}} color-red-600 mt-3">Invalid credentials</div>
{{#if isAuthProviderDocumize}} {{#if isAuthProviderDocumize}}
{{#link-to "auth.forgot"}}Forgot your password?{{/link-to}} {{#link-to "auth.forgot"}}Forgot your password?{{/link-to}}

View file

@ -37,10 +37,10 @@ export default Route.extend(AuthenticatedRouteMixin, {
activate() { activate() {
this.get('browser').setTitle('Share Space'); this.get('browser').setTitle('Share Space');
$('body').addClass('background-color-gray-200'); // $('body').addClass('background-color-gray-200');
}, },
deactivate() { deactivate() {
$('body').removeClass('background-color-gray-200'); // $('body').removeClass('background-color-gray-200');
} }
}); });

View file

@ -60,7 +60,7 @@
cursor: pointer; cursor: pointer;
} }
> .bookmarks { > .bookmarks, > .login {
display: inline-block; display: inline-block;
>.dicon { >.dicon {
@ -169,7 +169,7 @@
} }
} }
> .bookmarks { > .bookmarks, > .login {
>.dicon { >.dicon {
display: block; display: block;
color: $color-white; color: $color-white;

View file

@ -13,9 +13,9 @@
max-width: 500px; max-width: 500px;
padding: 20px 50px; padding: 20px 50px;
background-color: $color-white; background-color: $color-white;
color: $color-black-light-1; color: map-get($gray-shades, 700);
@include border-radius(3px); @include border-radius(3px);
@include shadow(); border: 1px solid map-get($gray-shades, 400);
.logo { .logo {
text-align: center; text-align: center;
@ -29,7 +29,8 @@
> .url { > .url {
margin: 20px 0; margin: 20px 0;
color: map-get($gray-shades, 700); color: map-get($gray-shades, 700);
font-weight: 0.9rem; font-size: 0.9rem;
font-weight: 500;
} }
} }
} }

View file

@ -155,14 +155,14 @@
h2 h2
{ {
font-size: 2rem;; font-size: 2rem;;
color: $theme-500; color: $color-black-light-2;
margin-bottom: 30px; margin-bottom: 30px;
} }
p p
{ {
font-size: 1.3rem; font-size: 1.3rem;
color: $theme-500; color: $color-black-light-2;
} }
p.note p.note
@ -184,7 +184,7 @@
} }
input[type='email'], input[type='text'], input[type='password'] { input[type='email'], input[type='text'], input[type='password'] {
background-color: transparent; // background-color: transparent;
} }
// input[type='submit'] // input[type='submit']

View file

@ -1,7 +1,6 @@
<div class="product-update"> <div class="product-update">
<div class="update-status"> <div class="update-status">
{{!-- appMeta.updateAvailable --}} {{#if appMeta.updateAvailable }}
{{#if true}}
<a class="title" href="https://documize.com/downloads">Documize product update is available :)</a> <a class="title" href="https://documize.com/downloads">Documize product update is available :)</a>
<p class="instructions"> <p class="instructions">
To upgrade, replace existing binary and restart Documize. Migrate between Community and Enterprise editions seamlessly. To upgrade, replace existing binary and restart Documize. Migrate between Community and Enterprise editions seamlessly.

View file

@ -90,6 +90,12 @@
{{/attach-popover}} {{/attach-popover}}
</div> </div>
</div> </div>
{{else}}
{{#link-to "auth.login" class="login"}}
<i class={{concat "dicon " constants.Icon.Unlocked}}>
{{#attach-tooltip showDelay=1000}}Login{{/attach-tooltip}}
</i>
{{/link-to}}
{{/if}} {{/if}}
<a class="logo" href="https://documize.com?ref=app"> <a class="logo" href="https://documize.com?ref=app">
<img src="/assets/img/icon-white-64x64.png"> <img src="/assets/img/icon-white-64x64.png">
@ -118,7 +124,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> {{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
</div> </div>
</div> </div>
</div> </div>
@ -157,7 +163,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> {{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
</div> </div>
</div> </div>
</div> </div>

View file

@ -19,13 +19,12 @@
<input id="stage-1-lastname" type="text" value="" class="form-control"> <input id="stage-1-lastname" type="text" value="" class="form-control">
<small class="form-text text-muted">Usually not the same as your firstname</small> <small class="form-text text-muted">Usually not the same as your firstname</small>
</div> </div>
<div class="form-group mt-5"> {{ui/ui-spacer size=300}}
<div id="stage-1-next" class="btn btn-success">Next &rarr;</div> {{ui/ui-button id="stage-1-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.Next}}
</div>
</div> </div>
<div class="stage-2"> <div class="stage-2">
<h2>Password</h2> <p>Let's set up your account</p>
<div class="form-group"> <div class="form-group">
<label for="stage-2-password">Choose Password</label> <label for="stage-2-password">Choose Password</label>
<input id="stage-2-password" type="password" value="" class="form-control"> <input id="stage-2-password" type="password" value="" class="form-control">
@ -37,14 +36,12 @@
<input id="stage-2-password-confirm" type="password" value="" class="form-control"> <input id="stage-2-password-confirm" type="password" value="" class="form-control">
<small class="form-text text-muted">Re-type your chosen password</small> <small class="form-text text-muted">Re-type your chosen password</small>
</div> </div>
<div class="form-group mt-5"> {{ui/ui-spacer size=300}}
<div id="stage-2-next" class="btn btn-success">Sign In &rarr;</div> {{ui/ui-button id="stage-2-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.SignIn}}
</div>
</div> </div>
<div class="stage-3"> <div class="stage-3">
<h1>Please Wait</h1> <p>Please wait...</p>
<p>Signing you in...</p>
</div> </div>
</div> </div>

View file

@ -6,11 +6,8 @@
<label for="email">Email</label> <label for="email">Email</label>
{{focus-input type="email" value=email id="email" class=(if hasEmptyEmailError "form-control is-invalid" "form-control")}} {{focus-input type="email" value=email id="email" class=(if hasEmptyEmailError "form-control is-invalid" "form-control")}}
</div> </div>
<div class="mt-4"> {{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Reset onClick=(action "forgot")}}
<button type="submit" class="btn btn-success bold-700 text-uppercase">Reset</button>
</div>
{{/if}} {{/if}}
<div class="mt-5"> {{ui/ui-spacer size=400}}
{{#link-to "auth.login"}}Click here to sign in{{/link-to}} {{#link-to "auth.login"}}Click here to sign in{{/link-to}}
</div>
</form> </form>

View file

@ -11,7 +11,7 @@
<small class="form-text text-muted">Please type your new password again</small> <small class="form-text text-muted">Please type your new password again</small>
</div> </div>
<div class="margin-top-10 margin-bottom-20"> <div class="margin-top-10 margin-bottom-20">
<button type="submit" class="btn btn-success bold-700 text-uppercase">Reset</button> {{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Reset onClick=(action "reset")}}
<span class="{{unless mustMatch "d-none"}} color-red-600 margin-left-20">Passwords must match</span> <span class="{{unless mustMatch "d-none"}} color-red-600 margin-left-20">Passwords must match</span>
</div> </div>
</form> </form>