mirror of
https://github.com/documize/community.git
synced 2025-07-19 13:19:43 +02:00
New look and feel for auth screens
This commit is contained in:
McMatts
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()) {
|
||||
$(".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");
|
||||
return;
|
||||
}
|
||||
|
||||
$("#stage-2-password").removeClass("is-invalid");
|
||||
$("#stage-2-password-confirm").removeClass("is-invalid");
|
||||
|
||||
self.set('processing', false);
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default Component.extend({
|
|||
tagName: 'button',
|
||||
classNames: [],
|
||||
classNameBindings: ['calcClass'],
|
||||
attributeBindings: ['calcAttrs:data-dismiss'],
|
||||
attributeBindings: ['calcAttrs:data-dismiss', 'submitAttrs:type'],
|
||||
|
||||
label: '',
|
||||
icon: '',
|
||||
|
|
@ -57,6 +57,10 @@ export default Component.extend({
|
|||
return null;
|
||||
}),
|
||||
|
||||
submitAttrs: computed(function() {
|
||||
return this.submit ? "submit": null;
|
||||
}),
|
||||
|
||||
click(e) {
|
||||
e.preventDefault();
|
||||
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
|
||||
All: 'dicon-menu-8',
|
||||
Announce: 'dicon-notification',
|
||||
ArrowUp: 'dicon-arrow-up',
|
||||
ArrowDown: 'dicon-arrow-down',
|
||||
ArrowLeft: 'dicon-arrow-left',
|
||||
ArrowRight: 'dicon-arrow-right',
|
||||
ArrowUp: 'dicon-arrow-up-2',
|
||||
ArrowDown: 'dicon-arrow-down-2',
|
||||
ArrowLeft: 'dicon-arrow-left-2',
|
||||
ArrowRight: 'dicon-arrow-right-2',
|
||||
Attachment: 'dicon-attachment',
|
||||
BarChart: 'dicon-chart-bar-2',
|
||||
Bookmark: 'dicon-bookmark',
|
||||
|
|
@ -248,8 +248,11 @@ let constants = EmberObject.extend({
|
|||
Delete: 'Delete',
|
||||
Export: 'Export',
|
||||
Insert: 'Insert',
|
||||
Next: 'Next',
|
||||
Reset: 'Reset',
|
||||
Restore: 'Restore',
|
||||
Save: 'Save',
|
||||
SignIn: 'Sign In',
|
||||
Update: 'Update',
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -26,7 +26,9 @@
|
|||
{{input type="password" value=password id="authPassword" class="form-control" autocomplete="current-password"}}
|
||||
{{/if}}
|
||||
</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>
|
||||
{{#if isAuthProviderDocumize}}
|
||||
{{#link-to "auth.forgot"}}Forgot your password?{{/link-to}}
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@ export default Route.extend(AuthenticatedRouteMixin, {
|
|||
|
||||
activate() {
|
||||
this.get('browser').setTitle('Share Space');
|
||||
$('body').addClass('background-color-gray-200');
|
||||
// $('body').addClass('background-color-gray-200');
|
||||
},
|
||||
|
||||
deactivate() {
|
||||
$('body').removeClass('background-color-gray-200');
|
||||
// $('body').removeClass('background-color-gray-200');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
> .bookmarks {
|
||||
> .bookmarks, > .login {
|
||||
display: inline-block;
|
||||
|
||||
>.dicon {
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
> .bookmarks {
|
||||
> .bookmarks, > .login {
|
||||
>.dicon {
|
||||
display: block;
|
||||
color: $color-white;
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
max-width: 500px;
|
||||
padding: 20px 50px;
|
||||
background-color: $color-white;
|
||||
color: $color-black-light-1;
|
||||
color: map-get($gray-shades, 700);
|
||||
@include border-radius(3px);
|
||||
@include shadow();
|
||||
border: 1px solid map-get($gray-shades, 400);
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
|
|
@ -29,7 +29,8 @@
|
|||
> .url {
|
||||
margin: 20px 0;
|
||||
color: map-get($gray-shades, 700);
|
||||
font-weight: 0.9rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,14 +155,14 @@
|
|||
h2
|
||||
{
|
||||
font-size: 2rem;;
|
||||
color: $theme-500;
|
||||
color: $color-black-light-2;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
font-size: 1.3rem;
|
||||
color: $theme-500;
|
||||
color: $color-black-light-2;
|
||||
}
|
||||
|
||||
p.note
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
}
|
||||
|
||||
input[type='email'], input[type='text'], input[type='password'] {
|
||||
background-color: transparent;
|
||||
// background-color: transparent;
|
||||
}
|
||||
|
||||
// input[type='submit']
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<div class="product-update">
|
||||
<div class="update-status">
|
||||
{{!-- appMeta.updateAvailable --}}
|
||||
{{#if true}}
|
||||
{{#if appMeta.updateAvailable }}
|
||||
<a class="title" href="https://documize.com/downloads">Documize product update is available :)</a>
|
||||
<p class="instructions">
|
||||
To upgrade, replace existing binary and restart Documize. Migrate between Community and Enterprise editions seamlessly.
|
||||
|
|
|
|||
|
|
@ -90,6 +90,12 @@
|
|||
{{/attach-popover}}
|
||||
</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}}
|
||||
<a class="logo" href="https://documize.com?ref=app">
|
||||
<img src="/assets/img/icon-white-64x64.png">
|
||||
|
|
@ -118,7 +124,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -157,7 +163,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -19,13 +19,12 @@
|
|||
<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>
|
||||
</div>
|
||||
<div class="form-group mt-5">
|
||||
<div id="stage-1-next" class="btn btn-success">Next →</div>
|
||||
</div>
|
||||
{{ui/ui-spacer size=300}}
|
||||
{{ui/ui-button id="stage-1-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.Next}}
|
||||
</div>
|
||||
|
||||
<div class="stage-2">
|
||||
<h2>Password</h2>
|
||||
<p>Let's set up your account</p>
|
||||
<div class="form-group">
|
||||
<label for="stage-2-password">Choose Password</label>
|
||||
<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">
|
||||
<small class="form-text text-muted">Re-type your chosen password</small>
|
||||
</div>
|
||||
<div class="form-group mt-5">
|
||||
<div id="stage-2-next" class="btn btn-success">Sign In →</div>
|
||||
</div>
|
||||
{{ui/ui-spacer size=300}}
|
||||
{{ui/ui-button id="stage-2-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.SignIn}}
|
||||
</div>
|
||||
|
||||
<div class="stage-3">
|
||||
<h1>Please Wait</h1>
|
||||
<p>Signing you in...</p>
|
||||
<p>Please wait...</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,8 @@
|
|||
<label for="email">Email</label>
|
||||
{{focus-input type="email" value=email id="email" class=(if hasEmptyEmailError "form-control is-invalid" "form-control")}}
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="btn btn-success bold-700 text-uppercase">Reset</button>
|
||||
</div>
|
||||
{{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Reset onClick=(action "forgot")}}
|
||||
{{/if}}
|
||||
<div class="mt-5">
|
||||
{{#link-to "auth.login"}}Click here to sign in{{/link-to}}
|
||||
</div>
|
||||
{{ui/ui-spacer size=400}}
|
||||
{{#link-to "auth.login"}}Click here to sign in{{/link-to}}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<small class="form-text text-muted">Please type your new password again</small>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue