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:
parent
8d525ce733
commit
ff1d737c68
13 changed files with 49 additions and 37 deletions
|
@ -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);
|
||||||
|
|
|
@ -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)) {
|
||||||
|
|
|
@ -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',
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
|
@ -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');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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']
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 →</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 →</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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue