Merge branch 'home' of ElliottStansbury/JhipsterGroupProject-Client into home

src/main/java/rocks/zipcode/io/web/rest/AccountResource.java

@@ -0,0 +1,192 @@
+package rocks.zipcode.io.web.rest;
+
+import com.codahale.metrics.annotation.Timed;
+
+import rocks.zipcode.io.domain.User;
+import rocks.zipcode.io.repository.ProfileRepository;
+import rocks.zipcode.io.repository.UserRepository;
+import rocks.zipcode.io.security.SecurityUtils;
+import rocks.zipcode.io.service.MailService;
+import rocks.zipcode.io.service.UserService;
+import rocks.zipcode.io.service.dto.PasswordChangeDTO;
+import rocks.zipcode.io.service.dto.UserDTO;
+import rocks.zipcode.io.web.rest.errors.*;
+import rocks.zipcode.io.web.rest.vm.KeyAndPasswordVM;
+import rocks.zipcode.io.web.rest.vm.ManagedUserVM;
+
+import org.apache.commons.lang3.StringUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.*;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.validation.Valid;
+import java.util.*;
+
+
+/**
+ * REST controller for managing the current user's account.
+ */
+@RestController
+@RequestMapping("/api")
+public class AccountResource {
+
+    private final Logger log = LoggerFactory.getLogger(AccountResource.class);
+
+    private final UserRepository userRepository;
+
+    private final UserService userService;
+
+    private final MailService mailService;
+
+    public AccountResource(UserRepository userRepository, UserService userService, MailService mailService) {
+
+        this.userRepository = userRepository;
+        this.userService = userService;
+        this.mailService = mailService;
+    }
+
+    /**
+     * POST  /register : register the user.
+     *
+     * @param managedUserVM the managed user View Model
+     * @throws InvalidPasswordException 400 (Bad Request) if the password is incorrect
+     * @throws EmailAlreadyUsedException 400 (Bad Request) if the email is already used
+     * @throws LoginAlreadyUsedException 400 (Bad Request) if the login is already used
+     */
+    @PostMapping("/register")
+    @Timed
+    @ResponseStatus(HttpStatus.CREATED)
+    public void registerAccount(@Valid @RequestBody ManagedUserVM managedUserVM) {
+        if (!checkPasswordLength(managedUserVM.getPassword())) {
+            throw new InvalidPasswordException();
+        }
+        User user = userService.registerUser(managedUserVM, managedUserVM.getPassword());
+        mailService.sendActivationEmail(user);
+        System.out.println("1");
+    }
+
+    /**
+     * GET  /activate : activate the registered user.
+     *
+     * @param key the activation key
+     * @throws RuntimeException 500 (Internal Server Error) if the user couldn't be activated
+     */
+    @GetMapping("/activate")
+    @Timed
+    public void activateAccount(@RequestParam(value = "key") String key) {
+        Optional<User> user = userService.activateRegistration(key);
+        if (!user.isPresent()) {
+            throw new InternalServerErrorException("No user was found for this activation key");
+        }
+    }
+
+    /**
+     * GET  /authenticate : check if the user is authenticated, and return its login.
+     *
+     * @param request the HTTP request
+     * @return the login if the user is authenticated
+     */
+    @GetMapping("/authenticate")
+    @Timed
+    public String isAuthenticated(HttpServletRequest request) {
+        log.debug("REST request to check if the current user is authenticated");
+        System.out.println("3");
+        return request.getRemoteUser();
+    }
+
+    /**
+     * GET  /account : get the current user.
+     *
+     * @return the current user
+     * @throws RuntimeException 500 (Internal Server Error) if the user couldn't be returned
+     */
+    @GetMapping("/account")
+    @Timed
+    public UserDTO getAccount() {
+        System.out.println("4");
+        return userService.getUserWithAuthorities()
+            .map(UserDTO::new)
+            .orElseThrow(() -> new InternalServerErrorException("User could not be found"));
+    }
+
+    /**
+     * POST  /account : update the current user information.
+     *
+     * @param userDTO the current user information
+     * @throws EmailAlreadyUsedException 400 (Bad Request) if the email is already used
+     * @throws RuntimeException 500 (Internal Server Error) if the user login wasn't found
+     */
+    @PostMapping("/account")
+    @Timed
+    public void saveAccount(@Valid @RequestBody UserDTO userDTO) {
+        final String userLogin = SecurityUtils.getCurrentUserLogin().orElseThrow(() -> new InternalServerErrorException("Current user login not found"));
+        Optional<User> existingUser = userRepository.findOneByEmailIgnoreCase(userDTO.getEmail());
+        if (existingUser.isPresent() && (!existingUser.get().getLogin().equalsIgnoreCase(userLogin))) {
+            throw new EmailAlreadyUsedException();
+        }
+        Optional<User> user = userRepository.findOneByLogin(userLogin);
+        if (!user.isPresent()) {
+            throw new InternalServerErrorException("User could not be found");
+        }
+        userService.updateUser(userDTO.getFirstName(), userDTO.getLastName(), userDTO.getEmail(), userDTO.getLangKey(), userDTO.getImageUrl());
+    }
+
+    /**
+     * POST  /account/change-password : changes the current user's password
+     *
+     * @param passwordChangeDto current and new password
+     * @throws InvalidPasswordException 400 (Bad Request) if the new password is incorrect
+     */
+    @PostMapping(path = "/account/change-password")
+    @Timed
+    public void changePassword(@RequestBody PasswordChangeDTO passwordChangeDto) {
+        if (!checkPasswordLength(passwordChangeDto.getNewPassword())) {
+            throw new InvalidPasswordException();
+        }
+        userService.changePassword(passwordChangeDto.getCurrentPassword(), passwordChangeDto.getNewPassword());
+    }
+
+    /**
+     * POST   /account/reset-password/init : Send an email to reset the password of the user
+     *
+     * @param mail the mail of the user
+     * @throws EmailNotFoundException 400 (Bad Request) if the email address is not registered
+     */
+    @PostMapping(path = "/account/reset-password/init")
+    @Timed
+    public void requestPasswordReset(@RequestBody String mail) {
+       mailService.sendPasswordResetMail(
+           userService.requestPasswordReset(mail)
+               .orElseThrow(EmailNotFoundException::new)
+       );
+    }
+
+    /**
+     * POST   /account/reset-password/finish : Finish to reset the password of the user
+     *
+     * @param keyAndPassword the generated key and the new password
+     * @throws InvalidPasswordException 400 (Bad Request) if the password is incorrect
+     * @throws RuntimeException 500 (Internal Server Error) if the password could not be reset
+     */
+    @PostMapping(path = "/account/reset-password/finish")
+    @Timed
+    public void finishPasswordReset(@RequestBody KeyAndPasswordVM keyAndPassword) {
+        if (!checkPasswordLength(keyAndPassword.getNewPassword())) {
+            throw new InvalidPasswordException();
+        }
+        Optional<User> user =
+            userService.completePasswordReset(keyAndPassword.getNewPassword(), keyAndPassword.getKey());
+
+        if (!user.isPresent()) {
+            throw new InternalServerErrorException("No user was found for this reset key");
+        }
+    }
+
+    private static boolean checkPasswordLength(String password) {
+        return !StringUtils.isEmpty(password) &&
+            password.length() >= ManagedUserVM.PASSWORD_MIN_LENGTH &&
+            password.length() <= ManagedUserVM.PASSWORD_MAX_LENGTH;
+    }
+}

src/main/webapp/app/home/home.component.html

@@ -4,8 +4,8 @@
     </div>
     <div class="col-md-9">
 
-        <h1 class="display-1" jhiTranslate="home.title">Welcome to Elliott!</h1>
-        <p class="lead" jhiTranslate="home.subtitle">This is your homepage</p>
+        <h1 class="display-1" jhiTranslate="home.title">Welcome to Faeboo!</h1>
+        <h2 class="lead" jhiTranslate="home.subtitle">This is your homepage</h2>
 
         <div [ngSwitch]="isAuthenticated()">
             <div class="alert alert-success" *ngSwitchCase="true">
@@ -13,9 +13,11 @@
                     translateValues="{username: '{{account.login}}'}"> You are logged in as user "{{account.login}}". </span>
             </div>
 
+            <br>
             <div class="alert alert-warning" *ngSwitchCase="false">
-                <span jhiTranslate="global.messages.info.authenticated.prefix">If you want to </span>
-                <a class="alert-link" (click)="login()" jhiTranslate="global.messages.info.authenticated.link">sign in</a><span jhiTranslate="global.messages.info.authenticated.suffix">, you can try the default accounts:<br/>- Administrator (login="admin" and password="admin") <br/>- User (login="user" and password="user").</span>
+
+                <span>You can sign in by clicking</span>
+                <a class="alert-link" (click)="login()" >sign in</a>
             </div>
             <div class="alert alert-warning" *ngSwitchCase="false">
                 <span jhiTranslate="global.messages.info.register.noaccount">You don't have an account yet?</span>&nbsp;
@@ -23,13 +25,10 @@
             </div>
         </div>
 
-        <p jhiTranslate="home.question">
-            If you have any question on JHipster:
-        </p>
+
 
 
         <p>
-            <span jhiTranslate="home.like">If you like JHipster, don't forget to give us a star on</span> <a href="https://github.com/jhipster/generator-jhipster" target="_blank" rel="noopener" jhiTranslate="home.github">GitHub</a>!
         </p>
     </div>
 </div>

src/main/webapp/app/home/home.scss

@@ -6,7 +6,7 @@ Main page styles
     display: inline-block;
     width: 347px;
     height: 497px;
-    background: url('../../content/images/faceofbooks1.jpg') no-repeat center top;
+    background: url('../../content/images/faceofbooks1.png') no-repeat center top;
     background-size: contain;
 }
 
@@ -17,7 +17,7 @@ Main page styles
     only screen and (min-resolution: 192dpi),
     only screen and (min-resolution: 2dppx) {
     .hipster {
-        background: url('../../content/images/faceofbooks1.jpg') no-repeat center top;
+        background: url('../../content/images/faceofbooks1.png') no-repeat center top;
         background-size: contain;
     }
 }

src/main/webapp/app/layouts/footer/footer.component.html

@@ -1,3 +1 @@
-<div class="footer">
-    <p jhiTranslate="footer">This is your footer</p>
-</div>
+

src/main/webapp/app/layouts/main/main.component.html

@@ -1,4 +1,3 @@
-<jhi-page-ribbon></jhi-page-ribbon>
 <div>
     <router-outlet name="navbar"></router-outlet>
 </div>

src/main/webapp/app/layouts/navbar/navbar.component.html

@@ -5,8 +5,7 @@
         </a>
         <a class="navbar-brand logo float-left" routerLink="/" (click)="collapseNavbar()">
             <span class="logo-img"></span>
-            <span jhiTranslate="global.title" class="navbar-title">FaeBoo</span> <span class="navbar-version">{{version}}</span>
-        </a>
+            <span jhiTranslate="global.title" class="navbar-title">FaeBoo</span>
     </div>
     <div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed" [ngSwitch]="isAuthenticated()">
         <ul class="navbar-nav ml-auto">

src/main/webapp/content/css/loading.css

@@ -1,155 +1,235 @@
-@keyframes lds-pacman-1 {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    50% {
-        -webkit-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-    }
-    100% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
+/*@keyframes lds-pacman-1 {*/
+/*0% {*/
+/*-webkit-transform: rotate(0deg);*/
+/*transform: rotate(0deg);*/
+/*}*/
+/*50% {*/
+/*-webkit-transform: rotate(-45deg);*/
+/*transform: rotate(-45deg);*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: rotate(0deg);*/
+/*transform: rotate(0deg);*/
+/*}*/
+/*}*/
+/*@-webkit-keyframes lds-pacman-1 {*/
+/*0% {*/
+/*-webkit-transform: rotate(0deg);*/
+/*transform: rotate(0deg);*/
+/*}*/
+/*50% {*/
+/*-webkit-transform: rotate(-45deg);*/
+/*transform: rotate(-45deg);*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: rotate(0deg);*/
+/*transform: rotate(0deg);*/
+/*}*/
+/*}*/
+/*@keyframes lds-pacman-2 {*/
+/*0% {*/
+/*-webkit-transform: rotate(180deg);*/
+/*transform: rotate(180deg);*/
+/*}*/
+/*50% {*/
+/*-webkit-transform: rotate(225deg);*/
+/*transform: rotate(225deg);*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: rotate(180deg);*/
+/*transform: rotate(180deg);*/
+/*}*/
+/*}*/
+/*@-webkit-keyframes lds-pacman-2 {*/
+/*0% {*/
+/*-webkit-transform: rotate(180deg);*/
+/*transform: rotate(180deg);*/
+/*}*/
+/*50% {*/
+/*-webkit-transform: rotate(225deg);*/
+/*transform: rotate(225deg);*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: rotate(180deg);*/
+/*transform: rotate(180deg);*/
+/*}*/
+/*}*/
+/*@keyframes lds-pacman-3 {*/
+/*0% {*/
+/*-webkit-transform: translate(190px, 0);*/
+/*transform: translate(190px, 0);*/
+/*opacity: 0;*/
+/*}*/
+/*20% {*/
+/*opacity: 1;*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: translate(70px, 0);*/
+/*transform: translate(70px, 0);*/
+/*opacity: 1;*/
+/*}*/
+/*}*/
+/*@-webkit-keyframes lds-pacman-3 {*/
+/*0% {*/
+/*-webkit-transform: translate(190px, 0);*/
+/*transform: translate(190px, 0);*/
+/*opacity: 0;*/
+/*}*/
+/*20% {*/
+/*opacity: 1;*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: translate(70px, 0);*/
+/*transform: translate(70px, 0);*/
+/*opacity: 1;*/
+/*}*/
+/*}*/
+
+/*.app-loading {*/
+/*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
+/*position: relative;*/
+/*display: flex;*/
+/*flex-direction: column;*/
+/*align-items: center;*/
+/*justify-content: center;*/
+/*top: 10em;*/
+/*}*/
+/*.app-loading p {*/
+/*display: block;*/
+/*font-size: 1.17em;*/
+/*margin-inline-start: 0px;*/
+/*margin-inline-end: 0px;*/
+/*font-weight: normal;*/
+/*}*/
+
+/*.app-loading .lds-pacman {*/
+/*position: relative;*/
+/*margin: auto;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(2) div {*/
+/*position: absolute;*/
+/*top: 40px;*/
+/*left: 40px;*/
+/*width: 120px;*/
+/*height: 60px;*/
+/*border-radius: 120px 120px 0 0;*/
+/*background: #bbcedd;*/
+/*-webkit-animation: lds-pacman-1 1s linear infinite;*/
+/*animation: lds-pacman-1 1s linear infinite;*/
+/*-webkit-transform-origin: 60px 60px;*/
+/*transform-origin: 60px 60px;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(2) div:nth-child(2) {*/
+/*-webkit-animation: lds-pacman-2 1s linear infinite;*/
+/*animation: lds-pacman-2 1s linear infinite;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(1) div {*/
+/*position: absolute;*/
+/*top: 92px;*/
+/*left: -8px;*/
+/*width: 24px;*/
+/*height: 24px;*/
+/*border-radius: 50%;*/
+/*background-image: url('../images/hipster192.png');*/
+/*background-size: contain;*/
+/*-webkit-animation: lds-pacman-3 1s linear infinite;*/
+/*animation: lds-pacman-3 1.5s linear infinite;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(1) div:nth-child(1) {*/
+/*-webkit-animation-delay: -0.67s;*/
+/*animation-delay: -1s;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(1) div:nth-child(2) {*/
+/*-webkit-animation-delay: -0.33s;*/
+/*animation-delay: -0.5s;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(1) div:nth-child(3) {*/
+/*-webkit-animation-delay: 0s;*/
+/*animation-delay: 0s;*/
+/*}*/
+/*.app-loading .lds-pacman {*/
+/*width: 200px !important;*/
+/*height: 200px !important;*/
+/*-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);*/
+/*transform: translate(-100px, -100px) scale(1) translate(100px, 100px);*/
+/*}*/
+.sk-cube-grid {
+    position: absolute;
+    top: calc(100vh - 50% - 40px / 2);
+    left: calc(100vw - 50% - 40px / 2);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    margin: auto;
 }
-@-webkit-keyframes lds-pacman-1 {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    50% {
-        -webkit-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-    }
-    100% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
+
+.sk-cube-grid .sk-cube {
+    width: 33%;
+    height: 33%;
+    background-color: #333;
+    float: left;
+    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+}
+.sk-cube-grid .sk-cube1 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube2 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube3 {
+    -webkit-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+}
+.sk-cube-grid .sk-cube4 {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+}
+.sk-cube-grid .sk-cube5 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube6 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube7 {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
 }
-@keyframes lds-pacman-2 {
-    0% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-    50% {
-        -webkit-transform: rotate(225deg);
-        transform: rotate(225deg);
-    }
-    100% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
+.sk-cube-grid .sk-cube8 {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
 }
-@-webkit-keyframes lds-pacman-2 {
-    0% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-    50% {
-        -webkit-transform: rotate(225deg);
-        transform: rotate(225deg);
-    }
-    100% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
+.sk-cube-grid .sk-cube9 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
 }
-@keyframes lds-pacman-3 {
-    0% {
-        -webkit-transform: translate(190px, 0);
-        transform: translate(190px, 0);
-        opacity: 0;
-    }
-    20% {
-        opacity: 1;
-    }
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+    0%,
+    70%,
     100% {
-        -webkit-transform: translate(70px, 0);
-        transform: translate(70px, 0);
-        opacity: 1;
-    }
-}
-@-webkit-keyframes lds-pacman-3 {
-    0% {
-        -webkit-transform: translate(190px, 0);
-        transform: translate(190px, 0);
-        opacity: 0;
+        -webkit-transform: scale3D(1, 1, 1);
+        transform: scale3D(1, 1, 1);
     }
-    20% {
-        opacity: 1;
-    }
-    100% {
-        -webkit-transform: translate(70px, 0);
-        transform: translate(70px, 0);
-        opacity: 1;
+    35% {
+        -webkit-transform: scale3D(0, 0, 1);
+        transform: scale3D(0, 0, 1);
     }
 }
 
-.app-loading {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    top: 10em;
-}
-.app-loading p {
-    display: block;
-    font-size: 1.17em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    font-weight: normal;
-}
-
-.app-loading .lds-pacman {
-    position: relative;
-    margin: auto;
-}
-.app-loading .lds-pacman > div:nth-child(2) div {
-    position: absolute;
-    top: 40px;
-    left: 40px;
-    width: 120px;
-    height: 60px;
-    border-radius: 120px 120px 0 0;
-    background: #bbcedd;
-    -webkit-animation: lds-pacman-1 1s linear infinite;
-    animation: lds-pacman-1 1s linear infinite;
-    -webkit-transform-origin: 60px 60px;
-    transform-origin: 60px 60px;
-}
-.app-loading .lds-pacman > div:nth-child(2) div:nth-child(2) {
-    -webkit-animation: lds-pacman-2 1s linear infinite;
-    animation: lds-pacman-2 1s linear infinite;
-}
-.app-loading .lds-pacman > div:nth-child(1) div {
-    position: absolute;
-    top: 92px;
-    left: -8px;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background-image: url('../images/hipster192.png');
-    background-size: contain;
-    -webkit-animation: lds-pacman-3 1s linear infinite;
-    animation: lds-pacman-3 1.5s linear infinite;
-}
-.app-loading .lds-pacman > div:nth-child(1) div:nth-child(1) {
-    -webkit-animation-delay: -0.67s;
-    animation-delay: -1s;
-}
-.app-loading .lds-pacman > div:nth-child(1) div:nth-child(2) {
-    -webkit-animation-delay: -0.33s;
-    animation-delay: -0.5s;
-}
-.app-loading .lds-pacman > div:nth-child(1) div:nth-child(3) {
-    -webkit-animation-delay: 0s;
-    animation-delay: 0s;
-}
-.app-loading .lds-pacman {
-    width: 200px !important;
-    height: 200px !important;
-    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
-    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+@keyframes sk-cubeGridScaleDelay {
+    0%,
+    70%,
+    100% {
+        -webkit-transform: scale3D(1, 1, 1);
+        transform: scale3D(1, 1, 1);
+    }
+    35% {
+        -webkit-transform: scale3D(0, 0, 1);
+        transform: scale3D(0, 0, 1);
+    }
 }

src/main/webapp/index.html

@@ -21,9 +21,16 @@
     <jhi-main>
         <div class="app-loading">
             <div class="lds-css ng-scope">
-                <div class="lds-pacman">
-                    <div><div></div><div></div><div></div></div>
-                    <div><div></div><div></div><div></div></div>
+                <div class="sk-cube-grid">
+                    <div class="sk-cube sk-cube1"></div>
+                    <div class="sk-cube sk-cube2"></div>
+                    <div class="sk-cube sk-cube3"></div>
+                    <div class="sk-cube sk-cube4"></div>
+                    <div class="sk-cube sk-cube5"></div>
+                    <div class="sk-cube sk-cube6"></div>
+                    <div class="sk-cube sk-cube7"></div>
+                    <div class="sk-cube sk-cube8"></div>
+                    <div class="sk-cube sk-cube9"></div>
                 </div>
             </div>
         </div>