Skip to content

Commit 383bfa2

Browse files
groenroosgroenroos
committed
Closes #48 
1 parent 305ff50 commit 383bfa2

File tree

5 files changed

+221
-40
lines changed

5 files changed

+221
-40
lines changed

‎controller.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"/": "home"
2+
"/": "home",
3+
"/my-account": "my-account"
34
}

‎permissions.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
{}
1+
{
2+
"GET /my-account": "member"
3+
}

‎public/app.css

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
5+
*, *:before, *:after {
6+
box-sizing: inherit;
7+
}
8+
9+
body {
10+
font-family: Inter,BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
11+
text-align: center;
12+
color: #4a4a4a;
13+
}
14+
15+
a {
16+
color: #4dcf89;
17+
text-decoration: none;
18+
}
19+
20+
h1, h2, h3 {
21+
font-weight: normal;
22+
}
23+
24+
code {
25+
background-color: #f5f5f5;
26+
color: #da1c42;
27+
font-size: .875em;
28+
font-weight: 400;
29+
border-radius: 3px;
30+
padding: .25em .5em .25em;
31+
}
32+
33+
.container {
34+
max-width: 960px;
35+
margin: 128px auto;
36+
padding: 0 16px;
37+
}
38+
39+
.container svg {
40+
width: 100%;
41+
height: auto;
42+
max-width: 250px;
43+
margin: 0 auto 48px;
44+
}
45+
46+
.columns {
47+
display: flex;
48+
align-items: flex-start;
49+
justify-content: center;
50+
margin: 32px -32px;
51+
}
52+
53+
.column {
54+
width: 50%;
55+
padding: 0 32px;
56+
text-align: left;
57+
}
58+
59+
hr {
60+
border: 0;
61+
height: 3px;
62+
background: rgba(0,0,0,.1);
63+
margin: 32px 0;
64+
}
65+
66+
.separator {
67+
display: flex;
68+
align-items: center;
69+
margin: 64px 0 32px;
70+
}
71+
72+
.separator hr {
73+
margin: 0;
74+
flex: 1;
75+
}
76+
77+
.separator h2 {
78+
padding: 0 16px;
79+
font-size: 1em;
80+
text-transform: uppercase;
81+
color: rgba(0,0,0,.6);
82+
letter-spacing: 0.03em;
83+
}
84+
85+
label {
86+
display: block;
87+
margin-top: 8px;
88+
padding: 8px 0;
89+
}
90+
91+
input, textarea {
92+
display: block;
93+
padding: 8px;
94+
width: 100%;
95+
border: 1px solid rgba(0,0,0,.6);
96+
border-radius: 4px;
97+
font-family: Inter,BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
98+
font-size: 1em;
99+
}
100+
101+
textarea {
102+
max-width: 100%;
103+
min-height: 192px;
104+
}
105+
106+
button {
107+
margin: 16px 0;
108+
border: 0;
109+
border-radius: 4px;
110+
background: #4dcf89;
111+
color: white;
112+
padding: 8px 24px;
113+
font-family: Inter,BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
114+
font-size: 1em;
115+
}

‎views/home.html

+57-38
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>It works!</title>
77

8-
<style>
9-
body {
10-
font-family: Inter,BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
11-
text-align: center;
12-
color: #4a4a4a;
13-
}
14-
15-
a {
16-
color: #4dcf89;
17-
text-decoration: none;
18-
}
19-
20-
h1 {
21-
font-weight: normal;
22-
}
23-
24-
code {
25-
background-color: #f5f5f5;
26-
color: #da1c42;
27-
font-size: .875em;
28-
font-weight: 400;
29-
border-radius: 3px;
30-
padding: .25em .5em .25em;
31-
}
32-
33-
.container {
34-
max-width: 600px;
35-
margin: 128px auto;
36-
padding: 0 16px;
37-
}
38-
39-
.container svg {
40-
width: 100%;
41-
height: auto;
42-
max-width: 250px;
43-
margin: 0 auto 48px;
44-
}
45-
</style>
8+
<link rel="stylesheet" href="/public/app.css">
469
</head>
4710
<body>
4811

@@ -57,6 +20,62 @@ <h1>It works!</h1>
5720
<p>This view is being loaded by Sapling from <code>views/home.html</code>.</p>
5821

5922
<p>Now <a href="https://www.saplingjs.com/docs" target="_blank">read the docs</a>, and get building!</p>
23+
24+
<div class="separator">
25+
<hr>
26+
<h2>The Test Range</h2>
27+
<hr>
28+
</div>
29+
30+
<div class="columns">
31+
<div class="column">
32+
<h3>Post an update</h3>
33+
34+
<form action="/data/updates" method="post">
35+
<label for="name">Your name</label>
36+
<input type="text" name="name" id="name" />
37+
38+
<label for="message">Your update</label>
39+
<textarea name="message" id="message"></textarea>
40+
41+
<button type="submit">Post update</button>
42+
</form>
43+
44+
<hr>
45+
46+
<h3>Previous updates</h3>
47+
</div>
48+
<div class="column">
49+
<h3>Create an account</h3>
50+
51+
<form action="/api/register" method="post">
52+
<label for="email">Email</label>
53+
<input type="email" name="email" id="email" />
54+
55+
<label for="password">Password</label>
56+
<input type="password" name="password" id="password" />
57+
58+
<label for="password_confirm">Password again</label>
59+
<input type="password" name="password_confirm" id="password_confirm" />
60+
61+
<button type="submit">Create an account</button>
62+
</form>
63+
64+
<hr>
65+
66+
<h3>Log in</h3>
67+
68+
<form action="/api/login" method="post">
69+
<label for="email">Your email</label>
70+
<input type="email" name="email" id="email" />
71+
72+
<label for="password">Your password</label>
73+
<input type="password" name="password" id="password" />
74+
75+
<button type="submit">Log in</button>
76+
</form>
77+
</div>
78+
</div>
6079
</div>
6180

6281
</body>

‎views/my-account.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>My Account</title>
7+
8+
<link rel="stylesheet" href="/public/app.css">
9+
</head>
10+
<body>
11+
12+
<div class="container">
13+
<div class="separator">
14+
<hr>
15+
<h2>My Account</h2>
16+
<hr>
17+
</div>
18+
19+
<div class="columns">
20+
<div class="column">
21+
<h3>Modify my account</h3>
22+
23+
<form action="/api/update" method="post">
24+
<label for="password">Your password to confirm changes</label>
25+
<input type="password" name="password" id="password" />
26+
27+
<label for="email">New email</label>
28+
<input type="email" name="email" id="email" />
29+
30+
<label for="new_password">New password</label>
31+
<input type="password" name="new_password" id="new_password" />
32+
33+
<button type="submit">Change email</button>
34+
</form>
35+
36+
<hr>
37+
38+
<a href="/api/logout?redirect=/" class="button">Log out</a>
39+
</div>
40+
</div>
41+
</div>
42+
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)