Commit b31371f2 authored by Mathias Jud's avatar Mathias Jud

nicer login & register screen

parent 8c74f134
Pipeline #1369 failed with stages
in 0 seconds
.page {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.frame {
border: 1px solid var(--q-border-light);
padding: 2rem;
margin: 2rem;
width: 80%;
max-width: 50rem;
border-radius: 2rem;
text-align: center;
}
.h1 {
margin-bottom: 3rem;
}
.input, .button, .select {
width: 100%;
font-size: 2.5rem;
border-color: var(--q-border);
border-radius: 2rem;
margin-top: 2rem;
}
.select {
height: 5rem;
}
.button {
border: 1px solid var(--q-theme-strong);
background-color: var(--q-theme-strong);
color: var(--q-color-inverse);
height: 5rem;
}
.button:hover {
background-color: var(--q-theme-strong-hover);
color: var(--q-color-inverse);
}
.register {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px dotted var(--q-border);
}
\ No newline at end of file
<div>
<LinkTo @route="register">Register</LinkTo>
</div>
<select {{on "change" this.selectUser}}>
<div local-class="page">
<div local-class="frame">
<h1 local-class="h1">Login</h1>
<select local-class="select" {{on "change" this.selectUser}}>
{{#each @model as |user|}}
<option></option>
<option value={{user.id}}>{{user.displayName}}</option>
......@@ -9,6 +9,14 @@
</select>
<form {{on "submit" this.submit}}>
<Input @value={{this.password}} />
<button type="submit">Login</button>
</form>
\ No newline at end of file
<Input local-class="input" @value={{this.password}} />
<button local-class="button" type="submit">Login</button>
</form>
<div local-class="register">
Or
<LinkTo @route="register">Register</LinkTo>
a new user
</div>
</div>
</div>
\ No newline at end of file
.page {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.frame {
border: 1px solid var(--q-border-light);
padding: 1rem;
margin: 1rem;
width: 80%;
max-width: 50rem;
border-radius: 2rem;
text-align: center;
}
.h1 {
margin-bottom: 3rem;
}
.input, .button, .select {
width: 100%;
font-size: 2.5rem;
border-color: var(--q-border);
border-radius: 2rem;
margin-top: 2rem;
}
.select {
height: 5rem;
}
.button {
border: 1px solid var(--q-theme-strong);
background-color: var(--q-theme-strong);
color: var(--q-color-inverse);
height: 5rem;
}
.button:hover {
background-color: var(--q-theme-strong-hover);
color: var(--q-color-inverse);
}
<div local-class="page">
<div local-class="frame">
<h1 local-class="h1">Register</h1>
<form {{on "submit" this.register}}>
<label>Display name</label>
<Input @value={{this.displayName}} />
<Input local-class="input" @value={{this.displayName}} />
<label>Real name</label>
<Input @value={{this.realName}} />
<Input local-class="input" @value={{this.realName}} />
<label>Password</label>
<Input type="password" @value={{this.password}} />
<button type="submit">Register</button>
<Input local-class="input" type="password" @value={{this.password}} />
<button local-class="button" type="submit">Register</button>
</form>
</div>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment