From 57e5dee442c879ed4fb70260d485228cbab533d3 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Tue, 26 Jul 2022 17:00:39 +0300
Subject: [PATCH] Change page signin

---
 src/pages/Onboarding1.jsx |   7 +-
 src/pages/Onboarding3.jsx |  10 +--
 src/pages/SignIn.jsx      | 132 ++++++++++++++++++++------------------
 src/store/store.js        |   8 +--
 4 files changed, 82 insertions(+), 75 deletions(-)

diff --git a/src/pages/Onboarding1.jsx b/src/pages/Onboarding1.jsx
index b5466e6..48145ae 100644
--- a/src/pages/Onboarding1.jsx
+++ b/src/pages/Onboarding1.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Link } from 'react-router-dom';
 import OnboardingImage from '../images/onboarding-image.jpg';
 import OnboardingDecoration from '../images/auth-decoration.png';
@@ -7,7 +7,10 @@ import {observer} from "mobx-react-lite";
 import {registrationStore} from "../store/store";
 
 const Onboarding1 = observer(() => {
-  registrationStore.generatePassPhrase()
+
+  useEffect(()=>{
+    registrationStore.generatePassPhrase()
+  }, [])
 
   return (
     <main className="bg-white">
diff --git a/src/pages/Onboarding3.jsx b/src/pages/Onboarding3.jsx
index 95df910..32dd364 100644
--- a/src/pages/Onboarding3.jsx
+++ b/src/pages/Onboarding3.jsx
@@ -13,13 +13,15 @@ const Onboarding3 = observer(()=>{
   function savePassPhraseInStore (copiedPhrase) {
     if (copiedPhrase.split(' ').length === 12) {
       registrationStore.savePastPassPhrase(copiedPhrase.trim());
-    } else {
-      return false
     }
   };
 
   function pastePassPhrase() {
-    navigator.clipboard.readText().then(res => savePassPhraseInStore(res))
+    navigator.clipboard.readText().then(res => savePassPhraseInStore(res));
+  };
+
+  function convertPassPhraseToArray() {
+    return registrationStore.passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
   };
 
   return (
@@ -76,7 +78,7 @@ const Onboarding3 = observer(()=>{
                   <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
                   {/* htmlForm */}
                   <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
-                    {registrationStore.convertPassPhraseToArray.map(tag => (
+                    {convertPassPhraseToArray().map(tag => (
                       <button key={tag.id} className="min-w-93px w-24 min-h-26px h-26px bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
                         <span className="text-sm font-medium">{tag.str}</span>
                       </button>
diff --git a/src/pages/SignIn.jsx b/src/pages/SignIn.jsx
index f5b4aa3..40c5e23 100644
--- a/src/pages/SignIn.jsx
+++ b/src/pages/SignIn.jsx
@@ -1,99 +1,105 @@
-import React, { useEffect } from 'react';
+import React, {useState} from 'react';
+import {observer} from "mobx-react-lite";
 import { Link } from 'react-router-dom';
-import AuthImage from '../images/auth-image.jpg';
-import AuthDecoration from '../images/auth-decoration.png';
+import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
+import Logo from "../images/logo.png";
+import {registrationStore} from "../store/store";
+
+const SignIn = observer(()=>{
+
+  const[passPhrase, setPassPhrase] = useState('- - - - - - - - - - - -');
+  const[addedPassPhrase, setAddedPassPhrase] = useState(false);
+
+  function savePassPhrase (copiedPhrase) {
+    if (copiedPhrase.split(' ').length === 12) {
+      registrationStore.savePastPassPhrase(copiedPhrase.trim());
+      setPassPhrase(registrationStore.passPhrase);
+      setAddedPassPhrase(true);
+    }
+  };
+
+  function convertPassPhraseToArray() {
+    return passPhrase.split(' ').map((item, index) => ({str:item, id:index}));
+  }
+
+  function pastePassPhrase() {
+    navigator.clipboard.readText().then(res => savePassPhrase(res));
+  };
 
-function SignIn() {
-  useEffect(() => {
-    localStorage.setItem('svgKey', '')
-  }, []);
   return (
     <main className="bg-white">
 
-      <div className="relative md:flex">
+      <div className="relative flex">
 
         {/* Content */}
-        <div className="md:w-1/2">
+        <div className="w-full md:w-1/2">
+
           <div className="min-h-screen h-full flex flex-col after:flex-1">
 
-            {/* Header */}
             <div className="flex-1">
+
+              {/* Header */}
               <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
                 {/* Logo */}
                 <Link className="block" to="/dashboard">
-                  <svg width="32" height="32" viewBox="0 0 32 32">
-                    <defs>
-                      <linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
-                        <stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#A5B4FC" offset="100%" />
-                      </linearGradient>
-                      <linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
-                        <stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
-                        <stop stopColor="#38BDF8" offset="100%" />
-                      </linearGradient>
-                    </defs>
-                    <rect fill="#6366F1" width="32" height="32" rx="16" />
-                    <path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
-                    <path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#logo-a)" />
-                    <path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#logo-b)" />
-                  </svg>
+                  <img alt='logo' src={Logo} width="89" height="32"/>
                 </Link>
+                <div className="text-sm">
+                  Have not an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
+                </div>
               </div>
             </div>
 
-            <div className="max-w-sm mx-auto px-4 py-8">
-              <h1 className="text-3xl text-slate-800 font-bold mb-6">Welcome back! ✨</h1>
-              {/* Form */}
-              <form>
-                <div className="space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium mb-1" htmlFor="email">Email Address</label>
-                    <input id="email" className="form-input w-full" type="email" />
+            <div className="px-4 mt-20 py-8">
+              <div className="max-w-fit mx-auto flex flex-col gap-y-36">
+
+                <div>
+                  <h1 className="text-3xl text-slate-800 font-bold mb-12">Company information ✨</h1>
+                  {/* htmlForm */}
+                  <div className="grid grid-cols-4 gap-y-2.5 gap-[18px] mb-14">
+                    {convertPassPhraseToArray().map(tag => (
+                      <button key={tag.id} className="min-w-[93px] min-h-[26px] bg-slate-100 text-slate-500 cursor-pointer hover:bg-blue-100 hover:text-blue-600 rounded-full text-center px-2.5">
+                        <span className="text-sm font-medium">{tag.str}</span>
+                      </button>
+                    ))}
                   </div>
-                  <div>
-                    <label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
-                    <input id="password" className="form-input w-full" type="password" autoComplete="on" />
+                  <div className="flex pl-7 gap-x-5">
+                    <button onClick={pastePassPhrase} className="btn pl-9 pr-16 border-slate-200 hover:border-slate-300 text-slate-600">
+                      <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mb-0.5" viewBox="0 0 16 16">
+                        <path
+                            d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z"></path>
+                      </svg>
+                      <span className="ml-2">Paste</span>
+                    </button>
                   </div>
                 </div>
-                <div className="flex items-center justify-between mt-6">
-                  <div className="mr-1">
-                    <Link className="text-sm underline hover:no-underline" to="/reset-password">Forgot Password?</Link>
-                  </div>
-                  <Link className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-3" to="/dashboard">Sign In</Link>
-                </div>
-              </form>
-              {/* Footer */}
-              <div className="pt-5 mt-6 border-t border-slate-200">
-                <div className="text-sm">
-                  Don’t you have an account? <Link className="font-medium text-indigo-500 hover:text-indigo-600" to="/">Sign Up</Link>
-                </div>
-                {/* Warning */}
-                <div className="mt-5">
-                  <div className="bg-amber-100 text-amber-600 px-3 py-2 rounded">
-                    <svg className="inline w-3 h-3 shrink-0 fill-current mr-2" viewBox="0 0 12 12">
-                      <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
-                    </svg>
-                    <span className="text-sm">
-                      To support you during the pandemic super pro features are free until March 31st.
-                    </span>
-                  </div>
+                <div className="flex items-center justify-between">
+                  <button className="btn bg-indigo-500 hover:bg-indigo-600 text-white ml-auto">
+                    <Link to={addedPassPhrase && "/dashboard"}>Go To Profile -&gt;</Link>
+                  </button>
                 </div>
+
               </div>
             </div>
 
           </div>
+
         </div>
 
         {/* Image */}
-        <div className="hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
-          <img className="object-cover object-center w-full h-full" src={AuthImage} width="760" height="1024" alt="Authentication" />
-          <img className="absolute top-1/4 left-0 transform -translate-x-1/2 ml-8 hidden lg:block" src={AuthDecoration} width="218" height="224" alt="Authentication decoration" />
+        <div className="flex flex-col items-center h-full w-full hidden md:block absolute top-0 bottom-0 right-0 md:w-1/2" aria-hidden="true">
+          <div className="flex mt-40 flex-col items-center gap-2.5">
+            <div className={`${addedPassPhrase || 'opacity-0'} w-[493px] h-[493px]`}>
+              <img className="object-cover object-center" alt="" src={generateSvgAvatar(registrationStore.pubKey)}/>
+            </div>
+            <span className="text-sm">Your Digital ID</span>
+          </div>
         </div>
 
       </div>
 
     </main>
   );
-}
+});
 
 export default SignIn;
diff --git a/src/store/store.js b/src/store/store.js
index b7ecc63..43b47f9 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -31,8 +31,6 @@ class Store {
 
     this.fetchNodeInfo()
 
-    this.generatePassPhrase()
-
     reaction(() => this.keysArray, () => this.fetchSharedData())
     onBecomeObserved(this, "decryptedUserData", () => this.fetchNewAccountData())
     onBecomeObserved(this, "sharedData", () => this.fetchKeysArray())
@@ -82,6 +80,7 @@ class Store {
 
   generatePassPhrase() {
     this._passPhrase = passphrase.Mnemonic.generateMnemonic()
+    sessionStorage.setItem('passPhrase', this._passPhrase)
   }
 
   fetchSharedData() {
@@ -104,6 +103,7 @@ class Store {
 
   savePastPassPhrase(phrase) {
     this._passPhrase = phrase
+    sessionStorage.setItem('passPhrase', this._passPhrase)
   }
 
   saveDataRegistration(data) {
@@ -198,10 +198,6 @@ class Store {
     return this._passPhrase
   }
 
-  get convertPassPhraseToArray() {
-    return this._passPhrase.split(' ').map((item, index) => ({str:item, id:index}))
-  }
-
   get accountData() {
     return this._accountData
   };