add error display for loggedin page
This commit is contained in:
parent
c88fa484da
commit
6d687cabc6
GPG Key ID:
14546221E3595D0C
|
|
@ -0,0 +1,27 @@
|
|||
import React from "react";
|
||||
import { styled } from "styled-components";
|
||||
|
||||
const FloatingBox = styled.div`
|
||||
position: fixed;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid #c2c4c2;
|
||||
border-radius: 12px;
|
||||
padding: 24px 36px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 1px #00000010;
|
||||
|
||||
text-align: center;
|
||||
|
||||
& hr {
|
||||
margin-bottom: 24px;
|
||||
height: 0px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #c2c4c2;
|
||||
box-shadow: 0 2px 1px #c2c4c280;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
export default FloatingBox;
|
||||
|
|
@ -2,6 +2,7 @@ import React from "react";
|
|||
import { styled } from "styled-components";
|
||||
import { HashLoader } from "react-spinners";
|
||||
import { SigninResponse, SigninState } from 'oidc-client-ts';
|
||||
import FloatingBox from "../../components/UI/FloatingBox";
|
||||
|
||||
const CenterContainer = styled.div`
|
||||
position: relative;
|
||||
|
|
@ -18,27 +19,49 @@ const CenterContainer = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const ErrorText = styled.p`
|
||||
font-family: monospace;
|
||||
margin: 10px 0;
|
||||
width: 780px;
|
||||
`;
|
||||
|
||||
export default class LoggedIn extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.response = new SigninResponse(new URL(window.location.href).searchParams);
|
||||
this.signin_state = SigninState.fromStorageString(window.localStorage.getItem('oidc_signin_state'));
|
||||
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
console.log(this.response)
|
||||
console.log(this.signin_state);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{height: '65vh'}}>
|
||||
<CenterContainer>
|
||||
<h2>Подождите пожалуйста</h2>
|
||||
<div style={{margin: '36px auto', width:'fit-content'}}>
|
||||
<HashLoader size='80' color='#0077aa' />
|
||||
<>
|
||||
<div style={{height: '65vh'}}>
|
||||
<CenterContainer>
|
||||
<h2>Подождите пожалуйста</h2>
|
||||
<div style={{margin: '36px auto', width:'fit-content'}}>
|
||||
<HashLoader size='80' color='#0077aa' />
|
||||
</div>
|
||||
</CenterContainer>
|
||||
</div>
|
||||
|
||||
{
|
||||
this.response.error ?
|
||||
<div>
|
||||
<FloatingBox>
|
||||
<h2>Ошибка авторизации</h2>
|
||||
<p>{this.response.error}</p>
|
||||
<ErrorText>{this.response.error_description}</ErrorText>
|
||||
</FloatingBox>
|
||||
</div>
|
||||
</CenterContainer>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +1,15 @@
|
|||
import React from 'react';
|
||||
|
||||
import { styled } from 'styled-components';
|
||||
import BlueButton from '../../components/UI/BlueButton';
|
||||
import { HashLoader } from 'react-spinners';
|
||||
import BlueButton from '../../components/UI/BlueButton';
|
||||
import FloatingBox from '../../components/UI/FloatingBox';
|
||||
|
||||
import * as OpenID from 'oidc-client-ts';
|
||||
import constants from '../../constants';
|
||||
|
||||
const { OIDCConfig } = constants;
|
||||
|
||||
const LoginBox = styled.div`
|
||||
position: fixed;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid #c2c4c2;
|
||||
border-radius: 12px;
|
||||
padding: 24px 36px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 1px #00000010;
|
||||
|
||||
text-align: center;
|
||||
|
||||
& h2 {
|
||||
margin: 0px 0;
|
||||
}
|
||||
& hr {
|
||||
margin: 16px 0;
|
||||
margin-bottom: 24px;
|
||||
height: 0px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #c2c4c2;
|
||||
box-shadow: 0 2px 1px #c2c4c280;
|
||||
}
|
||||
& p {
|
||||
font-size: 8pt;
|
||||
color: gray;
|
||||
margin-top: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const LoginButton = styled(BlueButton)`
|
||||
font-size: 11pt;
|
||||
width: 250px;
|
||||
|
|
@ -60,6 +30,12 @@ const LoginButton = styled(BlueButton)`
|
|||
}
|
||||
`;
|
||||
|
||||
const SmallText = styled.p`
|
||||
font-size: 8pt;
|
||||
color: gray;
|
||||
margin-top: 16px;
|
||||
`;
|
||||
|
||||
const VVSULogoSVG = () => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 451.5 155.9"><path fillRule="evenodd" d="M408.7 0h42.8L416 102.5l-2.8 8.1c-8.2 23.9-33.9 43.6-58 45.2h-.6c-.8.1-1.6.1-2.5.1H348c-.8 0-1.6 0-2.4-.1h-43l15.7-45.2.3-.8h35.7c9.1 0 19.2-7.8 22.5-17.2l.4-1 1.2-3.5h-32.7c-4.4 0-19.5 0-13.1-18.5l4.4-12.9 3.9-11.2L356.5 0H393l-21.7 62.8H387c2.6-7.5 15.8-45.6 21.7-62.8zm-91.2 0h25.9l-15.7 45.3h-7c-9.6 0-20.1 7.9-23.5 17.4L265 155.9c-.5 0-1-.1-1.5-.1h-43l15.8-45.2 7.8-22.6 14.8-42.5c8.3-24.1 34.4-44 58.6-45.2V0zM208 0h48.7l-20.1 58.1c-3.2 9.1-9.4 15.2-19.4 17.2l16.8.1-12.3 35.2c-8.2 23.9-33.9 43.6-58 45.2h-.7c-.8.1-1.6.1-2.5.1h-4.1c-.8 0-1.6 0-2.4-.1h-43l38.2-110.4c8.4-24.1 34.4-44 58.7-45.2l.1-.2zm-12.7 40.8h15.4l-8.1 23h-23.9l4.4-12.5c1.7-4.6 7.3-10.5 12.2-10.5zm-25.6 48.8H194l-5.5 16.1c-1.1 3.4-6.1 10.8-13.6 10.8h-14.1l8.9-26.9zM96.9 0h48.7l-20.2 58.1c-3.2 9.1-9.4 15.2-19.4 17.2l16.8.1-9.3 27.1h-.2l-2.8 8.1c-8.2 23.9-33.9 43.6-58 45.2h-.6c-.8.1-1.7.1-2.5.1h-4.1c-.8 0-1.6 0-2.4-.1H0l15.7-45.2L23.6 88l14.7-42.5C46.7 21.4 72.7 1.5 97 .3V0zM84.2 40.8h15.4l-8.1 23H67.6L72 51.3c1.7-4.6 7.3-10.5 12.2-10.5zM58.6 89.6h24.3l-5.5 16.1c-1.1 3.4-6.1 10.8-13.5 10.8H49.7l8.9-26.9z" clipRule="evenodd"/></svg>;
|
||||
}
|
||||
|
|
@ -92,7 +68,7 @@ export default class LoginPage extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div style={{height: '65vh'}}>
|
||||
<LoginBox>
|
||||
<FloatingBox>
|
||||
<h2>Вход</h2>
|
||||
<hr/>
|
||||
<LoginButton onClick={this.openid} disabled={this.state.loading}>
|
||||
|
|
@ -105,11 +81,11 @@ export default class LoginPage extends React.Component {
|
|||
</>
|
||||
}
|
||||
</LoginButton>
|
||||
<p>
|
||||
<SmallText>
|
||||
Вход осуществляется только через<br/>
|
||||
Систему Единого Входа ВВГУ
|
||||
</p>
|
||||
</LoginBox>
|
||||
</SmallText>
|
||||
</FloatingBox>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue