aleabodo/mywebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logo change, Loading Page changes, password toggle bullets

Browse Source
This commit is contained in:
Alexander Bell 2019-02-24 17:40:31 +01:00
parent 3d33a5b0d1
commit 460fc39519
6 changed files with 39 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/loadingPage.js
View File

@ -1,77 +0,0 @@
import React, { Component } from 'react';
import logo from "../files/images/logo.svg";
class PageLoading extends Component {
constructor(props) {
super(props);
/*
* Expected props:
* /
*/
this.state = {
display: true
}
}
componentWillUnmount() {
}
componentDidMount() {
//Color background
this.interval1 = setInterval(function () {
document.getElementById("PageLoading").style.backgroundColor = "transparent";
},1100);
//remove Logo
this.interval2 = setInterval(function () {
document.getElementById("PageLoading_Logo").classList.add("PageLoading_Logo-fadeOut");
},2500);
//Unmount
this.interval3 = setInterval(() => {
clearInterval(this.interval1);
clearInterval(this.interval2);
clearInterval(this.interval3);
this.setState({
display: false
});
},5500);
}
render() {
//<div className="pageLoadingLogo"></div>
const url = logo + '?' + Math.random();
if(this.state.display) {
return(
<div className="PageLoading" id="PageLoading">
<img className="PageLoading_Logo" id="PageLoading_Logo" alt="" src={url} />
<div className="PageLoading_left PageLoading_1 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_1 PageLoading_Element"></div>
<div className="PageLoading_left PageLoading_2 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_2 PageLoading_Element"></div>
<div className="PageLoading_left PageLoading_3 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_3 PageLoading_Element"></div>
<div className="PageLoading_left PageLoading_4 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_4 PageLoading_Element"></div>
<div className="PageLoading_left PageLoading_5 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_5 PageLoading_Element"></div>
</div>
);
} else {
return(null);
}
}
}
export default PageLoading;

75
src/files/images/logo.svg
View File

@ -1,79 +1,28 @@
<svg width="640" height="479.99999999999994" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<style type="text/css">
<![CDATA[
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
.circle {
fill: #DA3821;
stroke-width: 7;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: circleDraw 2s;
}
.a {
opacity: 1;
font-size: 24px;
animation: fontFadeA 4s;
}
.b {
opacity: 1;
font-size: 24px;
animation: fontFadeB 3.5s;
}
@keyframes fontFadeA {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fontFadeB {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes circleDraw {
0% {
stroke-dashoffset: 1000;
fill: transparent;
}
30% {
fill: transparent;
}
100% {
fill: #DA3821;
stroke-dashoffset: 0;
}
}
]]>
</style>
</defs>
<title>MyLogo</title>
<g>
<title>background</title>
<rect x="-1" y="-1" width="642" height="482" id="canvas_background" fill="none"/>
</g>
<g>
<title>Layer 1</title>
<path class="circle" id="svg_2" d="m175.64902,246.04444c0,-81.71632 66.19021,-147.90653 147.90652,-147.90653c81.71632,0 147.90653,66.19021 147.90653,147.90653c0,81.71631 -66.19021,147.90652 -147.90653,147.90652c-81.71631,0 -147.90652,-66.19021 -147.90652,-147.90652z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke="#e45f4d" fill-opacity="null"/>
<text class="a" font-family="Monospace" font-weight="normal" stroke="#ffffff" transform="matrix(16.070920656049648,0,0,14.324953552691046,-1383.3705537140042,-1389.329317933106) " xml:space="preserve" text-anchor="middle" font-size="24" id="svg_4" y="117.786939" x="101.824642" stroke-linecap="null" stroke-linejoin="null" fill="#ffffff">A</text>
<text class="b" font-family="Monospace" id="svg_5" font-weight="normal" stroke="#ffffff" transform="rotate(-19 389.5501403808595,276.68469238281244) matrix(15.254961764346335,0,0,14.324953552691046,-1315.1918495589248,-1390.0460388359616) " xml:space="preserve" text-anchor="middle" font-size="24" y="124.386839" x="111.764076" stroke-linecap="null" stroke-linejoin="null" fill="#ffffff">B</text>
</g>
</svg>
</defs>
<path class="circle" id="svg_2" d="M 51.275 194.831 C 51.275 113.115 117.465 46.925 199.182 46.925 C 280.898 46.925 347.088 113.115 347.088 194.831 C 347.088 276.548 280.898 342.738 199.182 342.738 C 117.465 342.738 51.275 276.548 51.275 194.831 Z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke="#e45f4d" fill-opacity="null"/>
<path d="M 9.34 262.047 L 105.995 7.262 L 145.694 7.262 L 225.724 229.048 L 202.256 292.531 L 175.907 218.052 L 72.971 218.052 L 59.227 262.047 L 9.34 262.047 Z M 86.672 180.812 L 162.908 180.812 C 154.02 155.517 146.291 132.576 139.721 111.954 C 133.152 91.332 128.233 75.066 124.966 63.121 C 120.996 75.768 115.832 92.386 109.508 113.008 C 102.938 133.384 95.35 155.974 86.672 180.812 Z" style="fill: rgb(255, 255, 255); white-space: pre;"/>
<path d="M 180.018 341.061 L 180.018 88.035 C 181.763 88.035 185.751 87.968 191.982 87.835 C 198.213 87.718 205.191 87.661 212.917 87.661 C 220.644 87.661 228.37 87.604 236.096 87.487 C 243.823 87.355 250.178 87.287 255.163 87.287 C 284.074 87.287 306.074 93.018 321.161 104.48 C 336.232 115.941 343.766 132.137 343.766 153.067 C 343.766 165.276 340.402 176.239 333.672 185.956 C 326.943 195.674 317.597 203.522 305.633 209.502 C 320.587 215.233 331.995 223.331 339.853 233.796 C 347.697 244.261 351.617 256.345 351.617 270.049 C 351.617 291.477 343.517 308.737 327.317 321.826 C 311.116 334.899 286.567 341.435 253.667 341.435 C 246.938 341.435 239.71 341.435 231.984 341.435 C 224.258 341.435 216.905 341.368 209.927 341.235 C 202.948 341.118 196.774 341.061 191.408 341.061 C 186.057 341.061 182.261 341.061 180.018 341.061 Z M 224.507 227.816 L 224.507 309.293 L 256.658 309.293 C 273.606 309.293 285.762 305.498 293.122 297.906 C 300.467 290.299 304.138 280.763 304.138 269.302 C 304.138 264.069 303.323 258.961 301.695 253.978 C 300.083 248.995 297.284 244.51 293.296 240.523 C 289.308 236.537 284.007 233.365 277.395 231.005 C 270.797 228.631 262.515 227.442 252.546 227.442 C 246.564 227.442 241.273 227.442 236.67 227.442 C 232.051 227.442 227.996 227.567 224.507 227.816 Z M 224.507 119.43 L 224.507 195.674 L 253.294 195.674 C 268.996 195.674 280.211 192.061 286.941 184.835 C 293.67 177.609 297.035 168.764 297.035 158.299 C 297.035 153.565 296.287 148.831 294.791 144.097 C 293.296 139.363 290.746 135.127 287.14 131.389 C 283.519 127.652 278.658 124.662 272.56 122.419 C 266.446 120.177 258.777 119.056 249.555 119.056 C 244.072 119.056 239.279 119.056 235.174 119.056 C 231.054 119.056 227.498 119.18 224.507 119.43 Z" style="fill: rgb(255, 255, 255); white-space: pre;" transform="matrix(0.946424, -0.322927, 0.322927, 0.946424, -54.98148, 97.324274)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

2
src/pages/Loading.js
View File

@ -74,7 +74,7 @@ class Loading extends Component {
position: 'relative',
width: '100vw',
height: '100vh',
backgroundColor: 'black'
backgroundColor: 'white'
},
loadingContent: {

2
src/pages/Login.js
View File

@ -11,7 +11,6 @@ import { Container, Button, Form, Header, Segment, Input, Icon } from 'semantic-
/*
* Component imports
*/
import LoadingPage from '../components/loadingPage';
import Headline from '../components/Headline';
jss.setup(preset());
@ -103,7 +102,6 @@ const Login = inject("rootStore") ( observer(
render() {
return(
<div>
<LoadingPage />
<Container className={this.classes.container}>
<Segment padded="very">
<Form onSubmit={this.handleSubmit}>

30
src/pages/passwordManager/PasswordManager.js
View File

@ -2,7 +2,7 @@ import React, {Component} from 'react';
import { observer, inject } from 'mobx-react';
import jss from 'jss';
import preset from 'jss-preset-default';
import { Menu, Segment, Dropdown, Table, Button, Loader, Icon, Header, Input } from 'semantic-ui-react';
import { Menu, Segment, Dropdown, Table, Button, Loader, Icon, Header, Input, Checkbox } from 'semantic-ui-react';
import alertify from 'alertify.js';
import ReactHtmlParser from 'react-html-parser';
@ -60,6 +60,7 @@ const PasswordManager = inject("rootStore") ( observer(
this.addDoc = this.addDoc.bind(this);
this.updateDoc = this.updateDoc.bind(this);
this.deleteDoc = this.deleteDoc.bind(this);
this.togglePasswordDisplay = this.togglePasswordDisplay.bind(this);
this.state = {
newWindowOpen: false,
@ -68,7 +69,8 @@ const PasswordManager = inject("rootStore") ( observer(
key: '',
search: '',
data: [],
loading: true
loading: true,
togglePasswordDisplay: false
}
//Styles
@ -150,6 +152,14 @@ const PasswordManager = inject("rootStore") ( observer(
}
togglePasswordDisplay() {
const oldState = this.state.togglePasswordDisplay;
this.setState({
togglePasswordDisplay: !oldState
});
}
toggleEditWindow(index) {
//Open window to add a new password doc
@ -181,6 +191,8 @@ const PasswordManager = inject("rootStore") ( observer(
data: arr,
loading: false
});
}).catch(function() {
alertify.error("Data could not be loaded. Please check your internet connection");
});
}
@ -230,19 +242,27 @@ const PasswordManager = inject("rootStore") ( observer(
}
dataList.forEach((element, index) => {
const passwordDecrypted = decrypt(element.password, this.state.key)
if(element.url.toLowerCase().includes(this.state.search.toLowerCase())) {
const copyLogin = () => {
copyToClipboard(decrypt(element.login, this.state.key));
}
const copyPassword = () => {
copyToClipboard(decrypt(element.password, this.state.key));
copyToClipboard(passwordDecrypted);
}
const toggleEditWindow = () => {
this.toggleEditWindow(index);
}
const url = transformUrl(element.url);
const password = decrypt(element.password, this.state.key);
//If password display toggled off: Display dots
//Otherwise display decrypted password
var password = <div>&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;</div>;
if(this.state.togglePasswordDisplay) {
password = passwordDecrypted;
}
const login = decrypt(element.login, this.state.key);
components.push(
@ -327,7 +347,7 @@ const PasswordManager = inject("rootStore") ( observer(
<Table.HeaderCell width={4}>Application / URL</Table.HeaderCell>
<Table.HeaderCell width={5}>Username / Email adress</Table.HeaderCell>
<Table.HeaderCell width={1}></Table.HeaderCell>
<Table.HeaderCell width={4}>Password</Table.HeaderCell>
<Table.HeaderCell width={4}>Password <br /> <Checkbox toggle onChange={this.togglePasswordDisplay} /></Table.HeaderCell>
<Table.HeaderCell width={1}></Table.HeaderCell>
</Table.Row>
</Table.Header>

2
src/styles/loadingPage/loadingPage.css
View File

@ -3,7 +3,7 @@
display: block;
width: 100%;
height: 100vh;
background-color: black;
background-color: rgb(255, 255, 255);
top: 0;
z-index: 2000;
}