commit ca1154898acf5826d4093d7f6a6f5066a517b26e
parent f21bf9c774c082aa6394a443a2ff8d1267cd377e
Author: MTRNord <mtrnord1@gmail.com>
Date: Sun, 9 Jan 2022 18:42:47 +0100
Improve design of login and submit button
Diffstat:
3 files changed, 37 insertions(+), 21 deletions(-)
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -30,7 +30,7 @@ export default class Header extends PureComponent {
<span className='lg:opacity-100 opacity-0 inline-block bg-gray-900 dark:bg-gray-200 w-[1px] h-7'></span>
<div className='relative lg:m-0 mt-4'>
<div className='flex'>
- <button className='text-teal-400 bg-transparent relative h-14 min-w-[9.25rem] z-[2] cursor-auto font-bold'>Submit</button>
+ <a className='inline-flex justify-center items-center text-teal-400 hover:text-teal-200 bg-transparent relative h-14 min-w-[9.25rem] z-[2] cursor-pointer font-bold'>Submit</a>
</div>
</div>
</header>
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -1,4 +1,5 @@
import Head from "next/head";
+import Link from "next/link";
import { NextRouter, withRouter } from "next/router";
import { PureComponent, ReactNode } from "react";
import { ClientContext } from "../components/ClientContext";
@@ -26,7 +27,7 @@ class Login extends PureComponent<Props, State> {
super(props);
this.state = {
showServerField: false,
- serverUrl: constMatrixArtServer + "/_matrix/client",
+ serverUrl: constMatrixArtServer,
serverFieldsDisplay: 'none',
serverFieldsOpacity: 0,
loading: false,
@@ -67,6 +68,12 @@ class Login extends PureComponent<Props, State> {
if (!this.state.showServerField) {
serverUrl = constMatrixArtServer + "/_matrix/client";
}
+ if (serverUrl === "") {
+ serverUrl = constMatrixArtServer + "/_matrix/client";
+ }
+ if (serverUrl === constMatrixArtServer) {
+ serverUrl = constMatrixArtServer + "/_matrix/client";
+ }
// TODO join required rooms
if (this.state.mxid && this.state.password) {
@@ -106,7 +113,7 @@ class Login extends PureComponent<Props, State> {
//TODO make better
return (
<>
- <div className='h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
+ <div className='h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
<title key="title">Matrix Art | Login</title>
<meta property="og:title" content="Matrix Art | Login" key="og-title" />
@@ -114,22 +121,21 @@ class Login extends PureComponent<Props, State> {
</Head>
<Header></Header>
- <main className='h-full lg:pt-20 pt-56'>
+ <main className='mb-auto lg:pt-20 pt-56'>
<div className='z-[100] sticky lg:top-20 top-56 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
<h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>Log In</h1>
</div>
</div>
<div className="flex items-center justify-center m-10">
- <form onSubmit={this.handleSubmit} className="grid grid-cols-1 gap-6">
+ <form onSubmit={this.handleSubmit} className="w-96 grid grid-cols-1 gap-6">
<div className="block">
- <div className="mt-2">
- <div>
- <label className="inline-flex items-center">
- <input className="cursor-pointer h-4 w-4" type="checkbox" name="showServerField" checked={showServerField} onChange={this.handleInputChange} />
- <span className="ml-2 text-gray-900 dark:text-gray-200">Use custom Server</span>
- </label>
- </div>
+ <div className="mt-2 flex justify-between items-center">
+ <label className="inline-flex items-center">
+ <input className="cursor-pointer h-4 w-4" type="checkbox" name="showServerField" checked={showServerField} onChange={this.handleInputChange} />
+ <span className="ml-2 text-gray-700 dark:text-gray-400">Use custom Server</span>
+ </label>
+ <Link href="/resetPassword"><a className="text-gray-900 dark:text-gray-200 hover:text-teal-400">Forgot Password</a></Link>
</div>
</div>
@@ -138,22 +144,22 @@ class Login extends PureComponent<Props, State> {
opacity: serverFieldsOpacity,
display: serverFieldsDisplay
}} id="homeserverField">
- <span className="text-gray-900 dark:text-gray-200">Homeserver:</span>
- <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
- <input className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200" type="text" name="serverUrl" value={serverUrl} onChange={this.handleInputChange} />
+ <span className="text-gray-900 dark:text-gray-200 visually-hidden">Homeserver:</span>
+ <div className="bg-teal-600 mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
+ <input placeholder="Homeserver" className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200 placeholder:text-gray-900" type="text" name="serverUrl" value={serverUrl} onChange={this.handleInputChange} />
</div>
</label>
<label className="block">
- <span className="text-gray-900 dark:text-gray-200">Username:</span>
- <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
- <input className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200" type="text" name="mxid" value={mxid} onChange={this.handleInputChange} />
+ <span className="text-gray-900 dark:text-gray-200 visually-hidden">Username:</span>
+ <div className="bg-teal-600 mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
+ <input placeholder="Username" className=" bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200 placeholder:text-gray-900" type="text" name="mxid" value={mxid} onChange={this.handleInputChange} />
</div>
</label>
<label className="block">
- <span className="text-gray-900 dark:text-gray-200">Password:</span>
- <div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
- <input className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200" type="password" name="password" value={password} onChange={this.handleInputChange} />
+ <span className="text-gray-900 dark:text-gray-200 visually-hidden">Password:</span>
+ <div className="bg-teal-600 mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 rounded-sm border dark:border-slate-400 border-slate-500 py-1.5 px-2 focus-within:border-teal-400">
+ <input placeholder="Password" className="bg-transparent min-w-[1.25rem] focus:outline-none flex-[1] border-none text-gray-900 dark:text-gray-200 placeholder:text-gray-900" type="password" name="password" value={password} onChange={this.handleInputChange} />
</div>
</label>
diff --git a/styles/globals.css b/styles/globals.css
@@ -109,4 +109,14 @@ html, body, #__next {
box-shadow: 0 -2em;
height: 5em;
}
+}
+
+.visually-hidden:not(:focus):not(:active) {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
}
\ No newline at end of file
