mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 19:14:16 +00:00
update login
This commit is contained in:
parent
f175953d17
commit
6970603db0
@ -7,6 +7,28 @@ import { Footer } from "components"
|
|||||||
|
|
||||||
import "./index.less"
|
import "./index.less"
|
||||||
|
|
||||||
|
const GradientSVG = () => {
|
||||||
|
return <svg height="100%" width="100%">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="0" x1="0" y1="0.5" x2="1" y2="0.5">
|
||||||
|
<stop offset="0%" stop-color="rgba(225, 0, 209, 0.1)" />
|
||||||
|
<stop offset="25%" stop-color="rgba(233, 0, 182, 0.08)" />
|
||||||
|
<stop offset="50%" stop-color="rgba(240, 0, 154, 0.05)" />
|
||||||
|
<stop offset="100%" stop-color="rgba(255, 0, 0, 0)" />
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="1" gradientTransform="translate(-0.81 -0.5) scale(2, 1.2)">
|
||||||
|
<stop offset="0%" stop-color="rgba(255, 96, 100, 0.2)" />
|
||||||
|
<stop offset="20%" stop-color="rgba(255, 96, 100, 0.16)" />
|
||||||
|
<stop offset="40%" stop-color="rgba(255, 96, 100, 0.12)" />
|
||||||
|
<stop offset="60%" stop-color="rgba(255, 96, 100, 0.08)" />
|
||||||
|
<stop offset="100%" stop-color="rgba(255, 96, 100, 0)" />
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#0)" height="100%" width="100%" />
|
||||||
|
<rect fill="url(#1)" height="100%" width="100%" />
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
export default (props) => {
|
export default (props) => {
|
||||||
const [wallpaperData, setWallpaperData] = React.useState(null)
|
const [wallpaperData, setWallpaperData] = React.useState(null)
|
||||||
|
|
||||||
@ -35,61 +57,64 @@ export default (props) => {
|
|||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return <div className="loginPage">
|
return <div className="loginPage">
|
||||||
<div
|
<div className="background">
|
||||||
style={{
|
<GradientSVG />
|
||||||
backgroundImage: `url(${wallpaperData?.url})`,
|
|
||||||
}}
|
|
||||||
className="wallpaper"
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
{wallpaperData?.author ? wallpaperData.author : null}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="wrapper">
|
<div className="wrapper">
|
||||||
<img src={window.isMobile ? config.logo.alt : config.logo.full} className="logo" />
|
<div
|
||||||
|
className="wrapper_background"
|
||||||
|
style={{
|
||||||
|
backgroundImage: wallpaperData ? `url(${wallpaperData.url})` : null,
|
||||||
|
animation: wallpaperData ? "opacityIn 1s" : null
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="title">
|
<div className="content_header">
|
||||||
<h1>A prototype of a social network</h1>
|
<img src={window.isMobile ? config.logo.alt : config.logo.full} className="logo" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{props.session && <div className="session_available">
|
<div className="actions">
|
||||||
<h3><Icons.AlertCircle /> You already have a valid session.</h3>
|
|
||||||
<div className="session_card">
|
|
||||||
@{props.session.username}
|
|
||||||
</div>
|
|
||||||
<antd.Button
|
<antd.Button
|
||||||
|
onClick={onClickLogin}
|
||||||
|
size="large"
|
||||||
|
icon={<Icons.LogIn />}
|
||||||
type="primary"
|
type="primary"
|
||||||
onClick={() => window.app.setLocation(config.app?.mainPath ?? "/home")} >
|
>
|
||||||
Go to home
|
Continue with a Comty™ Account
|
||||||
</antd.Button>
|
</antd.Button>
|
||||||
</div>}
|
|
||||||
|
|
||||||
<div className="buttonsBox">
|
|
||||||
<div className="register">
|
|
||||||
<antd.Button
|
|
||||||
type="primary"
|
|
||||||
size="large"
|
|
||||||
onClick={onClickRegister}
|
|
||||||
>
|
|
||||||
Create a new account
|
|
||||||
</antd.Button>
|
|
||||||
<p>Registering a new account accepts the <a>Terms and Conditions</a> and <a>Privacy policy</a> for the services provided by {config.author}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>
|
|
||||||
You have already an account?
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<antd.Button
|
<antd.Button
|
||||||
onClick={onClickLogin}
|
onClick={onClickLogin}
|
||||||
|
size="large"
|
||||||
|
icon={<Icons.LogIn />}
|
||||||
|
type="primary"
|
||||||
|
disabled
|
||||||
>
|
>
|
||||||
Login
|
Continue with a RageStudio© ID™
|
||||||
</antd.Button>
|
</antd.Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h4>Or create a new account</h4>
|
||||||
|
|
||||||
|
<div className="actions">
|
||||||
|
<antd.Button
|
||||||
|
onClick={onClickRegister}
|
||||||
|
icon={<Icons.UserPlus />}
|
||||||
|
type="primary"
|
||||||
|
>
|
||||||
|
Create a Comty™ Account
|
||||||
|
</antd.Button>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<Icons.Info />
|
||||||
|
Registering a new account accepts the <a>Terms and Conditions</a> and <a>Privacy policy</a> for the services provided by {config.author}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@ -1,108 +1,116 @@
|
|||||||
.loginPage {
|
.loginPage {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
||||||
align-items: right;
|
font-family: "Space Grotesk", sans-serif;
|
||||||
justify-content: right;
|
|
||||||
|
|
||||||
.wallpaper {
|
.background {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
backdrop-filter: blur(20px);
|
z-index: 50;
|
||||||
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
||||||
width: 56vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
||||||
background-repeat: no-repeat;
|
svg {
|
||||||
background-size: cover;
|
margin: 0;
|
||||||
background-position: center;
|
|
||||||
|
|
||||||
//filter: blur(4px);
|
opacity: 0;
|
||||||
|
|
||||||
font-size: 15px;
|
animation: opacityIn 3s ease-in-out 0s forwards;
|
||||||
|
|
||||||
align-items: self-end;
|
|
||||||
justify-content: left;
|
|
||||||
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
|
|
||||||
1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
z-index: 20;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
|
|
||||||
width: 45vw;
|
position: relative;
|
||||||
height: 100vh;
|
|
||||||
|
|
||||||
padding: 30px 50px;
|
z-index: 55;
|
||||||
|
|
||||||
border-radius: 20px 0 0 20px;
|
|
||||||
|
|
||||||
background-color: var(--background-color-accent);
|
background-color: var(--background-color-accent);
|
||||||
|
outline: 1px solid var(--border-color);
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
border-left: 1px solid var(--border-color);
|
min-height: 50vh;
|
||||||
|
|
||||||
.logo {
|
.wrapper_background {
|
||||||
height: 8vh;
|
height: 100%;
|
||||||
min-height: 80px;
|
width: 300px;
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.session_available {
|
border-radius: 12px;
|
||||||
margin-bottom: 20px;
|
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
padding-top: 10px;
|
align-items: center;
|
||||||
padding-left: 40px;
|
justify-content: center;
|
||||||
|
|
||||||
.title {
|
max-width: 500px;
|
||||||
h1 {
|
|
||||||
font-family: 'Space Grotesk', sans-serif;
|
padding: 40px;
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
.content_header {
|
||||||
|
height: 70px;
|
||||||
|
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttonsBox {
|
.actions {
|
||||||
width: fit-content;
|
display: flex;
|
||||||
border: 1px solid var(--border-color);
|
flex-direction: column;
|
||||||
border-radius: 12px;
|
|
||||||
|
|
||||||
padding: 20px 50px;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
.register {
|
width: 100%;
|
||||||
p {
|
|
||||||
margin-top: 10px;
|
|
||||||
word-wrap: break-word;
|
|
||||||
max-width: 300px;
|
|
||||||
|
|
||||||
font-size: 11px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
color: var(--background-color-contrast);
|
.ant-btn {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: -0.6px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes opacityIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user