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

Commit 2458488

Browse files
pantselpantsel
committed
Redesign first run page
1 parent 0bbccc8 commit 2458488

File tree

3 files changed

+107
-182
lines changed

3 files changed

+107
-182
lines changed

‎assets/styles/_bootstrap_over.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
font-size: 20px;
1010
}
1111
}
12+
13+
&.btn-round {
14+
border-radius: 25px;
15+
}
1216
}
1317

1418
.material-icons{

‎assets/styles/_login.scss‎

Lines changed: 1 addition & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.page-login{
1+
.page-login, .page-register{
22
//position: fixed;
33
//background-color: $brand-primary;
44
//top:50px;
@@ -18,39 +18,6 @@
1818
max-width: 98%;
1919
transition: all 0.5s;
2020

21-
.panel{
22-
.panel-heading{
23-
background-color: $brand-royal;
24-
padding-top: 15px;
25-
padding-bottom: 0;
26-
padding-left: 0;
27-
padding-right: 0;
28-
29-
30-
img{
31-
width: 50%;
32-
margin: auto;
33-
34-
}
35-
.nav-tabs > li > a {
36-
font-weight: bold;
37-
color: #fff;
38-
}
39-
40-
.nav-tabs > li:hover > a{
41-
-webkit-box-shadow: inset 0 -2px 0 #fff;
42-
box-shadow: inset 0 -2px 0 #fff;
43-
}
44-
45-
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus{
46-
border: none;
47-
-webkit-box-shadow: inset 0 -4px 0 #fff;
48-
box-shadow: inset 0 -4px 0 #fff;
49-
color: #fff;
50-
}
51-
}
52-
}
53-
5421
img {
5522
margin: auto;
5623
}
@@ -88,67 +55,4 @@
8855
}
8956
}
9057
}
91-
}
92-
93-
94-
.page-register{
95-
96-
.top-part {
97-
height: 230px;
98-
position: absolute;
99-
top: 0;
100-
width: 100%;
101-
left: 0;
102-
background-color: $brand-royal;
103-
}
104-
105-
.register-form-container{
106-
margin-top: 100px;
107-
margin-left: auto;
108-
margin-right: auto;
109-
width: 420px;
110-
max-width: 95%;
111-
transition: all 0.5s;
112-
113-
.panel{
114-
.panel-heading{
115-
background-color: $brand-royal;
116-
padding-top: 15px;
117-
padding-bottom: 0;
118-
padding-left: 0;
119-
padding-right: 0;
120-
121-
122-
img{
123-
width: 50%;
124-
margin: auto;
125-
126-
}
127-
.nav-tabs > li > a {
128-
font-weight: bold;
129-
color: #fff;
130-
}
131-
132-
.nav-tabs > li:hover > a{
133-
-webkit-box-shadow: inset 0 -2px 0 #fff;
134-
box-shadow: inset 0 -2px 0 #fff;
135-
}
136-
137-
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus{
138-
border: none;
139-
-webkit-box-shadow: inset 0 -4px 0 #fff;
140-
box-shadow: inset 0 -4px 0 #fff;
141-
color: #fff;
142-
}
143-
}
144-
}
145-
146-
147-
.form-group{
148-
&.has-error{
149-
background-color: transparent !important;
150-
padding: 0 !important;
151-
}
152-
}
153-
}
15458
}

‎views/welcomepage.ejs‎

Lines changed: 102 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,119 @@
1-
2-
<div class="page-register">
3-
<div class="top-part"></div>
1+
<div class="page-register text-center">
42
<div class="col-md-12">
5-
<div class="register-form-container">
6-
<div class="panel panel-default">
7-
<div class="panel-body padding-top">
8-
<h3>Welcome to Konga!</h3>
9-
<p class="help-block">Create an admin user</p>
10-
<hr>
3+
<div class="login-form-container">
4+
<img src="images/konga-logo-small.png" class="img-responsive"/>
5+
<br>
6+
<h4>Welcome to the jungle!</h4>
7+
<p class="help-block">Go ahead and create an administrator account.</p>
8+
<br><br>
119

12-
<form name="loginForm" method="post" action="register">
13-
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.username ? 'has-error': '' %>">
14-
<label class="control-label no-margin">Username <span class="text-danger text-small">*</span></label>
15-
<input type="text" name="username" class="form-control username"
16-
placeholder="Enter your username..." autofocus autocomplete="off" required="required"
17-
value="<%= typeof old_data != 'undefined' && old_data.username ? old_data.username: '' %>"
18-
/>
19-
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.username) { %>
20-
<% for (var i in invalidAttributes.username) { %>
21-
<p class="help-block">
22-
<%= invalidAttributes.username[i].message %>
23-
</p>
24-
<% } %>
25-
<% } %>
10+
<form name="loginForm" method="post" action="register">
11+
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.username ? 'has-error' : '' %>">
12+
<!--<label class="control-label no-margin">Username <span-->
13+
<!--class="text-danger text-small">*</span></label>-->
2614

27-
</div>
2815

29-
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.email ? 'has-error': '' %>">
30-
<label class="control-label no-margin">Email <span class="text-danger text-small">*</span></label>
31-
<input type="email" name="email"
32-
class="form-control password"
33-
placeholder="Enter your email..." required="required"
34-
value="<%= typeof old_data != 'undefined' && old_data.email ? old_data.email: '' %>"
35-
/>
36-
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.email) { %>
37-
<% for (var i in invalidAttributes.email) { %>
38-
<p class="help-block">
39-
<%= invalidAttributes.email[i].message %>
40-
</p>
41-
<% } %>
42-
<% } %>
43-
</div>
44-
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.password ? 'has-error': '' %>">
45-
<label class="control-label no-margin">Password <span class="text-danger text-small">*</span></label>
46-
<input autocomplete="new-password" type="password" name="password"
47-
class="form-control password"
48-
placeholder="Enter your password..." required="required"
49-
/>
50-
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.password) { %>
51-
<% for (var i in invalidAttributes.password) { %>
52-
<p class="help-block">
53-
<%= invalidAttributes.password[i].message %>
54-
</p>
55-
<% } %>
56-
<% } %>
16+
<div class="input-group">
17+
<span class="input-group-addon">
18+
<i class="mdi mdi-account-box-outline"></i>
19+
</span>
20+
<input type="text" name="username" class="form-control username"
21+
placeholder="Username" autofocus autocomplete="off" required="required"
22+
value="<%= typeof old_data != 'undefined' && old_data.username ? old_data.username : '' %>"
23+
/>
24+
</div>
25+
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.username) { %>
26+
<% for (var i in invalidAttributes.username) { %>
27+
<p class="help-block">
28+
<%= invalidAttributes.username[i].message %>
29+
</p>
30+
<% } %>
31+
<% } %>
5732

58-
</div>
59-
<div class="form-group <%= typeof invalidAttributes != 'undefined' && (invalidAttributes.password || invalidAttributes.password_confirmation) ? 'has-error': '' %>">
60-
<label class="control-label no-margin">Password confirmation <span class="text-danger text-small">*</span></label>
61-
<input
62-
ng-pattern="user.passports.password"
63-
autocomplete="new-password" type="password" name="password_confirmation"
64-
class="form-control password"
65-
placeholder="Confirm your password..." required="required"
66-
/>
67-
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.password_confirmation) { %>
68-
<% for (var i in invalidAttributes.password_confirmation) { %>
69-
<p class="help-block">
70-
<%= invalidAttributes.password_confirmation[i].message %>
71-
</p>
72-
<% } %>
73-
<% } %>
74-
</div>
33+
</div>
7534

76-
<br>
77-
<div class="form-group">
78-
<button class="btn btn-primary btn-block">
79-
create admin
80-
</button>
81-
</div>
82-
<p>
83-
<small>
84-
After the admin user is created, you will be redirected to the login page.
85-
</small>
86-
</p>
87-
<p class="text-center help-block">KONGA v<%=konga_version%></p>
35+
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.email ? 'has-error' : '' %>">
36+
<!--<label class="control-label no-margin">Email <span-->
37+
<!--class="text-danger text-small">*</span></label>-->
38+
<div class="input-group">
39+
<span class="input-group-addon">
40+
<i class="mdi mdi-email-outline"></i>
41+
</span>
42+
<input type="email" name="email"
43+
class="form-control password"
44+
placeholder="Email" required="required"
45+
value="<%= typeof old_data != 'undefined' && old_data.email ? old_data.email : '' %>"
46+
/>
47+
</div>
48+
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.email) { %>
49+
<% for (var i in invalidAttributes.email) { %>
50+
<p class="help-block">
51+
<%= invalidAttributes.email[i].message %>
52+
</p>
53+
<% } %>
54+
<% } %>
55+
</div>
56+
<div class="form-group <%= typeof invalidAttributes != 'undefined' && invalidAttributes.password ? 'has-error' : '' %>">
57+
<!--<label class="control-label no-margin">Password <span-->
58+
<!--class="text-danger text-small">*</span></label>-->
59+
<div class="input-group">
60+
<span class="input-group-addon">
61+
<i class="mdi mdi-lock-outline"></i>
62+
</span>
63+
<input autocomplete="new-password" type="password" name="password"
64+
class="form-control password"
65+
placeholder="Password" required="required"
66+
/>
67+
</div>
68+
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.password) { %>
69+
<% for (var i in invalidAttributes.password) { %>
70+
<p class="help-block">
71+
<%= invalidAttributes.password[i].message %>
72+
</p>
73+
<% } %>
74+
<% } %>
75+
76+
</div>
77+
<div class="form-group <%= typeof invalidAttributes != 'undefined' && (invalidAttributes.password || invalidAttributes.password_confirmation) ? 'has-error' : '' %>">
78+
<!--<label class="control-label no-margin">Password confirmation <span-->
79+
<!--class="text-danger text-small">*</span></label>-->
8880

89-
</form>
81+
<div class="input-group">
82+
<span class="input-group-addon">
83+
<i class="mdi mdi-check-circle-outline"></i>
84+
</span>
85+
<input
86+
ng-pattern="user.passports.password"
87+
autocomplete="new-password" type="password" name="password_confirmation"
88+
class="form-control password"
89+
placeholder="Confirm password" required="required"
90+
/>
91+
</div>
92+
<% if (typeof invalidAttributes != 'undefined' && invalidAttributes.password_confirmation) { %>
93+
<% for (var i in invalidAttributes.password_confirmation) { %>
94+
<p class="help-block">
95+
<%= invalidAttributes.password_confirmation[i].message %>
96+
</p>
97+
<% } %>
98+
<% } %>
9099
</div>
91-
</div>
100+
101+
<br>
102+
<div class="form-group">
103+
<button class="btn btn-primary btn-block btn-round btn-flat">
104+
create admin
105+
</button>
106+
</div>
107+
<p class="text-center help-block">KONGA v<%= konga_version %></p>
108+
109+
</form>
92110

93111
</div>
94112
</div>
95113
</div>
96114

97115

98-
99116
<script>
100-
window.konga_version = "<%=konga_version%>";
117+
window.konga_version = "<%= konga_version %>";
101118
window.initAngular = false;
102119
</script>

0 commit comments

Comments
 (0)