archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-04 21:25:24 +00:00
Code Issues Projects Releases Wiki Activity

added all the login and related pages

Browse source
This commit is contained in:
Bram Wiepjes 2019-02-18 20:49:51 +01:00
parent 3b5366aead
commit 848382a78a
5 changed files with 161 additions and 5 deletions
web-frontend
public
login.html
src/scss
base
_helpers.scss
components
_box.scss_form.scss
default.scss

139
web-frontend/public/login.html
View file

@ -4,10 +4,12 @@
<meta charset="utf-8" />
<title>Login</title>
</head>
<body>
<body class="page-login">
<div class="box-page-header"></div>
<div class="box-page">
<div class="box">
<!-- login page -->
<div class="box login-page login-page-login">
<h1 class="box-title">Baserow</h1>
<div class="alert alert-error alert-has-icon">
<div class="alert-icon">
@ -33,10 +35,10 @@
<div class="actions">
<ul class="action-links">
<li>
<a href="#">Sign up</a>
<a href="#" data-page=".login-page-signup">Sign up</a>
</li>
<li>
<a href="#">Forgot password</a>
<a href="#" data-page=".login-page-forgot">Forgot password</a>
</li>
</ul>
<a href="#" class="button button-large">
@ -46,6 +48,135 @@
</div>
</form>
</div>
<!-- forgot page -->
<div class="box login-page login-page-forgot hidden">
<h1 class="box-title">Forgot password</h1>
<p>
Please enter your e-mail address in the form. If we find an account then we will send an e-mail with a link to reset your password.
</p>
<form>
<div class="control">
<label class="control-label">E-mail address</label>
<div class="control-elements">
<input type="text" class="input input-large" />
</div>
</div>
<div class="actions">
<ul class="action-links">
<li>
<a href="#" data-page=".login-page-login">
<i class="fas fa-arrow-left"></i>
Back
</a>
</li>
</ul>
<a href="#" class="button button-large" data-page=".login-page-forgot-success">
Send link
<i class="fas fa-envelope"></i>
</a>
</div>
</form>
</div>
<!-- forgot success page -->
<div class="box login-page login-page-forgot-success hidden">
<div class="box-message">
<div class="box-message-icon">
<i class="fas fa-paper-plane"></i>
</div>
<h1 class="box-message-title">E-mail is send</h1>
<a href="#" class="button button-large" data-page=".login-page-reset-password">
<i class="fas fa-arrow-left"></i>
Go back
</a>
</div>
</div>
<!-- sign up page -->
<div class="box login-page login-page-signup hidden">
<h1 class="box-title">Sign up</h1>
<form>
<div class="control">
<label class="control-label">E-mail address</label>
<div class="control-elements">
<input type="text" class="input input-large" />
</div>
</div>
<div class="control">
<label class="control-label">Your name</label>
<div class="control-elements">
<input type="text" class="input input-large" />
</div>
</div>
<div class="control">
<label class="control-label">Password</label>
<div class="control-elements">
<input type="password" class="input input-large" />
</div>
</div>
<div class="control">
<label class="control-label">Repeat password</label>
<div class="control-elements">
<input type="password" class="input input-large" />
</div>
</div>
<div class="actions">
<ul class="action-links">
<li>
<a href="#" data-page=".login-page-login">
<i class="fas fa-arrow-left"></i>
Back
</a>
</li>
</ul>
<a href="#" class="button button-large" data-loading>
Sign up
<i class="fas fa-user-plus"></i>
</a>
</div>
</form>
</div>
<!-- sign up page -->
<div class="box login-page login-page-reset-password hidden">
<h1 class="box-title">Reset password</h1>
<form>
<div class="control">
<label class="control-label">New password</label>
<div class="control-elements">
<input type="password" class="input input-large" />
</div>
</div>
<div class="control">
<label class="control-label">Repeat password</label>
<div class="control-elements">
<input type="password" class="input input-large" />
</div>
</div>
<div class="actions">
<div class="align-right">
<a href="#" class="button button-large" data-page=".login-page-login">
Change password
<i class="fas fa-pencil-alt"></i>
</a>
</div>
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
/**
* A small temporary peace of code to navigatie to other login related pages.
*/
(function(){
$("[data-page]").click(function(e) {
e.preventDefault();
$(".login-page").addClass("hidden");
$($(this).attr("data-page")).removeClass("hidden");
});
})();
</script>
</body>
</html>

7
web-frontend/src/scss/base/_helpers.scss Normal file
View file

@ -0,0 +1,7 @@
.hidden {
display: none;
}
.align-right {
text-align: right;
}

14
web-frontend/src/scss/components/_box.scss
View file

@ -9,3 +9,17 @@
padding-bottom: 20px;
border-bottom: 1px solid $color-neutral-200;
}
.box-message {
text-align: center;
}
.box-message-icon {
font-size: 50px;
color: $color-primary-500;
margin-bottom: 30px;
}
.box-message-title {
margin-bottom: 30px;
}

5
web-frontend/src/scss/components/_form.scss
View file

@ -42,8 +42,11 @@
width: 100%;
align-items: center;
justify-content: space-between;
text-align: right;
margin: 30px 0;
> div {
width: 100%;
}
}
.action-links {

1
web-frontend/src/scss/default.scss
View file

@ -6,6 +6,7 @@
@import "base/base";
@import "base/typography";
@import "base/helpers";
@import "components/button";
@import "components/alert";