Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-21 14:19:43 +02:00
Code Releases Activity

onboard new UX

Browse source
This commit is contained in:
Harvey Kandola 2017-11-27 19:33:42 +00:00
parent 102f0c3800
commit 2ba948bc82
4 changed files with 73 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

24
gui/app/components/onboard/share-folder.js
View file

@ -38,18 +38,22 @@ export default Component.extend({
$("#stage-1-next").off('click').on('click', function() { $("#stage-1-next").off('click').on('click', function() {
if (!$("#stage-1-firstname").val()) { if (!$("#stage-1-firstname").val()) {
$("#stage-1-firstname").focus(); $("#stage-1-firstname").focus();
$("#stage-1-firstname").addClass("error"); $("#stage-1-firstname").addClass("is-invalid");
$(".name-status").attr("src", "/assets/img/onboard/person-red.png"); $(".name-status").attr("src", "/assets/img/onboard/person-red.png");
return; return;
} }
$("#stage-1-firstname").removeClass("is-invalid");
if (!$("#stage-1-lastname").val()) { if (!$("#stage-1-lastname").val()) {
$("#stage-1-lastname").focus(); $("#stage-1-lastname").focus();
$("#stage-1-lastname").addClass("error"); $("#stage-1-lastname").addClass("is-invalid");
$(".name-status").attr("src", "/assets/img/onboard/person-red.png"); $(".name-status").attr("src", "/assets/img/onboard/person-red.png");
return; return;
} }
$("#stage-1-lastname").removeClass("is-invalid");
self.set('processing', false); self.set('processing', false);
$(".stage-1").fadeOut("slow", function() { $(".stage-1").fadeOut("slow", function() {
@ -66,9 +70,9 @@ export default Component.extend({
$("#stage-2-password-confirm").keyup(function() { $("#stage-2-password-confirm").keyup(function() {
if ($("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50 || if ($("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50 ||
($("#stage-2-password").val() !== $("#stage-2-password-confirm").val())) { ($("#stage-2-password").val() !== $("#stage-2-password-confirm").val())) {
$(".password-status").attr("src", "/assets/img/onboard/lock-red.png"); // $(".password-status").attr("src", "/assets/img/onboard/lock-red.png");
} else { } else {
$(".password-status").attr("src", "/assets/img/onboard/lock-green.png"); // $(".password-status").attr("src", "/assets/img/onboard/lock-green.png");
} }
}); });
}); });
@ -78,22 +82,26 @@ export default Component.extend({
$("#stage-2-next").off('click').on('click', function() { $("#stage-2-next").off('click').on('click', function() {
if (!$("#stage-2-password").val() || $("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50) { if (!$("#stage-2-password").val() || $("#stage-2-password").val().length < 6 || $("#stage-2-password").val().length > 50) {
$("#stage-2-password").focus(); $("#stage-2-password").focus();
$("#stage-2-password").addClass("error"); $("#stage-2-password").addClass("is-invalid");
return; return;
} }
$("#stage-2-password").removeClass("is-invalid");
if (!$("#stage-2-password-confirm").val()) { if (!$("#stage-2-password-confirm").val()) {
$("#stage-2-password-confirm").focus(); $("#stage-2-password-confirm").focus();
$("#stage-2-password-confirm").addClass("error"); $("#stage-2-password-confirm").addClass("is-invalid");
return; return;
} }
if ($("#stage-2-password-confirm").val() !== $("#stage-2-password").val()) { if ($("#stage-2-password-confirm").val() !== $("#stage-2-password").val()) {
$(".mismatch").show(); $(".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-confirm").removeClass("is-invalid");
self.set('processing', false); self.set('processing', false);
$(".stage-2").fadeOut("slow", function() { $(".stage-2").fadeOut("slow", function() {
@ -104,7 +112,7 @@ export default Component.extend({
self.set('processing', true); self.set('processing', true);
$(".stage-3").fadeIn(); $(".stage-3").fadeIn();
$("#spinner-1").show(); // $("#spinner-1").show();
var payload = '{ "Password": "' + $("#stage-2-password").val() + '", "Serial": "' + self.serial + '", "Firstname": "' + $("#stage-1-firstname").val() + '", "Lastname": "' + $("#stage-1-lastname").val() + '" }'; var payload = '{ "Password": "' + $("#stage-2-password").val() + '", "Serial": "' + self.serial + '", "Firstname": "' + $("#stage-1-firstname").val() + '", "Lastname": "' + $("#stage-1-lastname").val() + '" }';
var password = $("#stage-2-password").val(); var password = $("#stage-2-password").val();

8
gui/app/pods/auth/share/template.hbs
View file

@ -1,7 +1 @@
<div class="onboarding-container"> {{onboard/share-folder serial=serial folderId=folderId slug=slug}}
<div class="container-fluid">
<div class="row">
{{onboard/share-folder serial=serial folderId=folderId slug=slug}}
</div>
</div>
</div>

12
gui/app/styles/view/page-onboard.scss
View file

@ -3,6 +3,7 @@
text-align: left; text-align: left;
color: $color-off-black; color: $color-off-black;
letter-spacing: 1px; letter-spacing: 1px;
margin: 50px 0;
.stage-1 .stage-1
{ {
@ -16,7 +17,7 @@
img img
{ {
margin: 100px 0 0 200px; // margin: 100px 0 0 200px;
} }
} }
@ -39,7 +40,7 @@
img img
{ {
margin: 100px 0 0 200px; // margin: 100px 0 0 200px;
} }
} }
@ -144,10 +145,6 @@
.sidebar .sidebar
{ {
margin-left: -15px;
padding: 100px 50px 50px 50px;
overflow: auto;
.logo .logo
{ {
height: 62px; height: 62px;
@ -178,8 +175,7 @@
{ {
@extend .absolute-center; @extend .absolute-center;
height: 400px; height: 400px;
width: 500px; max-width: 500px;
margin-top: 200px;
background-color: #f6f9fc; background-color: #f6f9fc;
position: relative; position: relative;
border-radius: 10px; border-radius: 10px;

87
gui/app/templates/components/onboard/share-folder.hbs
View file

@ -1,39 +1,44 @@
<div class="col-lg-4 col-md-4 col-sm-4"> <div class="onboarding-container">
<div class="container">
<div class="row">
<div class="col col-sm-6">
<div class="sidebar"> <div class="sidebar">
<img class="logo" src="/assets/img/logo-color.png"/> <img class="logo img-responsive" src="/assets/img/logo-color.png"/>
<div class="stage-1"> <div class="stage-1">
<p>Let's set up your account</p> <p>Let's set up your account</p>
<div class="input-control"> <div class="form-group">
<label>Firstname</label> <label for="stage-1-firstname">Firstname</label>
<div class="tip">Nickname or otherwise</div> <input id="stage-1-firstname" type="text" value="" class="form-control" />
<input id="stage-1-firstname" type="text" value="" /> <small class="form-text text-muted">Nickname or otherwise</small>
</div> </div>
<div class="input-control"> <div class="form-group">
<label>Lastname</label> <label for="stage-1-lastname">Lastname</label>
<div class="tip">What the government calls you</div> <input id="stage-1-lastname" type="text" value="" class="form-control" />
<input id="stage-1-lastname" type="text" value="" /> <small class="form-text text-muted">Usually not the same as your firstname</small>
</div> </div>
<div class="input-control"> <div class="form-group mt-5">
<div id="stage-1-next" class="regular-button button-green">Next &rarr;</div> <div id="stage-1-next" class="btn btn-success">Next &rarr;</div>
</div> </div>
</div> </div>
<div class="stage-2"> <div class="stage-2">
<h2>Password</h2> <h2>Password</h2>
<div class="input-control"> <div class="form-group">
<label>Password</label> <label for="stage-2-password">Choose Password</label>
<div class="tip">Between 6 and 50 characters</div> <input id="stage-2-password" type="password" value="" class="form-control" />
<input id="stage-2-password" type="password" value="" /> <small class="form-text text-muted">Between 6 and 50 characters</small>
</div> </div>
<div class="input-control"> <div class="form-group">
<label>Confirm Password</label> <label for="stage-2-password-confirm">Confirm Password</label>
<div class="tip">Re-type your chosen password</div> <input id="stage-2-password-confirm" type="password" value="" class="form-control" />
<input id="stage-2-password-confirm" type="password" value="" /> <small class="form-text text-muted">Re-type your chosen password</small>
</div> </div>
<div class="input-control"> <div class="form-group mt-5">
<div id="stage-2-next" class="regular-button button-green">Sign In &rarr;</div> <div id="stage-2-next" class="btn btn-success">Sign In &rarr;</div>
</div> </div>
</div> </div>
@ -43,39 +48,9 @@
</div> </div>
</div> </div>
</div>
</div>
</div>
</div> </div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="rightbar">
<div class="stage-1">
<div class="account-name-preview">
<div class="nav-icon"></div>
<div class="title">DOCUMIZE</div>
<img class="name-status" src="/assets/img/onboard/person.png" />
</div>
</div>
<div class="stage-2">
<div class="account-name-preview">
<div class="nav-icon"></div>
<div class="title">DOCUMIZE</div>
<img class="password-status" src="/assets/img/onboard/lock.png" />
</div>
</div>
<div class="stage-3">
<div class="account-name-preview">
<div class="nav-icon"></div>
<div class="title"></div>
<div id="spinner-1" class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>
</div>
</div>
</div>
</div>