chore(client): change permissions

client/package.json

@@ -1,6 +1,6 @@
 {
     "name": "app",
-    "version": "0.1.6.2",
+    "version": "0.1.6.3",
     "private": true,
     "dependencies": {
         "@apollo/react-hooks": "^3.1.3",

client/src/utils/storage.ts

@@ -9,6 +9,28 @@ export const getStorageSaved = (): { index: number; name: string }[] => {
     return savedSpaces;
 };
 
+export const getAccountIndex = (name: string): number => {
+    let index = 0;
+    for (let i = 1; i < 11; i++) {
+        const savedName = localStorage.getItem(`auth${i}-name`);
+        if (name === savedName) {
+            index = i;
+        }
+    }
+    return index;
+};
+
+export const deleteAccountPermissions = (
+    index: number,
+    admin?: boolean,
+): void => {
+    if (admin) {
+        localStorage.removeItem(`auth${index}-read`);
+    } else {
+        localStorage.removeItem(`auth${index}-admin`);
+    }
+};
+
 export const getNextAvailable = (): number => {
     let available = 0;
     let counter = 1;

client/src/views/settings/Account.tsx

@@ -9,7 +9,12 @@ import {
 } from '../../components/generic/Styled';
 import { SettingsLine } from './Settings';
 import { useAccount } from '../../context/AccountContext';
-import { getNextAvailable, getStorageSaved } from '../../utils/storage';
+import {
+    getNextAvailable,
+    getStorageSaved,
+    getAccountIndex,
+    deleteAccountPermissions,
+} from '../../utils/storage';
 import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
 import { XSvg } from '../../components/generic/Icons';
 import {
@@ -25,7 +30,7 @@ export const AccountSettings = () => {
     const [status, setStatus] = useState('none');
 
     const { push } = useHistory();
-    const { name, changeAccount } = useAccount();
+    const { name, admin, viewOnly, changeAccount } = useAccount();
 
     const dispatch = useConnectionDispatch();
     const dispatchState = useStatusDispatch();
@@ -67,10 +72,38 @@ export const AccountSettings = () => {
         </SingleLine>
     );
 
+    const handleDelete = (admin?: boolean) => {
+        const index = getAccountIndex(name);
+        deleteAccountPermissions(index, admin);
+        dispatch({ type: 'disconnected' });
+        dispatchState({
+            type: 'disconnected',
+        });
+        changeAccount(index);
+        push('/');
+    };
+
+    const renderSwitch = () => {
+        return (
+            <SettingsLine>
+                <Sub4Title>Change Permissions</Sub4Title>
+                <MultiButton>
+                    <SingleButton onClick={() => handleDelete()}>
+                        View-Only
+                    </SingleButton>
+                    <SingleButton onClick={() => handleDelete(true)}>
+                        Admin-Only
+                    </SingleButton>
+                </MultiButton>
+            </SettingsLine>
+        );
+    };
+
     return (
         <CardWithTitle>
             <SubTitle>Account</SubTitle>
             <Card>
+                {admin && viewOnly && renderSwitch()}
                 <SettingsLine>
                     <Sub4Title>Change Account</Sub4Title>
                     <MultiButton>

client/src/views/settings/Danger.tsx

@@ -11,12 +11,13 @@ import { getStorageSaved, deleteStorage } from '../../utils/storage';
 import { useAccount } from '../../context/AccountContext';
 import styled from 'styled-components';
 import { deleteAuth } from '../../utils/auth';
-import { textColor } from '../../styles/Themes';
+import { textColor, fontColors } from '../../styles/Themes';
 import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
 import {
     MultiButton,
     SingleButton,
 } from 'components/buttons/multiButton/MultiButton';
+import { AlertCircle } from 'components/generic/Icons';
 
 export const ButtonRow = styled.div`
     width: auto;
@@ -41,6 +42,26 @@ export const SettingsButton = styled(SimpleButton)`
     }
 `;
 
+export const CheckboxText = styled.div`
+    font-size: 13px;
+    color: ${fontColors.grey7};
+    text-align: justify;
+`;
+
+export const StyledContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 16px;
+`;
+
+export const FixedWidth = styled.div`
+    height: 18px;
+    width: 18px;
+    margin: 0px;
+    margin-right: 8px;
+`;
+
 export const DangerView = () => {
     const { refreshAccount } = useAccount();
 
@@ -103,6 +124,15 @@ export const DangerView = () => {
                         </ColorButton>
                     </ButtonRow>
                 </SettingsLine>
+                <StyledContainer>
+                    <FixedWidth>
+                        <AlertCircle color={fontColors.grey7} />
+                    </FixedWidth>
+                    <CheckboxText>
+                        This does not affect in any way your node, only the
+                        ThunderHub accounts saved in this browser.
+                    </CheckboxText>
+                </StyledContainer>
             </OutlineCard>
         </CardWithTitle>
     );