mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
update login
This commit is contained in:
parent
672299e8f7
commit
1e2ddb7c13
@ -7,6 +7,28 @@ import { Footer } from "components"
|
||||
|
||||
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) => {
|
||||
const [wallpaperData, setWallpaperData] = React.useState(null)
|
||||
|
||||
@ -35,61 +57,64 @@ export default (props) => {
|
||||
}, [])
|
||||
|
||||
return <div className="loginPage">
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(${wallpaperData?.url})`,
|
||||
}}
|
||||
className="wallpaper"
|
||||
>
|
||||
<p>
|
||||
{wallpaperData?.author ? wallpaperData.author : null}
|
||||
</p>
|
||||
<div className="background">
|
||||
<GradientSVG />
|
||||
</div>
|
||||
|
||||
<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="title">
|
||||
<h1>A prototype of a social network</h1>
|
||||
<div className="content_header">
|
||||
<img src={window.isMobile ? config.logo.alt : config.logo.full} className="logo" />
|
||||
</div>
|
||||
|
||||
{props.session && <div className="session_available">
|
||||
<h3><Icons.AlertCircle /> You already have a valid session.</h3>
|
||||
<div className="session_card">
|
||||
@{props.session.username}
|
||||
</div>
|
||||
<div className="actions">
|
||||
<antd.Button
|
||||
onClick={onClickLogin}
|
||||
size="large"
|
||||
icon={<Icons.LogIn />}
|
||||
type="primary"
|
||||
onClick={() => window.app.setLocation(config.app?.mainPath ?? "/home")} >
|
||||
Go to home
|
||||
>
|
||||
Continue with a Comty™ Account
|
||||
</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
|
||||
onClick={onClickLogin}
|
||||
size="large"
|
||||
icon={<Icons.LogIn />}
|
||||
type="primary"
|
||||
disabled
|
||||
>
|
||||
Login
|
||||
Continue with a RageStudio© ID™
|
||||
</antd.Button>
|
||||
</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>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
}
|
||||
@ -1,108 +1,116 @@
|
||||
.loginPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
align-items: right;
|
||||
justify-content: right;
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
|
||||
.wallpaper {
|
||||
.background {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: 50;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 56vw;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
svg {
|
||||
margin: 0;
|
||||
|
||||
//filter: blur(4px);
|
||||
opacity: 0;
|
||||
|
||||
font-size: 15px;
|
||||
|
||||
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;
|
||||
animation: opacityIn 3s ease-in-out 0s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
z-index: 20;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
|
||||
width: 45vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
|
||||
padding: 30px 50px;
|
||||
|
||||
border-radius: 20px 0 0 20px;
|
||||
z-index: 55;
|
||||
|
||||
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 {
|
||||
height: 8vh;
|
||||
min-height: 80px;
|
||||
width: fit-content;
|
||||
}
|
||||
.wrapper_background {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
|
||||
.session_available {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 12px;
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding-top: 10px;
|
||||
padding-left: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
h1 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
max-width: 500px;
|
||||
|
||||
padding: 40px;
|
||||
|
||||
.content_header {
|
||||
height: 70px;
|
||||
|
||||
margin-bottom: 50px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonsBox {
|
||||
width: fit-content;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 20px 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.register {
|
||||
p {
|
||||
margin-top: 10px;
|
||||
word-wrap: break-word;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
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