Skip to content
This repository has been archived by the owner on May 7, 2024. It is now read-only.

Commit

Permalink
Redesign first run page
Browse files Browse the repository at this point in the history
  • Loading branch information
@pantsel
pantsel committed Sep 29, 2018
1 parent 0bbccc8 commit 2458488
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 182 deletions.
4 changes: 4 additions & 0 deletions assets/styles/_bootstrap_over.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
font-size: 20px;
}
}

&.btn-round {
border-radius: 25px;
}
}

.material-icons{
Expand Down
98 changes: 1 addition & 97 deletions assets/styles/_login.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.page-login{
.page-login, .page-register{
//position: fixed;
//background-color: $brand-primary;
//top:50px;
Expand All @@ -18,39 +18,6 @@
max-width: 98%;
transition: all 0.5s;

.panel{
.panel-heading{
background-color: $brand-royal;
padding-top: 15px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;


img{
width: 50%;
margin: auto;

}
.nav-tabs > li > a {
font-weight: bold;
color: #fff;
}

.nav-tabs > li:hover > a{
-webkit-box-shadow: inset 0 -2px 0 #fff;
box-shadow: inset 0 -2px 0 #fff;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus{
border: none;
-webkit-box-shadow: inset 0 -4px 0 #fff;
box-shadow: inset 0 -4px 0 #fff;
color: #fff;
}
}
}

img {
margin: auto;
}
Expand Down Expand Up @@ -88,67 +55,4 @@
}
}
}
}


.page-register{

.top-part {
height: 230px;
position: absolute;
top: 0;
width: 100%;
left: 0;
background-color: $brand-royal;
}

.register-form-container{
margin-top: 100px;
margin-left: auto;
margin-right: auto;
width: 420px;
max-width: 95%;
transition: all 0.5s;

.panel{
.panel-heading{
background-color: $brand-royal;
padding-top: 15px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;


img{
width: 50%;
margin: auto;

}
.nav-tabs > li > a {
font-weight: bold;
color: #fff;
}

.nav-tabs > li:hover > a{
-webkit-box-shadow: inset 0 -2px 0 #fff;
box-shadow: inset 0 -2px 0 #fff;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus{
border: none;
-webkit-box-shadow: inset 0 -4px 0 #fff;
box-shadow: inset 0 -4px 0 #fff;
color: #fff;
}
}
}


.form-group{
&.has-error{
background-color: transparent !important;
padding: 0 !important;
}
}
}
}
187 changes: 102 additions & 85 deletions views/welcomepage.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,119 @@

<div class="page-register">
<div class="top-part"></div>
<div class="page-register text-center">
<div class="col-md-12">
<div class="register-form-container">
<div class="panel panel-default">
<div class="panel-body padding-top">
<h3>Welcome to Konga!</h3>
<p class="help-block">Create an admin user</p>
<hr>
<div class="login-form-container">
<img src="images/konga-logo-small.png" class="img-responsive"/>
<br>
<h4>Welcome to the jungle!</h4>
<p class="help-block">Go ahead and create an administrator account.</p>
<br><br>

<form name="loginForm" method="post" action="register">
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.username ? 'has-error': '' %>">
<label class="control-label no-margin">Username <span class="text-danger text-small">*</span></label>
<input type="text" name="username" class="form-control username"
placeholder="Enter your username..." autofocus autocomplete="off" required="required"
value="<%= typeof old_data != 'undefined' && old_data.username ? old_data.username: '' %>"
/>
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.username) { %>
<% for (var i in invalidAttributes.username) { %>
<p class="help-block">
<%= invalidAttributes.username[i].message %>
</p>
<% } %>
<% } %>
<form name="loginForm" method="post" action="register">
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.username ? 'has-error' : '' %>">
<!--<label class="control-label no-margin">Username <span-->
<!--class="text-danger text-small">*</span></label>-->

</div>

<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.email ? 'has-error': '' %>">
<label class="control-label no-margin">Email <span class="text-danger text-small">*</span></label>
<input type="email" name="email"
class="form-control password"
placeholder="Enter your email..." required="required"
value="<%= typeof old_data != 'undefined' && old_data.email ? old_data.email: '' %>"
/>
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.email) { %>
<% for (var i in invalidAttributes.email) { %>
<p class="help-block">
<%= invalidAttributes.email[i].message %>
</p>
<% } %>
<% } %>
</div>
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.password ? 'has-error': '' %>">
<label class="control-label no-margin">Password <span class="text-danger text-small">*</span></label>
<input autocomplete="new-password" type="password" name="password"
class="form-control password"
placeholder="Enter your password..." required="required"
/>
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.password) { %>
<% for (var i in invalidAttributes.password) { %>
<p class="help-block">
<%= invalidAttributes.password[i].message %>
</p>
<% } %>
<% } %>
<div class="input-group">
<span class="input-group-addon">
<i class="mdi mdi-account-box-outline"></i>
</span>
<input type="text" name="username" class="form-control username"
placeholder="Username" autofocus autocomplete="off" required="required"
value="<%= typeof old_data != 'undefined' && old_data.username ? old_data.username : '' %>"
/>
</div>
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.username) { %>
<% for (var i in invalidAttributes.username) { %>
<p class="help-block">
<%= invalidAttributes.username[i].message %>
</p>
<% } %>
<% } %>

</div>
<div class="form-group <%= typeof invalidAttributes != 'undefined' && (invalidAttributes.password || invalidAttributes.password_confirmation) ? 'has-error': '' %>">
<label class="control-label no-margin">Password confirmation <span class="text-danger text-small">*</span></label>
<input
ng-pattern="user.passports.password"
autocomplete="new-password" type="password" name="password_confirmation"
class="form-control password"
placeholder="Confirm your password..." required="required"
/>
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.password_confirmation) { %>
<% for (var i in invalidAttributes.password_confirmation) { %>
<p class="help-block">
<%= invalidAttributes.password_confirmation[i].message %>
</p>
<% } %>
<% } %>
</div>
</div>

<br>
<div class="form-group">
<button class="btn btn-primary btn-block">
create admin
</button>
</div>
<p>
<small>
After the admin user is created, you will be redirected to the login page.
</small>
</p>
<p class="text-center help-block">KONGA v<%=konga_version%></p>
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.email ? 'has-error' : '' %>">
<!--<label class="control-label no-margin">Email <span-->
<!--class="text-danger text-small">*</span></label>-->
<div class="input-group">
<span class="input-group-addon">
<i class="mdi mdi-email-outline"></i>
</span>
<input type="email" name="email"
class="form-control password"
placeholder="Email" required="required"
value="<%= typeof old_data != 'undefined' && old_data.email ? old_data.email : '' %>"
/>
</div>
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.email) { %>
<% for (var i in invalidAttributes.email) { %>
<p class="help-block">
<%= invalidAttributes.email[i].message %>
</p>
<% } %>
<% } %>
</div>
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.password ? 'has-error' : '' %>">
<!--<label class="control-label no-margin">Password <span-->
<!--class="text-danger text-small">*</span></label>-->
<div class="input-group">
<span class="input-group-addon">
<i class="mdi mdi-lock-outline"></i>
</span>
<input autocomplete="new-password" type="password" name="password"
class="form-control password"
placeholder="Password" required="required"
/>
</div>
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.password) { %>
<% for (var i in invalidAttributes.password) { %>
<p class="help-block">
<%= invalidAttributes.password[i].message %>
</p>
<% } %>
<% } %>

</div>
<div class="form-group <%= typeof invalidAttributes != 'undefined' && (invalidAttributes.password || invalidAttributes.password_confirmation) ? 'has-error' : '' %>">
<!--<label class="control-label no-margin">Password confirmation <span-->
<!--class="text-danger text-small">*</span></label>-->

</form>
<div class="input-group">
<span class="input-group-addon">
<i class="mdi mdi-check-circle-outline"></i>
</span>
<input
ng-pattern="user.passports.password"
autocomplete="new-password" type="password" name="password_confirmation"
class="form-control password"
placeholder="Confirm password" required="required"
/>
</div>
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.password_confirmation) { %>
<% for (var i in invalidAttributes.password_confirmation) { %>
<p class="help-block">
<%= invalidAttributes.password_confirmation[i].message %>
</p>
<% } %>
<% } %>
</div>
</div>

<br>
<div class="form-group">
<button class="btn btn-primary btn-block btn-round btn-flat">
create admin
</button>
</div>
<p class="text-center help-block">KONGA v<%= konga_version %></p>

</form>

</div>
</div>
</div>



<script>
window.konga_version = "<%=konga_version%>";
window.konga_version = "<%= konga_version %>";
window.initAngular = false;
</script>

0 comments on commit 2458488

Please sign in to comment.