mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-14 17:18:33 +00:00
added all the login and related pages
This commit is contained in:
Bram Wiepjes
parent
3b5366aead
commit
848382a78a
5 changed files with 161 additions and 5 deletions
web-frontend
|
|
@ -4,10 +4,12 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Login</title>
|
<title>Login</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="page-login">
|
||||||
<div class="box-page-header"></div>
|
<div class="box-page-header"></div>
|
||||||
<div class="box-page">
|
<div class="box-page">
|
||||||
<div class="box">
|
|
||||||
|
<!-- login page -->
|
||||||
|
<div class="box login-page login-page-login">
|
||||||
<h1 class="box-title">Baserow</h1>
|
<h1 class="box-title">Baserow</h1>
|
||||||
<div class="alert alert-error alert-has-icon">
|
<div class="alert alert-error alert-has-icon">
|
||||||
<div class="alert-icon">
|
<div class="alert-icon">
|
||||||
|
|
@ -33,10 +35,10 @@
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<ul class="action-links">
|
<ul class="action-links">
|
||||||
<li>
|
<li>
|
||||||
<a href="#">Sign up</a>
|
<a href="#" data-page=".login-page-signup">Sign up</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">Forgot password</a>
|
<a href="#" data-page=".login-page-forgot">Forgot password</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a href="#" class="button button-large">
|
<a href="#" class="button button-large">
|
||||||
|
|
@ -46,6 +48,135 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</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>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
7
web-frontend/src/scss/base/_helpers.scss
Normal file
7
web-frontend/src/scss/base/_helpers.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
@ -9,3 +9,17 @@
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
border-bottom: 1px solid $color-neutral-200;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,8 +42,11 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
text-align: right;
|
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-links {
|
.action-links {
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
@import "base/base";
|
@import "base/base";
|
||||||
@import "base/typography";
|
@import "base/typography";
|
||||||
|
@import "base/helpers";
|
||||||
|
|
||||||
@import "components/button";
|
@import "components/button";
|
||||||
@import "components/alert";
|
@import "components/alert";
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue